Bir Görünümü animasyonla taşıma

Ekrandaki nesnelerin, genellikle kullanıcı etkileşimi veya sahne arkası işleme nedeniyle yeniden konumlandırılması gerekir. Nesnenin konumunu hemen güncelleyerek bir alandan diğerine geçiş yapmak yerine, başlangıç konumundan bitiş konumuna taşımak için bir animasyon kullanın.

Android'in ekrandaki görünüm nesnelerinizi yeniden konumlandırmanızı sağlayacak yöntemlerden biri ObjectAnimator kullanmaktır. Nesnenin yerleşmesini istediğiniz bitiş konumunu ve animasyonun süresini sağlarsınız. Animasyonun hızlanmasını veya yavaşlamasını kontrol etmek için zaman interpolatörleri de kullanabilirsiniz.

Görünüm konumunu ObjectAnimator ile değiştirme

ObjectAnimator API, bir görünümün özelliklerini belirli bir süreyle değiştirmenin bir yolunu sunar. Ne tür bir özelliği canlandırdığınıza bağlı olarak ObjectAnimator örnekleri oluşturmak için statik yöntemler içerir. Ekrandaki görünümlerinizi yeniden konumlandırırken translationX ve translationY özelliklerini kullanın.

Aşağıda, görünümü 2 saniyede ekranın solundan 100 piksel konumlandıran bir ObjectAnimator örneği verilmiştir:

Kotlin

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

Java

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setDuration(2000);
animation.start();

Çeviri değerlerinin kayan noktalı olması gerektiğinden bu örnekte ObjectAnimator.ofFloat() yöntemi kullanılmaktadır. İlk parametre, canlandırmak istediğiniz görünümdür. İkinci parametre, canlandırdığınız özelliktir. Görünümün yatay olarak taşınması gerektiğinden translationX özelliği kullanılır. Son parametre, animasyonun bitiş değeridir. Bu örnekte 100 değeri, ekranın solundan kaç piksel uzaklıktaki bir konumu belirtir.

Sonraki yöntem, animasyonun ne kadar süreceğini milisaniye cinsinden belirtir. Bu örnekte, animasyon 2 saniye (2.000 milisaniye) çalıştırılmıştır.

Son yöntem animasyonun çalıştırılmasına neden olur ve bu da görünümün ekrandaki konumunu günceller.

ObjectAnimator kullanımı hakkında daha fazla bilgi için ObjectAnimator kullanarak animasyon bölümüne bakın.

Eğri hareket ekleyin

ObjectAnimator kullanışlı olsa da, varsayılan olarak görünümü başlangıç ve bitiş noktaları arasında düz bir çizgi boyunca yeniden konumlandırır. Malzeme tasarımı, ekrandaki nesnelerin uzamsal hareketleri ve animasyonun zamanlaması için eğrilere dayanır. Eğri hareket kullanmak, animasyonlarınızı daha ilgi çekici hale getirirken uygulamanıza daha fazla materyal hissi verir.

Kendi yolunuzu belirleyin

ObjectAnimator sınıfı, bir yol ile birlikte aynı anda iki veya daha fazla özellik kullanarak koordinatları canlandırmanızı sağlayan kurucular içerir. Örneğin, aşağıdaki animatör, bir görünümün X ve Y özelliklerini canlandırmak için bir Path nesnesi kullanır:

Kotlin

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    val path = Path().apply {
        arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true)
    }
    val animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path).apply {
        duration = 2000
        start()
    }
} else {
    // Create animator without using curved path
}

Java

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  Path path = new Path();
  path.arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true);
  ObjectAnimator animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
  animator.setDuration(2000);
  animator.start();
} else {
  // Create animator without using curved path
}

Yay animasyonu aşağıdaki gibi görünür:

Şekil 1. Eğri yol animasyonu.

Interpolator, bir yumuşak geçiş eğrisinin uygulanmasıdır. Eğrileri yumuşatma kavramı hakkında daha fazla bilgi için Materyal Tasarım belgelerine bakın. Interpolator, bir animasyondaki belirli değerlerin zaman fonksiyonu olarak nasıl hesaplandığını tanımlar. Sistem, Materyal Tasarım spesifikasyonundaki üç temel eğri için XML kaynakları sağlar:

  • @interpolator/fast_out_linear_in.xml
  • @interpolator/fast_out_slow_in.xml
  • @interpolator/linear_out_slow_in.xml

PathInterpolator'ı kullan

PathInterpolator sınıfı, Android 5.0 (API 21) sürümünde kullanıma sunulan bir interpolatördür. Bézier eğrisine veya Path nesnesine dayanır. Yumuşak geçiş için Materyal Tasarım dokümanlarındaki Android örneklerinde PathInterpolator kullanılmıştır.

PathInterpolator, farklı Bézier eğrilerine dayanan kurucular içerir. Tüm Bézier eğrilerinin başlangıç ve bitiş noktaları sırasıyla (0,0) ve (1,1) olarak sabitlenir. Diğer kurucu bağımsız değişkenleri, oluşturulan Bézier eğrisinin türüne bağlıdır.

Örneğin, ikinci dereceden bir Bézier eğrisi için bir kontrol noktasının yalnızca X ve Y koordinatları gerekir:

Kotlin

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    PathInterpolator(0.67f, 0.33f)
} else {
    LinearInterpolator()
}

Java

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  myInterpolator = new PathInterpolator(0.67f, 0.33f);
} else {
  myInterpolator = new LinearInterpolator();
}

Bu, hızlı başlayan ve sona yaklaştıkça yavaşlayan bir yumuşatma eğrisi oluşturur.

Kübik Bézier kurucusu da benzer şekilde sabit başlangıç ve bitiş noktalarına sahiptir, ancak iki kontrol noktası gerektirir:

Kotlin

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f)
} else {
    LinearInterpolator()
}

Java

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  myInterpolator = new PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f);
} else {
  myInterpolator = new LinearInterpolator();
}

Bu, Materyal Tasarım'ın yumuşatma eğrisinin vurgulanmış bir uygulamasıdır.

Daha fazla kontrol için eğriyi tanımlamak üzere rastgele bir Path kullanılabilir:

Kotlin

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  val path = Path().apply {
    moveTo(0.0f, 0.0f)
    cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f)
  }
  PathInterpolator(path)
} else {
  LinearInterpolator()
}

Java

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  Path path = new Path();
  path.moveTo(0.0f, 0.0f);
  path.cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f);
  myInterpolator = new PathInterpolator(path);
} else {
  myInterpolator = new LinearInterpolator();
}

Bu, kübik Bézier örneğinle aynı yumuşak geçiş eğrisini oluşturur, ancak bunun yerine bir Path kullanır.

Bir yol interpolatörünü XML kaynağı olarak da tanımlayabilirsiniz:

<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:controlX1="0.5"
    android:controlY1="0.7"
    android:controlX2="0.1f"
    android:controlY2="1.0f"/>

PathInterpolator nesnesi oluşturduktan sonra bu nesneyi Animator.setInterpolator() yöntemine aktarabilirsiniz. Animator, başlatıldığında zamanlamayı veya yol eğrisini belirlemek için interpolatörü kullanır.

Kotlin

val animation = ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    interpolator = myInterpolator
    start()
}

Java

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setInterpolator(myInterpolator);
animation.start();