Android Animasyonlarını uygulamak için yeni başlayanlar kılavuzu - Bölüm 1 (2 bölüm serisi)

Kabul et, her zaman görsel olarak çekici uygulamalar oluşturmak istedin. Ancak işlevsellik ilk yaklaşımı nedeniyle, animasyonlar her zaman ertelendi. Artık değil.

Animasyonlar hakkında biraz temel bilgiler:

3 tür Animasyon vardır:

  1. Özellik Animasyonları - Nesnelerin özelliklerini değiştirmek için kullanılır (Görünümler veya görünüm olmayan nesneler). Değiştirilecek nesnelerin belirli özelliklerini (translateX, TextScaleX gibi) belirtiriz. Değiştirilebilecek animasyonun çeşitli özellikleri animasyon süresidir, tersine çevrilip çevrilmeyeceği ve animasyonu kaç kez tekrarlamak istediğimiz vs. Android 3.0'da (API seviye 11) tanıtıldı.
  2. Animasyonları Görüntüle - Boyut değiştirme, konum, döndürme, saydamlığı denetleme gibi basit animasyonlar yapmak için kullanılır. İnşa etmek kolaydır ve çok hızlıdır ancak kendi sınırlamaları vardır. Mesela - Onların devleti değişiyor ama mülkleri değişmiyor. Animasyonları görüntüleme bölüm 2'de ele alınacaktır.
  3. Çizilebilir Animasyonlar - Bu, çizilebilir öğeleri kullanarak animasyon yapmak için kullanılır. Bir film rulosunda olduğu gibi tek tek çalıştırılan çeşitli çekilebilirler listesini belirten bir XML dosyası hazırlanır. Bu fazla kullanılmadı, ben de koruyamam.
Android 5.0, çeşitli animasyonlar tanıttı - Efekti, Etkinlik / Fragment geçişlerini, Paylaşılan Öğeler geçişlerini vb. Ortaya çıkarın.
Not - Bölüm 1 sadece Emlak Animasyonlarını tartışacaktır.

Ne tür bir Animasyon kullanılmalı

  1. Dokunma veya tıklama gibi diğer ayrıntılarla uğraşmak zorunda kalmadan görünümlerde basit animasyonlar yapmak istiyorsanız, Animasyonları Görüntüle'yi kullanın. Animasyonları Görüntüle ile ilgili sorun, Görünüm durumu değişse de mülkün hala orijinal konumunda kalmasıdır. Bu, eğer bir ImageButton 0 - 100 piksel sağa kaydırılırsa, sağa doğru hareket etse de, görüntü düğmesine dokunma (özelliği) yine de 0 pozisyonunda olacaktır.
  2. Animasyonları Görüntüle Splash ekranlarında kullanılabilir. Animasyonları Görüntüle'yi kullanırken, programlı yapmak yerine XML kullanın. XML dosyalarını kullanarak, daha okunaklıdır ve diğer görünümlerle paylaşılabilir.
  3. Eğer dokunuşla baş etmek istiyorsanız, animasyondan sonra tıklayın, durumu ve davranışları değiştirirken Özellik Animasyonu'na gidin.

Özellik Animasyonu Kavramları

Mülkiyet Animasyonu İçinde. Google'ın İzniyle.

Gerçek animasyon Değer Canlandırıcı tarafından yapılır. Bu sınıf, animasyon süresini ve animasyon yaptığı özelliğin geçerli değerini izler. TimeInterpolater, animasyonun zamanını (hızını) belirli bir sürede sabit hızda olduğu gibi hızlandırır veya hızlandırır, ardından verilen sürede yavaşlar. TypeEvaluator, örneğin int, float, rgb, vb. İçin kullanılan TypeEvalutor türüne göre kesirleri hesaplamak için kullanılır. Hiçbiri ihtiyaçlarımıza uymuyorsa özel bir TypeEvaluator kullanabiliriz.

ValueAnimator Kullanarak Animasyonlar

ValueAnimator sınıfı, canlandırılacak bir int, kayan nokta veya renk değeri kümesi belirterek, bir animasyon süresi boyunca bazı türdeki değerleri canlandırmanıza olanak tanır. Bir ValueAnimator'ı fabrika yöntemlerinden birini çağırarak elde edersiniz: ofInt (), ofFloat () veya ofObject (). Örneğin:

final TextView animateTextView = (TextView) findViewById (R.id.tv_animate);

ValueAnimator valueAnimator = ValueAnimator.ofFloat (0f, 500f);
valueAnimator.setInterpolator (new AccelerateDecelerateInterpolator ()); // önce hızı arttırın, ardından azaltın
valueAnimator.setDuration (2000);
valueAnimator.addUpdateListener (yeni ValueAnimator.AnimatorUpdateListener () {
    @Override
    public geçersiz onAnimationUpdate (ValueAnimator animasyonu) {
        şamandıra ilerleme = (şamandıra) animation.getAnimatedValue ();
        animateTextView.setTranslationY (ilerleme);
        // metin görünümünde zaten mevcut olduğu için invalidate () kullanmanıza gerek yok.
    }
});
valueAnimator.start ();
Giphy'nin İzniyle

Aynı şey aşağıdaki gibi XML kodu kullanılarak da elde edilebilir:

                   /res/animator/value_animator_ex.xml

                     ---- Etkinlik Kodu ----
ValueAnimator valueAnimator = (ValueAnimator) AnimatorInflater.loadAnimator (
        bu, R.animator.value_animator_ex);

valueAnimator.addUpdateListener (yeni ValueAnimator.AnimatorUpdateListener () {
    @Override
    public geçersiz onAnimationUpdate (ValueAnimator animasyonu) {
        şamandıra ilerleme = (şamandıra) animation.getAnimatedValue ();
        animateTextView.setTranslationY (ilerleme);
    }
});

valueAnimator.start ();

ObjectAnimator Kullanarak Animasyonlar

ObjectAnimator, ValueAnimator öğesinin bir alt sınıfıdır ve ValueAnimator'ın zamanlama motorunu ve değer hesaplamasını bir hedef nesnenin adlandırılmış bir özelliğine canlandırma yeteneği ile birleştirir. Bu, artık ValueAnimator.AnimatorUpdateListener'i uygulamanıza gerek kalmayacağından animasyonlu özellik otomatik olarak güncellendiğinden, herhangi bir nesneyi canlandırmayı kolaylaştırır. Çoğu durumda, bunu kullanmalıyız.

Yukarıdaki aynı animasyon için, ObjectAnimator kodunu aşağıdaki gibi yazabiliriz:

TextView animateTextView = (TextView) findViewById (R.id.tv_animate);

ObjectAnimator textViewAnimator = ObjectAnimator.ofFloat (animateTextView, "translationY", 0f, 500f);
textViewAnimator.setDuration (2000);
textViewAnimator.setInterpolator (new AccelerateDecelerateInterpolator ());
textViewAnimator.start ();

Gördüğümüz gibi, ObjectAnimator tarafından yapıldığı için metin görünümünün konumunu güncellemek için dinleyiciyi kullanmak zorunda değildik. Burada görülecek en önemli şey, üzerinde animasyon yapmak istediğimiz özellik olan “translationY”. Bu androidde tanımlı bir özellik olmalı veya eğer kendi mülkümüz ise erişim metotlarını, yani getter ve setter metodunu belirtmeliyiz.

Aynı şey, XML kullanılarak da uygulanabilir:

                /res/animator/object_animator_ex.xml

                        ---- Etkinlik Kodu ----

TextView animateTextView = (TextView) findViewById (R.id.tv_animate);

ObjectAnimator textViewAnimator = (ObjectAnimator) AnimatorInflater.loadAnimator (AnimationActivity.this, R.animator.object_animator_ex);
textViewAnimator.setTarget (animateTextView);
textViewAnimator.start ();

Bir kerede Birden Fazla Animasyon Yapma

Birden çok ObjectAnimator'a aynı anda ve aynı süre içinde birden fazla animasyon yapmak için başlayabiliriz, ancak hiçbir görünüm diğer görünüm hakkında bir şey bilmediğinden verimli değildir. Bunu yapmak için AnimatorSet sınıfını kullanabiliriz.

Mevcut projemde şu animasyonu yaptım:

(Yakında güncellenecektir. Rahatsızlık için özür dilerim.)

Gördüğümüz gibi, aynı anda çalışan birden fazla animasyon var. Devam eden 4 eşzamanlı animasyon var. Arama ikonuna tıklandığında, ilk önce arama ikonu sola hareket eder, logo kaybolur, iptal butonu soluklaşır ve metni düzenler de kaybolur.

Bunu yapmak için kod:

   --------- arama simgesine tıklayın animasyon gerçekleştirmek ----------
// en soldaki pozisyona git
DisplayMetrics displayMetrics = getResources (). GetDisplayMetrics ();
int modifierX = - (displayMetrics.widthPixels - v.getWidth ());
özel statik final int SEARCH_ANIMATION_DURATION = 1000; // 1 saniye
ObjectAnimator searchIconLeftAnimation = ObjectAnimator.ofFloat (v, "translationX", modifierX);
searchIconLeftAnimation.setDuration (SEARCH_ANIMATION_DURATION);

ObjectAnimator logoFadeOutAnimator = ObjectAnimator.ofFloat (mAppLogo, "alpha", 1f, 0f);
logoFadeOutAnimator.setDuration (SEARCH_ANIMATION_DURATION);

ObjectAnimator cancelImageFadeInAnimator = ObjectAnimator.ofFloat (mIvCancelSearch, "alpha", 0f, 1f);
cancelImageFadeInAnimator.setDuration (SEARCH_ANIMATION_DURATION);

ObjectAnimator searchEditTextAnimator = ObjectAnimator.ofFloat (mEtSearch, "alpha", 0f, 1f);
searchEditTextAnimator.setDuration (SEARCH_ANIMATION_DURATION);

AnimatorSet animatorSet = new AnimatorSet ();
animatorSet.play (searchIconLeftAnimation) .o (logoFadeOutAnimator);
animatorSet.play (searchIconLeftAnimation) .o (cancelImageFadeInAnimator);
animatorSet.play (searchIconLeftAnimation) .o (searchEditTextAnimator);

animatorSet.start ();
   --------- İptal tıkladığında tüm animasyonları tersine ekle ----------
ObjectAnimator searchIconRightAnimation = ObjectAnimator.ofFloat (mIvSearch, "translationX", 0);
searchIconRightAnimation.setDuration (SEARCH_ANIMATION_DURATION);

ObjectAnimator logoFadeInAnimator = ObjectAnimator.ofFloat (mAppLogo, "alpha", 0f, 1f);
logoFadeInAnimator.setDuration (SEARCH_ANIMATION_DURATION);

ObjectAnimator cancelImageFadeOutAnimator = ObjectAnimator.ofFloat (mIvCancelSearch, "alpha", 1f, 0f);
cancelImageFadeOutAnimator.setDuration (SEARCH_ANIMATION_DURATION);

ObjectAnimator searchEditTextFadeInAnimator = ObjectAnimator.ofFloat (mEtSearch, "alpha", 1f, 0f);
searchEditTextFadeInAnimator.setDuration (SEARCH_ANIMATION_DURATION);

AnimatorSet animatorSet = new AnimatorSet ();
animatorSet.play (searchIconRightAnimation) .o (logoFadeInAnimator);
animatorSet.play (searchIconRightAnimation) .o (cancelImageFadeOutAnimator);
animatorSet.play (searchIconRightAnimation) .o (searchEditTextFadeInAnimator);

animatorSet.start ();

Burada farklı görünümlerde birden fazla Nesne Animatörü yarattık ve bunları AnimatorSet kullanarak birlikte oynadık. Play () ve with () gibi yöntemler bunu başarmaya yardımcı olur.

Animasyon durumunu belirlemek için dinleyicileri de kullanabiliriz. Örneğin:

animatorSet.addListener (yeni Animator.AnimatorListener () {
    @Override
    kamu boşluğu onAnimationStart (animatör animasyonu) {
        // animasyon başlamadan önce her şeyi yapın
    }

    @Override
    public void onAnimationEnd (Animatör animasyonu) {
       // animasyon sona erdikten sonra başka şeyler yapın
    }

    @Override
    public void onAnimationCancel (Animatör animasyonu) {
      // animasyon iptal edildiğinde bir şey yap (kullanıcı / geliştirici tarafından)
    }

    @Override
    public void onAnimationRepeat (Animatör animasyonu) {
       // animasyon tekrarlanırken bir şeyler yapın
    }
});

Tek görünümde birden fazla animasyon gerçekleştirirken

Şimdiye kadar, farklı görünüm nesnelerinde animasyonlar gördük. Yukarıdaki yaklaşımları (animatör setini kullanarak) kullanarak tek bir görünümde birden fazla animasyon gerçekleştirebiliriz, ancak AnimatorSet'i kurma ve iki Animatörü paralel olarak çalıştırma işlem yükü olduğu için bir performans ek yüküdür. ViewPropertyAnimator kullanmak daha iyi bir yaklaşımdır. Bunu kullanarak, kodu okumak daha kolaydır. Örneğin:

. AnimateTextView.animate () rotasyon (360f) Y (500F) .setDuration (2000);
     ----------------------------VS--------------------- --------
ObjectAnimator dönmeAnimator = ObjectAnimator.ofFloat (animateTextView, "dönme", 360f);
rotationAnimator.setDuration (2000);
ObjectAnimator translateAnimator = ObjectAnimator.ofFloat (animateTextView, "translationY", 500f);
translateAnimator.setDuration (2000);
AnimatorSet kümesi = yeni AnimatorSet ();
set.playTogether (rotationAnimator, translateAnimator);
set.start ();

Animasyon uygulamamı yavaşlatıyor mu yoksa 16ms çizim penceresinin süresini geçecek mi? Performansta herhangi bir ek yük var mı?

Kullanıcı Arayüzünü güncelleyen animatörler, animasyonun çalıştığı her kare için ekstra işleme çalışması sağlar. Bu nedenle, yoğun kaynak kullanan animasyonları kullanmak uygulamanızın performansını olumsuz yönde etkileyebilir.

Kullanıcı arayüzünüzü canlandırmak için gereken çalışmalar, işleme hattının animasyon aşamasına eklenir. Profil GPU'su Animasyon aşamasını oluşturma ve izleme özelliğini etkinleştirerek animasyonlarınızın uygulamanızın performansını etkileyip etkilemediğini öğrenebilirsiniz.

Kullanım durumunu düşünün ve ardından uygun yolu uygulayın.

Makaleyi okuduğunuz için teşekkürler. Öneriler / Düzeltmeler / Yorumlar daima memnuniyetle karşılanmaktadır. İsterseniz, lütfen beğen düğmesine basın ve makaleyi Android topluluğuyla paylaşın. Bilgiyi olabildiğince paylaşalım.

Not - ViewAnimations'daki 2. Bölüm de çok yakında geliyor.

Ayrıca, About.me, Twitter, LinkedIn, Github ve Facebook'ta arkadaş olalım.