Mülk Animasyonuna Genel Bakış

"Oluştur" yöntemini deneyin
Jetpack Compose, Android için önerilen kullanıcı arayüzü araç setidir. Oluşturma'da Animasyonları nasıl kullanacağınızı öğrenin.
animasyonlu*AsState → 'nı inceleyin.

Mülk animasyon sistemi, size reklam göstermek için animasyon oluşturmak için kullanılır. Herhangi bir nesne özelliğini zaman içinde değiştirecek bir animasyon tanımlayabilir, ekrana getirilip gelmemesinden bağımsız olarak. Mülk animasyonu, bir mülkün (nesnedeki bir alan) değerinin belirtilen bir süre boyunca nasıl görüneceğini belirler. Bir şeye animasyon eklemek için canlandırmak istediğiniz nesne özelliği (ör. bir nesnenin ekrandaki konumu, ve hangi değerler arasında animasyon eklemek istediğinizi seçebilirsiniz.

Mülk animasyonu sistemi, bir öğenin aşağıdaki özelliklerini tanımlayabilmenizi sağlar: animasyon:

  • Süre: Animasyonun süresini belirtebilirsiniz. Varsayılan uzunluk 300 ms'dir.
  • Zaman interpolasyonu: Mülke ait değerlerin nasıl hesaplanacağını belirtebilirsiniz. animasyon için geçerli geçen sürenin işlevi.
  • Tekrar sayısı ve davranışı: bir sürenin sonuna geldiğini ve animasyonun kaç kez tekrarlanacağını belirtir. Ayrıca transkriptinizi animasyonun tersten oynatılmasını isteyip istemediğinizi belirtin. Oynatmaları tersine çevirmek üzere ayarlama animasyon, tekrar sayısına ulaşılana kadar tekrar tekrar ileri ve sonra geri gider.
  • Animatör grupları: Animasyonları, birlikte oynatılan mantıksal kümeler halinde gruplandırabilirsiniz. veya belirtilen gecikmelerin ardından takip etmelisiniz.
  • Kare yenileme gecikmesi: Animasyonunuzun karelerinin ne sıklıkta yenileneceğini belirtebilirsiniz. İlgili içeriği oluşturmak için kullanılan varsayılan ayar her 10 ms'de bir yenilenecek şekilde ayarlanmıştır, ancak uygulamanızın kareleri yenileme hızı bu durum, son olarak sistemin genel olarak ne kadar dolu olduğuna ve sistemin temel zamanlayıcıyı ne kadar hızlı işleyebileceğine bağlıdır.

Mülk animasyonunun tam bir örneğini görmek için CustomTransition'daki ChangeColor sınıfı örneği ziyaret edin.

Mülk animasyonu nasıl çalışır?

İlk olarak, basit bir örnekle animasyonun nasıl çalıştığını inceleyelim. Şekil 1'de x özelliğiyle canlandırılmış, bu özelliği temsil eden varsayımsal nesne konumlandırabilirsiniz. Animasyonun süresi 40 ms'ye ve mesafe seyahat 40 pikseldir. Varsayılan kare yenileme hızı olan 10 ms'de bir nesne hareket eder 10 piksel ekleyeceksiniz. 40 ms. sonunda animasyon durur ve nesne yatay konum 40. Bu, doğrusal interpolasyon türüne sahip bir animasyon örneğidir. Nesne sabit bir hızda hareket eder.

Şekil 1. Doğrusal animasyon örneği

Animasyonları, doğrusal olmayan interpolasyona sahip olacak şekilde de belirtebilirsiniz. Şekil 2'de animasyonun başında hızla hızlanan ve hızlandığı şekilde yavaşlayan varsayımsal nesne sona erecektir. Nesne 40 ms'de 40 piksel hareket eder, ancak doğrusal değildir. bu animasyon yarı noktaya kadar hızlanır ve ardından sonuna geldik. Şekil 2'de gösterildiği gibi, katedilen mesafe ortadakinden daha az olması gerekir.

Şekil 2. Doğrusal olmayan animasyon örneği

Mülk animasyon sisteminin önemli bileşenlerine göz atalım. yukarıda gösterilenler gibi animasyonlar hesaplar. Şekil 3'te ana sınıfların daha iyi olur.

Şekil 3. Animasyonlar nasıl hesaplanır?

ValueAnimator nesnesi, animasyonunuzun zamanlamasını takip eder. animasyonun ne kadar süredir çalıştığı ve etkinleştirildiği özelliğin geçerli değeri gibi daha fazla bilgi edineceksiniz.

ValueAnimator, animasyon interpolasyonunu tanımlayan bir TimeInterpolator ve gösterilen özelliğin değerlerinin nasıl hesaplanacağını tanımlayan bir TypeEvaluator içerir. animasyonlu. Örneğin, Şekil 2'de, TimeInterpolator değeri şöyle olacaktır: AccelerateDecelerateInterpolator ve TypeEvaluator, IntEvaluator olacaktır.

Animasyon başlatmak için bir ValueAnimator oluşturun ve canlandırmak istediğiniz mülk için başlangıç ve bitiş değerleriyle birlikte tıklayın. start() öğesini çağırdığınızda animasyon başlar. Animasyonun tamamı boyunca ValueAnimator, geçen kesri hesaplar 0 ile 1 arasında bir değerdir. İlgili içeriği oluşturmak için kullanılan geçen oran, animasyonun tamamlandığı sürenin yüzdesini temsil eder; 0, %0 anlamına gelir ve 1, %100 anlamına gelir. Örneğin, Şekil 1'de, t = 10 ms'de geçen oran 0,25 olur çünkü toplam süre t = 40 ms.

ValueAnimator, geçen kesri hesapladığı zaman değerini hesaplamak için şu anda ayarlanmış olan TimeInterpolator değerini etkileşimli kesir. İnterpolasyonlu kesir, geçen kesri yeni bir kesirle hesaplanan zaman interpolasyonunu hesaba katan oran. Örneğin, Şekil 2'de, animasyon yavaşça hızlandığı için interpolasyon oranı (yaklaşık 0,15) geçen kesir, 0,25, t = 10 ms'de. Şekil 1'de, interpolasyon kesir her zaman geçen kesir.

İnterpolasyon oranı hesaplandığında ValueAnimator, değerini hesaplamak için uygun TypeEvaluator interpolasyon kesri, başlangıç değeri ve animasyonun bitiş değeri. Örneğin, Şekil 2'de interpolasyon oranı 0,15, t = ise 10 ms .de, özelliğin o anki değeri 0,15 × (40 - 0) veya 6 olur.

Mülk animasyonunun görünüm animasyonundan farkı nedir?

Görüntüleme animasyon sistemi, yalnızca View animasyonunu oluşturma olanağı sağlar. View dışındaki nesnelere animasyon eklemek istiyorsanız oluşturmanız gerekir. Görüntüleme animasyonu sistemi yalnızca canlandırmak için bir View nesnesinin ölçeklendirme ve bir Görünümü döndürebilir, ancak arka plan rengini değiştirebilirsiniz.

Görüntüleme animasyonu sisteminin başka bir dezavantajı, yalnızca Görünüm çizilmiştir, asıl Görünüm değildir. Örneğin, bir düğmeyi kullanmak için bir düğmeyi ekranda gördüğünüz şekilde, düğme doğru çiziliyor, ancak düğmeyi düğmesi değişmez; dolayısıyla, bunu işlemek için kendi mantığınızı uygulamanız gerekir.

Özellik animasyon sistemiyle bu kısıtlamalar tamamen kaldırılır ve herhangi bir nesnenin herhangi bir özelliği (Views ve View olmayanlar) ve nesnenin kendisi gerçekte değiştirilir. Özellik animasyon sistemi, animasyonu yürütme açısından da daha sağlamdır. Kuyruklu a işareti bir üst düzeyde, animasyon oluşturmak istediğiniz özelliklere (örneğin, renk, ve interpolasyon gibi animasyonun çeşitli yönlerini tanımlayabilir. senkronizasyonuna yardımcı olur.

Ancak görüntüleme animasyonu sisteminin ayarlanması daha kısa sürer ve yazmak için daha az kod gerekir. Görüntüleme animasyonu, yapmanız gereken her şeyi yapıyorsa veya mevcut kodunuz zaten istiyorsanız, özellik animasyon sistemini kullanmanıza gerek yoktur. Ayrıca kullanım alanı ortaya çıkıyorsa farklı durumlar için her iki animasyon sistemini de kullanmak mantıklıdır.

API'ye genel bakış

Mülk animasyon sisteminin API'lerinin çoğunu android.animation içinde bulabilirsiniz. Görüntüleme animasyon sistemi zaten android.view.animation bölgesinde birçok arapolatör tanımlar. arapolatörleri de yükleyebilirsiniz. Aşağıdaki tablolarda, kampanyalarınızın bileşenlerine ayıralım.

Animator sınıfı, içerik oluşturmak için temel yapıyı sağlar animasyonları da ekler. Minimum düzeyde sağlandığı için, normalde bu sınıfı doğrudan kullanmıyorsunuz animasyon değerlerini tam olarak destekleyecek şekilde genişletilmesi gereken işlevler. Aşağıdakiler alt sınıflar Animator uzantısına sahiptir:

Tablo 1. Animatörler

Sınıf Açıklama
ValueAnimator Ayrıca, animasyona sahip olması gerekir. Animasyonu hesaplayan temel işlevlerin hepsine sahip değerlerini içerir ve her animasyonun zamanlama ayrıntılarını içerir; animasyonun animasyon tekrarları, güncelleme etkinliklerini alan işleyiciler ve özel ayarlamalar farklı türler var. Özelliklere animasyon eklemek için iki adım vardır: animasyonlu öğeleri hesaplama animasyonlu nesnede ve mülkte bu değerleri ayarlayarak ValueAnimator ikinci parçayı çalmıyor, bu yüzden dinlemeniz gerekiyor ve ValueAnimator ve canlandırmak istediğiniz nesneleri kendi mantığınızla değiştirin. Bkz. Daha fazla bilgi için ValueAnimator ile animasyon oluşturma.
ObjectAnimator Hedef ayarlamanıza olanak tanıyan bir ValueAnimator alt sınıfı nesne ve nesne özelliklerini kontrol edin. Bu sınıf, aşağıdaki durumlarda mülkü uygun şekilde günceller: animasyon için yeni bir değer hesaplar. Şunu kullanmak için: ObjectAnimator, çoğu zaman çünkü hedef nesnelerde değer animasyonunu çok daha kolay hale getirir. Ancak, ObjectAnimator üzerinde belirli bir kısıtlamanın uygulanmasını zorunlu kılma gibi bazı ek kısıtlamaları olduğu için, ValueAnimator bazen doğrudan erişimci yöntemlerinin mevcut olması gerekir.
AnimatorSet Animasyonların belirli bir konumda çalıştırılması için bir grup mekanizması sağlar. güven içinde olur. Animasyonları birlikte, sırayla veya sonra oynatılacak şekilde ayarlayabilirsiniz. belirtilen bir gecikme. Birden fazla koeografi oluşturma animasyonlara göz atabilirsiniz.

Değerlendiriciler, mülk animasyon sistemine belirli bir için değerlerin nasıl hesaplanacağını Bir Animator tarafından sağlanan zamanlama verilerini alırlar. sınıfını, animasyonun başlangıç ve bitiş değerlerini belirler ve özelliğin animasyonlu değerlerini hesaplar bu verileri temel alır. Özellik animasyon sistemi aşağıdaki değerlendiricileri sağlar:

Tablo 2. Değerlendiriciler

Sınıf/Arayüz Açıklama
IntEvaluator int özelliklerinin değerlerini hesaplayan varsayılan değerlendirici.
FloatEvaluator float özelliklerinin değerlerini hesaplayan varsayılan değerlendirici.
ArgbEvaluator Temsil edilen renk özelliklerinin değerlerini hesaplamak için kullanılan varsayılan değerlendirici onaltılık değerler olarak gösterilir.
TypeEvaluator Kendi değerlendiricinizi oluşturmanıza olanak tanıyan arayüz. Bir int, float veya renk olmayan nesne özelliği nasıl kullanılacağını belirtmek için TypeEvaluator arayüzünü işlevini kullanın. Ayrıca int, float ve renk için özel bir TypeEvaluator belirtebilirsiniz değerleri de belirleyebilirsiniz. Daha fazla bilgi için TypeEvaluator Kullanma başlıklı bölüme bakın özel değerlendirmeci yazma hakkında bilgi edinin.

Zaman interpolatörü, bir animasyondaki belirli değerlerin zaman fonksiyonu. Örneğin, animasyonların bütününde doğrusal olarak gerçekleşecek şekilde Animasyonlar, yani animasyon tüm süre boyunca eşit olarak hareket eder. Dilerseniz bu animasyonları doğrusal olmayan zaman kullanmak için, örneğin, başlangıçta hızlanan ve sona erecektir. Tablo 3'te, android.view.animation hücresinde yer alan interpolatörler açıklanmaktadır. Sağlanan interpolatörlerin hiçbiri uygun değilse TimeInterpolator arayüzünü uygulayın ve kendi arayüzünüzü oluşturun. Özel bir veri yazma hakkında daha fazla bilgi için Arapolatörleri kullanma bölümüne bakın arapolatörde olur.

Tablo 3. İnterpolatörler

Sınıf/Arayüz Açıklama
AccelerateDecelerateInterpolator Değişim hızı yavaş başlayıp biten ancak hızlanan bir interpolatör ortaya çıkar.
AccelerateInterpolator Değişim hızı yavaş başlayıp sonra başlayan bir interpolatör hızlanır.
AnticipateInterpolator Değişimi geriye başlayıp ileriye doğru ilerleyen bir interpolatör.
AnticipateOvershootInterpolator Değişimi geriye başlayıp ileri doğru fırlayan ve hedefi aşan bir interpolatör ve son olarak son değere geri döner.
BounceInterpolator Sonunda değişimi geri gelen bir interpolatör.
CycleInterpolator Animasyonu belirli sayıda döngü boyunca tekrarlanan bir ara değer belirleyici.
DecelerateInterpolator Değişim hızı hızlı başlayıp sonra hemen başlayan bir interpolatör yavaşlar.
LinearInterpolator Değişim hızı sabit olan interpolatör.
OvershootInterpolator Değişimi ileri sararak son değeri geçen bir interpolatör geri dönüyor.
TimeInterpolator Kendi interpolatörünüzü uygulamanıza olanak tanıyan bir arayüz.

ValueAnimator kullanarak animasyon oluşturma

ValueAnimator sınıfı, int, float veya renk grubu belirterek bir animasyonun süresi değerleri girin. Şu numaralardan birini arayarak ValueAnimator alabilirsiniz: fabrika yöntemleri: ofInt(), ofFloat() veya ofObject(). Örnek:

Kotlin

ValueAnimator.ofFloat(0f, 100f).apply {
    duration = 1000
    start()
}

Java

ValueAnimator animation = ValueAnimator.ofFloat(0f, 100f);
animation.setDuration(1000);
animation.start();

Bu kodda, ValueAnimator animasyonu, start() yöntemi çalıştırıldığında 1.000 ms'lik bir süreyle 0 ile 100 arasında bir değere ayarlanır.

Ayrıca, aşağıdakileri yaparak animasyon oluşturmak için özel bir tür de belirtebilirsiniz:

Kotlin

ValueAnimator.ofObject(MyTypeEvaluator(), startPropertyValue, endPropertyValue).apply {
    duration = 1000
    start()
}

Java

ValueAnimator animation = ValueAnimator.ofObject(new MyTypeEvaluator(), startPropertyValue, endPropertyValue);
animation.setDuration(1000);
animation.start();

Bu kodda, ValueAnimator animasyonu için, startPropertyValue ile endPropertyValue arasında mantık, start() yöntemi çalıştığında MyTypeEvaluator tarafından 1000 ms boyunca sağlanır.

Animasyonun değerlerini, AnimatorUpdateListener. ValueAnimator nesnesine, şu kodu kullanabilirsiniz:

Kotlin

ValueAnimator.ofObject(...).apply {
    ...
    addUpdateListener { updatedAnimation ->
        // You can use the animated value in a property that uses the
        // same type as the animation. In this case, you can use the
        // float value in the translationX property.
        textView.translationX = updatedAnimation.animatedValue as Float
    }
    ...
}

Java

animation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator updatedAnimation) {
        // You can use the animated value in a property that uses the
        // same type as the animation. In this case, you can use the
        // float value in the translationX property.
        float animatedValue = (float)updatedAnimation.getAnimatedValue();
        textView.setTranslationX(animatedValue);
    }
});

onAnimationUpdate() içinde yönteminde güncellenmiş animasyon değerine erişebilir ve bunu görüntülemelerinizden biri. Dinleyiciler hakkında daha fazla bilgi için Animasyon işleyicileri.

ObjectAnimator'ı kullanarak animasyon yapma

ObjectAnimator, ValueAnimator sınıfının bir alt sınıfıdır (bir önceki bölümde açıklanmıştır) ve zamanlamayı birleştirmektedir ValueAnimator için motor ve değer hesaplaması bir hedef nesnenin adlandırılmış özelliğine animasyon ekleme. Bu yöntem, nesneye animasyon eklemeyi çok daha kolay hale getirir. ValueAnimator.AnimatorUpdateListener öğesini uygulamanız gerekmiyorsa, çünkü animasyonlu özellik otomatik olarak güncellenir.

ObjectAnimator örneğini örneklendirmek ValueAnimator ile benzerdir, ancak nesneyi ve bu nesnenin özelliğinin adını da belirtirsiniz ( a String) ve şunlar arasında animasyon eklenecek değerler:

Kotlin

ObjectAnimator.ofFloat(textView, "translationX", 100f).apply {
    duration = 1000
    start()
}

Java

ObjectAnimator animation = ObjectAnimator.ofFloat(textView, "translationX", 100f);
animation.setDuration(1000);
animation.start();

ObjectAnimator güncelleme özelliklerini almak için doğru şekilde kullanmak için aşağıdakileri yapmanız gerekir:

  • Animasyonunu uyguladığınız nesne özelliğinin, set<PropertyName>() Çünkü ObjectAnimator animasyon sırasında özelliği otomatik olarak güncellediğinde, seçeceğim. Örneğin, tesis adı foo ise şunu yapmanız gerekir: setFoo() yöntemine sahip. Bu belirleyici yöntem yoksa üç tane seçenekler:
    • Yapma hakkınız varsa belirleyici yöntemini sınıfa ekleyin.
    • Değiştirme hakkına sahip olduğunuz bir sarmalayıcı sınıfı kullanın ve bu sarmalayıcının değerini geçerli bir setter yöntemiyle oluşturmalı ve bunu orijinal nesneye iletmelidir.
    • Bunun yerine ValueAnimator politikasını kullanın.
  • ObjectAnimator fabrika yöntemlerinden birinde values... parametresi için yalnızca bir değer belirtirseniz bunun animasyon ekler. Bu nedenle, canlandırdığınız nesne özelliğinin bir alıcı işlevi olmalıdır. animasyonun başlangıç değerini elde etmek için kullanılan bir değerdir. Alıcı işlevi get<PropertyName>() biçiminde olmalıdır. Örneğin, tesis adı foo, getFoo() yönteminizin olması gerekir.
  • Animasyonunu yapmakta olduğunuz özelliğin alıcı (gerekirse) ve belirleyici yöntemleri, ObjectAnimator için belirttiğiniz başlangıç ve bitiş değerleriyle aynı tür üzerinde çalışır. Örneğin, targetObject.setPropName(float) targetObject.getPropName() aşağıdaki ObjectAnimator öğesini oluşturursanız: 
    ObjectAnimator.ofFloat(targetObject, "propName", 1f)
  • Animasyon uyguladığınız özellik veya nesneye bağlı olarak, invalidate() kullanarak ekranı animasyonlu değerler güncellendi. Bu işlemi onAnimationUpdate(). geri arama. Örneğin, bir Çizilebilir nesnenin renk özelliğini canlandırmak, yalnızca yeniden çizmeye başlar. View'daki mülk belirleyicilerin tümü, örneğin setAlpha() setTranslationX() görünümü uygun şekilde geçersiz kılar, dolayısıyla bu öğeleri çağırırken Görünümü geçersiz kılmanıza gerek kalmaz yöntemlerine yer verir. Dinleyiciler hakkında daha fazla bilgi için Animasyon işleyicileri.

AnimatorSet kullanarak birden çok animasyonun koreografisini oluşturun

Çoğu durumda, başka bir animasyonun ne zaman başladığına veya bitirir. Android sistemi, animasyonları bir AnimatorSet halinde gruplandırmanıza olanak tanır. Böylece animasyonların başlatılıp başlatılmayacağını belirtebilirsiniz. aynı anda, ardışık olarak veya belirtilen bir gecikmenin ardından Ayrıca AnimatorSet nesneleri iç içe yerleştirebilirsiniz.

Aşağıdaki kod snippet'i şu Animator komutunu oynatır: izin verir:

  1. bounceAnim oynar.
  2. squashAnim1, squashAnim2, stretchAnim1 ve oynar aynı anda stretchAnim2.
  3. bounceBackAnim oynar.
  4. fadeAnim oynar.

Kotlin

val bouncer = AnimatorSet().apply {
    play(bounceAnim).before(squashAnim1)
    play(squashAnim1).with(squashAnim2)
    play(squashAnim1).with(stretchAnim1)
    play(squashAnim1).with(stretchAnim2)
    play(bounceBackAnim).after(stretchAnim2)
}
val fadeAnim = ObjectAnimator.ofFloat(newBall, "alpha", 1f, 0f).apply {
    duration = 250
}
AnimatorSet().apply {
    play(bouncer).before(fadeAnim)
    start()
}

Java

AnimatorSet bouncer = new AnimatorSet();
bouncer.play(bounceAnim).before(squashAnim1);
bouncer.play(squashAnim1).with(squashAnim2);
bouncer.play(squashAnim1).with(stretchAnim1);
bouncer.play(squashAnim1).with(stretchAnim2);
bouncer.play(bounceBackAnim).after(stretchAnim2);
ValueAnimator fadeAnim = ObjectAnimator.ofFloat(newBall, "alpha", 1f, 0f);
fadeAnim.setDuration(250);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(bouncer).before(fadeAnim);
animatorSet.start();

Animasyon dinleyicileri

Aşağıda açıklanan işleyicilerle birlikte bir animasyonun süresi boyunca önemli etkinlikleri dinleyebilirsiniz.

  • Animator.AnimatorListener
  • ValueAnimator.AnimatorUpdateListener

    • onAnimationUpdate(): Animasyonun her karesinde çağrılır. Bu etkinliği dinleyin sırasında ValueAnimator tarafından oluşturulan hesaplanan değerleri kullanın animasyon ekler. Değeri kullanmak için ValueAnimator nesnesini sorgulayın getAnimatedValue() yöntemiyle geçerli animasyonlu değeri almak için etkinliğe geçirilir. Bunu uygulamak ValueAnimator kullanıyorsanız işleyici gerekir.

      Canlandırmak istediğiniz özellik veya nesneye bağlı olarak, invalidate() seçeneğini kullanarak yeni animasyonlu değerlerle kendisini yeniden çizecek. Örneğin, bir Çekilebilir nesnenin renk özelliği, yalnızca söz konusu nesne bu nesnede ekranda güncellemelere neden yeniden çizer. View'daki tüm mülk belirleyicileri, setAlpha() ve setTranslationX(), görünümü geçersiz kılar düzgün şekilde kullandığından, bu yöntemleri yeni değerlerle çağırırken Görünümü geçersiz kılmanız gerekmez.

Şu yerine AnimatorListenerAdapter sınıfını uzatabilirsiniz: Animator.AnimatorListener arayüzünü uygulamazsanız, tüm Animator.AnimatorListener yöntemlerini uygulamak istiyorsanız kullanır. AnimatorListenerAdapter sınıfı boş değer sağlar kullanabileceğiniz yöntemleri öğrendiniz.

Örneğin, aşağıdaki kod snippet'i bir AnimatorListenerAdapter oluşturur yalnızca onAnimationEnd() için geri arama:

Kotlin

ObjectAnimator.ofFloat(newBall, "alpha", 1f, 0f).apply {
    duration = 250
    addListener(object : AnimatorListenerAdapter() {
        override fun onAnimationEnd(animation: Animator) {
            balls.remove((animation as ObjectAnimator).target)
        }
    })
}

Java

ValueAnimator fadeAnim = ObjectAnimator.ofFloat(newBall, "alpha", 1f, 0f);
fadeAnim.setDuration(250);
fadeAnim.addListener(new AnimatorListenerAdapter() {
public void onAnimationEnd(Animator animation) {
    balls.remove(((ObjectAnimator)animation).getTarget());
}

ViewGroup nesnelerinde yapılan düzen değişikliklerini canlandırma

Özellik animasyon sistemi, ViewGroup nesnelerindeki değişiklikleri animasyon haline getirme olanağı sağlar ve View nesnelerine animasyon eklemenin kolay bir yolunu sunuyor.

ViewGroup içindeki düzen değişikliklerini LayoutTransition sınıf. ViewGroup içindeki görünümler eklediğinizde görünen ve kaybolan bir animasyona yer verir. bir ViewGroup'tan veya Görünümün setVisibility() yöntemi VISIBLE, INVISIBLE veya GONE. ViewGroup'taki kalan Görünümler de Yeni konumlarında animasyonlu bir görünüm oluşturabilirsiniz. Anahtar kelimelerin bir LayoutTransition nesnesinde aşağıdaki animasyonlar setAnimator() numaralı telefonu arayarak Animator nesnesini aşağıdaki LayoutTransition sabit değer:

  • APPEARING - Aynı öğede bulunan öğelerde çalıştırılan animasyonu belirten görünür.
  • CHANGE_APPEARING - Aynı öğede bulunan öğelerde çalıştırılan animasyonu belirten değişmesini sağlar.
  • DISAPPEARING - Aynı öğede bulunan öğelerde çalıştırılan animasyonu belirten ortadan kaldırır.
  • CHANGE_DISAPPEARING - Şu öğelerde çalıştırılan animasyonu gösteren bir işaret: bir öğenin kapsayıcıdan kaybolması nedeniyle değişiyor.

Görünümü özelleştirmek amacıyla bu dört etkinlik türü için kendi özel animasyonlarınızı tanımlayabilirsiniz ayarlayabilir veya animasyon sistemine varsayılan animasyonları kullanmasını söyleyebilirsiniz.

için android:animateLayoutchanges özelliğini true olarak ViewGroup şunları yapar:

<LinearLayout
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:id="@+id/verticalContainer"
    android:animateLayoutChanges="true" />

Bu özellik true (doğru) değerine ayarlanırsa, ViewGroup'un yanı sıra ViewGroup'taki kalan Görünümler.

Görünüm durumu değişikliklerini StateListAnimator kullanarak canlandırma

StateListAnimator sınıfı, bir görünümün durumu değişir. Bu nesne, bir Animator nesnesi çağrılır ve görünüm durumundaki (ör. "basılmış" veya "odaklanmış") değişiklikler.

StateListAnimator, kök içeren bir XML kaynağında tanımlanabilir Her birinin belirttiği <selector> öğesi ve alt <item> öğeleri StateListAnimator sınıfı tarafından tanımlanan farklı bir görünüm durumu. Her biri <item>, bir özellik animasyonu grubunun tanımını içerir.

Örneğin, aşağıdaki dosya x ve y ölçeğini değiştiren bir durum listesi animatörü oluşturur görünümünün gerisinde kalır:

res/xml/animate_scale.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- the pressed state; increase x and y size to 150% -->
    <item android:state_pressed="true">
        <set>
            <objectAnimator android:propertyName="scaleX"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="1.5"
                android:valueType="floatType"/>
            <objectAnimator android:propertyName="scaleY"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="1.5"
                android:valueType="floatType"/>
        </set>
    </item>
    <!-- the default, non-pressed state; set x and y size to 100% -->
    <item android:state_pressed="false">
        <set>
            <objectAnimator android:propertyName="scaleX"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="1"
                android:valueType="floatType"/>
            <objectAnimator android:propertyName="scaleY"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="1"
                android:valueType="floatType"/>
        </set>
    </item>
</selector>

Bir görünüme durum listesi animatörü eklemek için android:stateListAnimator özelliğini aşağıdaki gibi tanımlar:

<Button android:stateListAnimator="@xml/animate_scale"
        ... />

Artık animate_scale.xml işlevinde tanımlanan animasyonlar, bu düğmenin kullanabilirsiniz.

Bunun yerine, kodunuzdaki bir görünüme bir durum listesi animatörü atamak için AnimatorInflater.loadStateListAnimator() yöntemini kullanın ve animatörü View.setStateListAnimator() yöntemiyle değiştirin.

Dilerseniz görünümün özelliklerini animasyonla oluşturmak yerine, AnimatedStateListDrawable kullanarak durum değişiklikleri hakkında bilgi edinin. Widget'lardaki bazı sistem widget'ları Android 5.0, varsayılan olarak bu animasyonları kullanır. Aşağıdaki örnekte, AnimatedStateListDrawable öğesini XML kaynağı olarak tanımlamak için:

<!-- res/drawable/myanimstatedrawable.xml -->
<animated-selector
    xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- provide a different drawable for each state-->
    <item android:id="@+id/pressed" android:drawable="@drawable/drawableP"
        android:state_pressed="true"/>
    <item android:id="@+id/focused" android:drawable="@drawable/drawableF"
        android:state_focused="true"/>
    <item android:id="@id/default"
        android:drawable="@drawable/drawableD"/>

    <!-- specify a transition -->
    <transition android:fromId="@+id/default" android:toId="@+id/pressed">
        <animation-list>
            <item android:duration="15" android:drawable="@drawable/dt1"/>
            <item android:duration="15" android:drawable="@drawable/dt2"/>
            ...
        </animation-list>
    </transition>
    ...
</animated-selector>

TypeEvaluator Kullanma

Android sisteminin tanımadığı bir türün animasyonunu yapmak istiyorsanız kendi değerlendirici olarak TypeEvaluator arayüzünü uygulayabilirsiniz. Google Ads'de int, float veya bir renkle ifade edilir. IntEvaluator, FloatEvaluator ve ArgbEvaluator türü tarafından desteklenir size yardımcı olur.

TypeEvaluator kampanyasında uygulanacak yalnızca bir yöntem vardır. arayüzü, evaluate() yöntemi. Bu da animasyonlu mülkünüz için uygun bir değeri döndürmek amacıyla animasyonun geçerli noktasını seçin. FloatEvaluator sınıfında şunlar gösterilir: bunu nasıl yapabilirsiniz?

Kotlin

private class FloatEvaluator : TypeEvaluator<Any> {

    override fun evaluate(fraction: Float, startValue: Any, endValue: Any): Any {
        return (startValue as Number).toFloat().let { startFloat ->
            startFloat + fraction * ((endValue as Number).toFloat() - startFloat)
        }
    }

}

Java

public class FloatEvaluator implements TypeEvaluator {

    public Object evaluate(float fraction, Object startValue, Object endValue) {
        float startFloat = ((Number) startValue).floatValue();
        return startFloat + fraction * (((Number) endValue).floatValue() - startFloat);
    }
}

Not: ValueAnimator (veya ObjectAnimator) çalıştırıldığında, animasyonu (0 ile 1 arasında bir değer) içerir ve ardından, bağlantı kurmalısınız. İnterpolasyon oranı, TypeEvaluator metriğinizin fraction parametresi üzerinden aldığı değerdir. Dolayısıyla, Animasyonlu değerleri hesaplarken ara değer hesaplamasını dikkate almak zorunda değildir.

İnterpolatör kullanma

Ara değer belirleyici, bir animasyondaki belirli değerlerin gerekir. Örneğin, animasyonları doğrusal olarak tüm animasyonda gerçekleşecek şekilde ayarlayabilirsiniz. Bu da animasyonun tüm zaman boyunca eşit olarak hareket edeceği anlamına gelir veya animasyonların doğrusal olmayan zaman; örneğin, 2-10 ila 25 saniyede ivme veya yavaşlama animasyon ekler.

Animasyon sistemindeki interpolatörler, animatörlerden geçen süreyi ifade eder. İnterpolatörler bu kesri, istenilen türe denk gelecek şekilde değiştirir animasyon içerir. Android sistemi, Google Analytics 4'te bir dizi ortak interpolatör android.view.animation package. Bunların hiçbiri TimeInterpolator arayüzünü uygulayabilir ve sahip olmalıdır.

Örneğin, varsayılan interpolatör AccelerateDecelerateInterpolator ve LinearInterpolator, interpolasyonlu kesirleri nasıl hesapladığı aşağıda karşılaştırılmıştır. LinearInterpolator metriğinin, geçen kesir üzerinde herhangi bir etkisi yoktur. AccelerateDecelerateInterpolator, animasyona doğru hızlanır ve yavaşlar. Aşağıdaki yöntemler bu interpolatörlerin mantığını tanımlar:

AccelerateDecelerateInterpolator

Kotlin

override fun getInterpolation(input: Float): Float =
        (Math.cos((input + 1) * Math.PI) / 2.0f).toFloat() + 0.5f

Java

@Override
public float getInterpolation(float input) {
    return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;
}

Doğrusal İnterpolator

Kotlin

override fun getInterpolation(input: Float): Float = input

Java

@Override
public float getInterpolation(float input) {
    return input;
}

Aşağıdaki tabloda, bu sinyaller ile hesaplanan yaklaşık değerler gösterilmektedir 1.000 ms süren bir animasyon için arapolatörler:

geçen süre (ms) Geçen kesir/Interpole edilmiş kesir (Doğrusal) İnterpole edilmiş kesir (Hızla/Yavaşla)
0 0 0
200 0,2 0,1
400 0,4 0,345
600 0,6 0,8
800 0,8 0,9
1000 1 1

Tabloda gösterildiği gibi, LinearInterpolator, değerleri değiştirir. ile aynı hızda, geçen her 200 ms için ,2. AccelerateDecelerateInterpolator, değerleri LinearInterpolator değerinden daha hızlı 200 ms ile 600 ms arasında ve 600 ms arasında daha yavaş değiştirir. 1.000 ms.

Animasyon karelerini belirleme

Keyframe nesnesi, aşağıdakileri tanımlamanızı sağlayan bir zaman/değer çiftinden oluşur: bir animasyonun belirli bir zamanındaki belirli bir durumu ifade eder. Her animasyon karesinin kendi animasyon karesi de olabilir animasyonun önceki aralıktaki aralıkta davranışını kontrol etmek için arapolatör bu animasyon karesinin zamanını ve zamanını değiştirebilirsiniz.

Bir Keyframe nesnesini örneklendirmek için fabrikadan birini kullanmanız gerekir. yöntemleri, ofInt(), ofFloat() veya ofObject() yöntemini kullanarak uygun Keyframe türünü elde edin. Ardından ofKeyframe() fabrika yöntemini kullanarak PropertyValuesHolder nesnesini edinin. Nesneyi aldıktan sonra PropertyValuesHolder nesnesini ileterek bir animatör elde edin ve hareket ettirir. Aşağıdaki kod snippet'i bunun nasıl yapılacağını gösterir:

Kotlin

val kf0 = Keyframe.ofFloat(0f, 0f)
val kf1 = Keyframe.ofFloat(.5f, 360f)
val kf2 = Keyframe.ofFloat(1f, 0f)
val pvhRotation = PropertyValuesHolder.ofKeyframe("rotation", kf0, kf1, kf2)
ObjectAnimator.ofPropertyValuesHolder(target, pvhRotation).apply {
    duration = 5000
}

Java

Keyframe kf0 = Keyframe.ofFloat(0f, 0f);
Keyframe kf1 = Keyframe.ofFloat(.5f, 360f);
Keyframe kf2 = Keyframe.ofFloat(1f, 0f);
PropertyValuesHolder pvhRotation = PropertyValuesHolder.ofKeyframe("rotation", kf0, kf1, kf2);
ObjectAnimator rotationAnim = ObjectAnimator.ofPropertyValuesHolder(target, pvhRotation);
rotationAnim.setDuration(5000);

Görünümleri canlandır

Mülk animasyon sistemi, View nesnelerinin ve tekliflerinin kolaylaştırılmış animasyonunu sağlar görünüm animasyon sistemine göre bazı avantajlara sahiptir. Görünüm animasyon sistemi, nesneleri çizilme biçimini değiştirerek View nesnelerini dönüştürdü. Bu görünümün değiştirilebilecek herhangi bir özelliği olmadığından, her bir Görünümün kapsayıcısında işlenebilir. Bu durum, Görünüm canlandırmasına neden olmuş ancak Görünüm nesnesinde herhangi bir değişikliğe neden olmamıştır. Bu Bu durum, bir nesnenin orijinal konumunda hâlâ var olmasına rağmen hâlâ bulunduğu gibi bir davranışa yol açmıştır. ekranda farklı bir yere çizilmiş olabilir. Android 3.0’da, yeni özellikler ve karşılık gelen bu dezavantajı ortadan kaldırmak için alıcı ve belirleyici yöntemler eklenmiştir.

Mülk animasyon sistemi Görünüm nesnelerindeki gerçek özellikleri değiştirerek ekrandaki Görünümleri canlandırabilir. İçinde Ayrıca, Görünümler invalidate() öğesini de otomatik olarak yöntemini kullanmanızı öneririz. View sınıfında, özellik animasyonlarını kolaylaştıran yeni özellikler şunlardır:

  • translationX ve translationY: Bu özellikler, Görünüm, düzenine göre belirlenen sol ve üst koordinatlarından bir delta olarak yer alır emin olun.
  • rotation, rotationX ve rotationY: Bu özellikler dönüşü 2D (rotation özelliği) ve pivot noktası çevresinde 3D olarak kontrol edin.
  • scaleX ve scaleY: Bu özellikler bir öğenin 2D ölçeklendirmesini Pivot noktasının çevresini görüntüleyin.
  • pivotX ve pivotY: Bu özellikler, etrafında döndürme ve ölçeklendirme dönüşümlerinin gerçekleştiği pivot noktası. Varsayılan olarak, pivot noktası nesnenin ortasında bulunur.
  • x ve y: Bunlar, sol ve üst değerlerin toplamı olarak, görünümün kapsayıcısındaki son konumu TranslationX ve TranslationY değerlerini de kullanabilirsiniz.
  • alpha: Görünümde alfa şeffaflığını gösterir. Bu değer 1'dir (opak) varsayılan olarak 0 değeri tam şeffaflığı temsil eder (görünmez).

Bir Görünüm nesnesinin rengi veya döndürme değeri gibi bir özelliğine animasyon eklemek için bir özellik animatörü oluşturup istediğiniz Görünüm özelliğini animasyon içerir. Örnek:

Kotlin

ObjectAnimator.ofFloat(myView, "rotation", 0f, 360f)

Java

ObjectAnimator.ofFloat(myView, "rotation", 0f, 360f);

Animatörler oluşturma hakkında daha fazla bilgi için ValueAnimator ve ObjectAnimator.

ViewPropertyAnimator kullanarak animasyon uygulama

ViewPropertyAnimator, çeşitli animasyonlar için basit bir yol sağlar tek bir temel Animator kullanarak paralel olarak View özellikleri nesnesini tanımlayın. ObjectAnimator gibi davranır çünkü görünüm özelliklerinin gerçek değerlerine bakar ancak aynı zamanda birçok mülk için animasyon bir kez. Ayrıca, ViewPropertyAnimator kullanımı için gereken kod daha kısa ve kolay okunur. Aşağıdaki kod snippet'leri, birden fazla reklam öğesi kullanmanın farkları ObjectAnimator nesne, tek ObjectAnimator ve ViewPropertyAnimator aynı anda bir görünümün x ve y özelliğini canlandırıyor.

Multiple ObjectAnimator nesneleri

Kotlin

val animX = ObjectAnimator.ofFloat(myView, "x", 50f)
val animY = ObjectAnimator.ofFloat(myView, "y", 100f)
AnimatorSet().apply {
    playTogether(animX, animY)
    start()
}

Java

ObjectAnimator animX = ObjectAnimator.ofFloat(myView, "x", 50f);
ObjectAnimator animY = ObjectAnimator.ofFloat(myView, "y", 100f);
AnimatorSet animSetXY = new AnimatorSet();
animSetXY.playTogether(animX, animY);
animSetXY.start();

Bir ObjectAnimator

Kotlin

val pvhX = PropertyValuesHolder.ofFloat("x", 50f)
val pvhY = PropertyValuesHolder.ofFloat("y", 100f)
ObjectAnimator.ofPropertyValuesHolder(myView, pvhX, pvhY).start()

Java

PropertyValuesHolder pvhX = PropertyValuesHolder.ofFloat("x", 50f);
PropertyValuesHolder pvhY = PropertyValuesHolder.ofFloat("y", 100f);
ObjectAnimator.ofPropertyValuesHolder(myView, pvhX, pvhY).start();

ViewPropertyAnimator

Kotlin

myView.animate().x(50f).y(100f)

Java

myView.animate().x(50f).y(100f);

ViewPropertyAnimator hakkında daha ayrıntılı bilgi için ilgili Android Geliştiricilerine göz atın blogu yayın paylaşın.

XML'de animasyonları bildirme

Özellik animasyon sistemi, özellik animasyonlarını yapmak yerine XML ile bildirmenizi sağlar. bunu programatik olarak sağlar. Animasyonlarınızı XML biçiminde tanımlayarak animasyonlarınızı kolayca yeniden kullanabilirsiniz ve animasyon sırasını daha kolay düzenleyebilirsiniz.

Yeni mülk animasyon API'lerini kullanan animasyon dosyalarını, eski view animasyonlu çerçevesi, Android 3.1'den itibaren, özellik animasyonlarına ilişkin XML dosyalarını res/animator/ dizinine kaydetmeniz gerekir.

Aşağıdaki özellik animasyonu sınıflarında aşağıdaki XML etiketlerini içerir:

XML bildiriminizde kullanabileceğiniz özellikleri bulmak için Animasyon kaynaklar bölümüne göz atın. Aşağıdaki örnekte iki nesne animasyonu grubu oynatılır Buna göre, iç içe yerleştirilmiş ilk grup iki nesne animasyonunu birlikte oynatır: 

<set android:ordering="sequentially">
    <set>
        <objectAnimator
            android:propertyName="x"
            android:duration="500"
            android:valueTo="400"
            android:valueType="intType"/>
        <objectAnimator
            android:propertyName="y"
            android:duration="500"
            android:valueTo="300"
            android:valueType="intType"/>
    </set>
    <objectAnimator
        android:propertyName="alpha"
        android:duration="500"
        android:valueTo="1f"/>
</set>

Bu animasyonu çalıştırmak için kodunuzdaki XML kaynaklarını bir AnimatorSet nesnesine şişirmeniz ve ardından tüm animasyonlar için hedef nesneleri ayarlamanız gerekir. . setTarget() çağrısı yapıldığında, kolaylık sağlamak amacıyla AnimatorSet öğesinin tüm alt öğeleri için tek bir hedef nesne ayarlanır. Aşağıdaki kodda bunun nasıl yapılacağı gösterilmektedir:

Kotlin

(AnimatorInflater.loadAnimator(myContext, R.animator.property_animator) as AnimatorSet).apply {
    setTarget(myObject)
    start()
}

Java

AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(myContext,
    R.animator.property_animator);
set.setTarget(myObject);
set.start();

XML'de bir ValueAnimator öğesini de aşağıdaki örnekte gösterilmektedir:

<animator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:valueType="floatType"
    android:valueFrom="0f"
    android:valueTo="-100f" />

Kodunuzda önceki ValueAnimator öğesini kullanmak için bir AnimatorUpdateListener, güncellenmiş animasyon değerini alıp görünümlerinizden birinin bir mülkünde kullanın, aşağıdaki kodda gösterildiği gibidir:

Kotlin

(AnimatorInflater.loadAnimator(this, R.animator.animator) as ValueAnimator).apply {
    addUpdateListener { updatedAnimation ->
        textView.translationX = updatedAnimation.animatedValue as Float
    }

    start()
}

Java

ValueAnimator xmlAnimator = (ValueAnimator) AnimatorInflater.loadAnimator(this,
        R.animator.animator);
xmlAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator updatedAnimation) {
        float animatedValue = (float)updatedAnimation.getAnimatedValue();
        textView.setTranslationX(animatedValue);
    }
});

xmlAnimator.start();

Özellik animasyonlarını tanımlamaya yönelik XML söz dizimi hakkında bilgi için Animasyon kaynaklar bölümüne göz atın.

Kullanıcı arayüzü performansı üzerindeki olası etkiler

Kullanıcı arayüzünü güncelleyen animatörler, her kare için fazladan oluşturma işine neden olur. reklam öğesidir. Bu nedenle, kaynakların yoğun bir şekilde kullanıldığı animasyonlar uygulamanızın performansını olumsuz yönde etkileyebilir.

Kullanıcı arayüzünüzü canlandırmak için gereken çalışma, şu öğenin animasyon aşamasına eklendi: ardışık düzeninize entegre edilir. Animasyonlarınızın tablodaki öğelerin Profil GPU Oluşturma'yı etkinleştirerek ve animasyon aşamasını izlemek istiyorum. Daha fazla bilgi için Profil GPU oluşturma inceleyin.