Çekilebilir grafikleri canlandırma

Oluşturma yöntemini deneyin
Jetpack Compose, Android için önerilen kullanıcı arayüzü araç setidir. Oluşturma'da Animasyonların nasıl kullanılacağını öğrenin.
Şekil 1. Animasyonlu bir çizim.

Bazı durumlarda, resimlere animasyon eklenmesi gerekir. Bu, birkaç resimden oluşan özel bir yükleme animasyonu görüntülemek veya bir simgenin bir kullanıcı işlemi işleminden sonra şekillenmesini istiyorsanız yararlı olur. Android, çekilebilir öğeleri canlandırmak için iki seçenek sunar.

İlk seçenek bir AnimationDrawable kullanmaktır. Böylece, animasyon oluşturmak için teker teker görüntülenen birkaç statik çekilebilir dosya belirleyebilirsiniz. İkinci seçenek, vektör çekilebilir özelliklerinin özelliklerini canlandırabilmenizi sağlayan bir AnimatedVectorDrawable kullanmaktır.

AnimationDrawable'ı kullanma

Animasyon oluşturmanın bir yolu, film rulosu gibi bir dizi çekilebilir kaynak yüklemektir. AnimationDrawable sınıfı, bu tür çekilebilir animasyonların temelini oluşturur.

Kodunuzdaki bir animasyonun karelerini AnimationDrawable sınıf API'sını kullanarak tanımlayabilirsiniz ancak animasyonu oluşturan kareleri listeleyen tek bir XML dosyasıyla bunları tanımlamak daha kolaydır. Bu tür animasyonun XML dosyası, Android projenizin res/drawable/ dizinine aittir. Bu durumda, talimatlar animasyondaki her bir karenin sırasını ve süresini verir.

XML dosyası, kök düğüm olarak bir <animation-list> öğesi ve her biri bir çerçeve (çekilebilir bir kaynak ve süresi) tanımlayan bir dizi alt <item> düğümünden oluşur. Drawable animasyonu için örnek bir XML dosyası:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">
    <item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>

Bu animasyon üç kare için çalışır. Listenin android:oneshot özelliğinin true olarak ayarlanması, listenin bir kez döngülenmesini ve ardından son karede durup tutulmasını sağlar. android:oneshot öğesini false değerine ayarlarsanız animasyon döngüye girer.

Bu XML'i, projenin res/drawable/ dizinine rocket_thrust.xml olarak kaydederseniz View içine arka plan resmi olarak ekleyebilir ve daha sonra, oynatılması için start() yöntemini çağırabilirsiniz. Animasyonun bir ImageView öğesine eklendiği ve ardından, ekrana dokunulduğunda animasyonun eklendiği bir aktivite örneğini burada görebilirsiniz:

Kotlin

private lateinit var rocketAnimation: AnimationDrawable

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main)

    val rocketImage = findViewById<ImageView>(R.id.rocket_image).apply {
        setBackgroundResource(R.drawable.rocket_thrust)
        rocketAnimation = background as AnimationDrawable
    }

    rocketImage.setOnClickListener({ rocketAnimation.start() })
}

Java

AnimationDrawable rocketAnimation;

public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

  ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
  rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
  rocketAnimation = (AnimationDrawable) rocketImage.getBackground();

  rocketImage.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        rocketAnimation.start();
      }
  });
}

AnimationDrawable henüz pencereye tam olarak bağlı olmadığından, AnimationDrawable üzerinde çağrılan start() yönteminin Activity cihazınızın onCreate() yöntemi sırasında çağrılamayacağını unutmayın. Animasyonu, herhangi bir etkileşim gerektirmeden hemen oynatmak için Activity içindeki onStart() yöntemini kullanarak çağırabilirsiniz. Bu yöntem, Android görünümü ekranda görünür hale getirdiğinde çağrılır.

XML söz dizimi, kullanılabilir etiketler ve özellikler hakkında daha fazla bilgi için Animasyon kaynakları sayfasına bakın.

animasyonluVectorDrawable'ı kullanma

Drawable, pikselleşmeden veya bulanıklaşmadan ölçeklendirilebilen bir çekilebilir türüdür. AnimatedVectorDrawable sınıfı ve geriye dönük uyumluluk için AnimatedVectorDrawableCompat ise çizilebilir bir vektörün özelliklerini canlandırmanıza (ör. döndürme veya yol verilerini farklı bir görüntüye dönüştürmek gibi) olanak tanır.

Normalde animasyonlu vektörel çizimleri üç XML dosyasında tanımlarsınız:

  • res/drawable/ içinde <vector> öğesiyle çizilebilen bir vektör.
  • res/drawable/ içinde <animated-vector> öğesiyle çizilebilen animasyonlu bir vektör.
  • res/animator/ içinde <objectAnimator> öğesine sahip bir veya daha fazla nesne animatörü.

Animasyonlu vektörel çizimlerde <group> ve <path> öğelerinin özellikleri animasyonlandırılabilir. <group> öğesi bir yol veya alt grup grubunu, <path> öğesi ise çizilecek yolları tanımlar.

Canlandırmak istediğiniz bir çekilebilir vektör tanımladığınızda, gruplara ve yollara benzersiz bir ad atamak için android:name özelliğini kullanın. Böylece, animatör tanımlarınızda bunlara başvurabilirsiniz. Örnek:

res/drawable/vectordrawable.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0" >
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
</vector>

Animasyonlu vektör çekilebilir tanımı, çekilebilir vektördeki grupları ve yolları adlarıyla ifade eder:

res/drawable/animatorVektördrawable.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:drawable="@drawable/vectordrawable" >
    <target
        android:name="rotationGroup"
        android:animation="@animator/rotation" />
    <target
        android:name="v"
        android:animation="@animator/path_morph" />
</animated-vector>

Animasyon tanımları ObjectAnimator veya AnimatorSet nesnelerini temsil eder. Bu örnekteki ilk animatör, hedef grubu 360 derece döndürür:

res/animator/rotation.xml

<objectAnimator
    android:duration="6000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360" />

Bu örnekteki ikinci animatör, çizilebilir vektörün yolunu bir şekilden diğerine değiştirir. Yollar, dönüştürme işlemi için uyumlu olmalıdır: Her bir komut için aynı sayıda komuta ve aynı sayıda parametreye sahip olmalıdır.

res/animator/path_morph.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="3000"
        android:propertyName="pathData"
        android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
        android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
        android:valueType="pathType" />
</set>

Elde edilen AnimatedVectorDrawable şöyle olacaktır:

Şekil 2. AnimatedVectorDrawable.

Animasyonlu Vektör Çekilebilir (AVD) önizlemesi

Android Studio'daki Animasyonlu Vektör Çizim aracı, animasyonlu çekilebilir kaynakları önizlemenizi sağlar. Bu araç, <animation-list>, <animated-vector> ve <animated-selector> kaynaklarını Android Studio'da önizlemenize yardımcı olur ve özel animasyonlarınızı hassaslaştırmanızı kolaylaştırır.

Android Studio&#39;da bir animasyonu önizleyen ve oynatan kullanıcı
Şekil 3. Android Studio'daki Animasyonlu Vektör Çizim aracı.

Daha fazla bilgi için AnimatedVectorDrawable API referansına bakın.