Çekilebilir grafikleri canlandırma

Compose yöntemini deneyin

Jetpack Compose, Android için önerilen kullanıcı arayüzü araç setidir. Compose'da animasyonları nasıl kullanacağınızı öğrenin.

Vektör çizilebilir öğelerine animasyon ekleme →

Şekil 1. Animasyonlu bir drawable.

Bazı durumlarda resimlerin animasyonlu olması gerekir. Bu özellik, birkaç resimden oluşan özel bir yükleme animasyonu göstermek veya bir kullanıcının işleminden sonra bir simgenin şekil değiştirmesini istiyorsanız kullanışlıdır. Android, çizilebilir öğeleri animasyonlu hale getirmek için iki seçenek sunar.

İlk seçenek, AnimationDrawable kullanmaktır. Bu, animasyon oluşturmak için tek tek gösterilen birkaç statik drawable dosyası belirtmenize olanak tanır. İkinci seçenek ise AnimatedVectorDrawable kullanmaktır. Bu seçenek, vektör çizilebilir öğesinin özelliklerine animasyon eklemenizi sağlar.

AnimationDrawable'ı kullanma

Animasyon oluşturmanın bir yolu, çizilebilir kaynakların bir dizisini (ör. film rulosu) yüklemektir. AnimationDrawable sınıfı, bu tür çizilebilir animasyonların temelini oluşturur.

AnimationDrawable sınıf API'sini kullanarak kodunuzda bir animasyonun karelerini tanımlayabilirsiniz ancak bunları, animasyonu oluşturan kareleri listeleyen tek bir XML dosyasıyla tanımlamak daha kolaydır. Bu tür animasyonların XML dosyası, Android projenizin res/drawable/ dizininde yer alır. Bu durumda, talimatlarda animasyondaki her bir karenin sırası ve süresi belirtilir.

XML dosyası, kök düğüm olarak bir <animation-list> öğesinden ve her biri bir kareyi (çizilebilir kaynak ve süresi) tanımlayan bir dizi alt <item> düğümden oluşur. Aşağıda, bir Drawable animasyonuna ait örnek bir XML dosyası verilmiştir:

<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 boyunca çalışır. Listenin android:oneshot özelliğini true olarak ayarladığınızda liste bir kez döngüye girer, ardından durur ve son karede bekler. android:oneshot değerini false olarak ayarlarsanız animasyon döngüye girer.

Bu XML'yi projenin res/drawable/ dizininde rocket_thrust.xml olarak kaydederseniz View öğesine arka plan resmi olarak ekleyebilir ve ardından start() işlevini çağırarak oynatabilirsiniz. Aşağıda, animasyonun bir ImageView öğesine eklendiği ve ekrana dokunulduğunda animasyonun başlatıldığı bir etkinlik örneği verilmiştir:

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();
      }
  });
}

start() yönteminin AnimationDrawable sırasında çağrılan start() yönteminin, onCreate() yönteminiz sırasında çağrılamayacağını unutmayın. Bunun nedeni, AnimationDrawable öğesinin henüz pencereye tam olarak eklenmemiş olmasıdır.Activity Etkileşim gerektirmeden animasyonu hemen oynatmak için onStart() Activity yönteminden ç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 ve kullanılabilir etiketler ile özellikler hakkında daha fazla bilgi için Animasyon kaynakları başlıklı makaleyi inceleyin.

AnimatedVectorDrawable kullanma

Drawable vektör, pikselli veya bulanık olmadan ölçeklenebilen bir drawable türüdür. Geriye dönük uyumluluk için AnimatedVectorDrawable class ve AnimatedVectorDrawableCompat, drawable vektör öğelerin özelliklerini (ör. döndürme veya yol verilerini değiştirerek farklı bir resme dönüştürme) animasyon haline getirmenize olanak tanır.

Normalde animasyonlu vektör çizilebilir öğelerini üç XML dosyasında tanımlarsınız:

• res/drawable/ içinde <vector> öğesi bulunan drawable vektör.
• res/drawable/ içinde <animated-vector> öğesi bulunan animasyonlu drawable vektör.
• <objectAnimator> öğesinin res/animator/ içinde olduğu bir veya daha fazla nesne animatörü.

Animasyonlu vektör çizilebilirler, <group> ve <path> öğelerinin özelliklerini canlandırabilir. <group> öğesi bir dizi yolu veya alt grubu tanımlar, <path> öğesi ise çizilecek yolları tanımlar.

Animasyon eklemek istediğiniz bir vektör çizilebilir öğesi 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ızdan bunlara başvurabilirsiniz. Örneğin:

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 çizilebilir tanımı, vektör çizilebilir öğesindeki grupları ve yolları adlarına göre ifade eder:

res/drawable/animatorvectordrawable.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

<set xmlns:android="http://schemas.android.com/apk/res/android">
  <objectAnimator
      android:duration="6000"
      android:propertyName="rotation"
      android:valueFrom="0"
      android:valueTo="360" />
</set>

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

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:

Şekil 2. AnimatedVectorDrawable.

Animasyonlu vektör çizilebilir öğe (AVD) önizlemesi

Android Studio'daki Animated Vector Drawable aracı, animasyonlu çizilebilir kaynakları önizlemenize olanak tanır. Bu araç, Android Studio'da <animation-list>, <animated-vector> ve <animated-selector> kaynaklarını önizlemenize yardımcı olur ve özel animasyonlarınızı iyileştirmeyi kolaylaştırır.

Şekil 3. Android Studio'daki Animated Vector Drawable aracı.

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