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

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.

Konumu animasyona dönüştürme →

Ekranda bulunan nesnelerin, kullanıcı etkileşimi veya arka planda yapılan işlemler nedeniyle genellikle yeniden konumlandırılması gerekir. Nesnenin konumunu hemen güncellemek yerine (bu da nesnenin bir alandan diğerine yanıp sönmesine neden olur) nesneyi başlangıç konumundan bitiş konumuna taşımak için animasyon kullanın.

Android'in, görünüm nesnelerinizi ekranda yeniden konumlandırmanıza olanak tanıdığı yöntemlerden biri ObjectAnimator kullanmaktır. Nesnenin yerleşmesini istediğiniz bitiş konumunu ve animasyonun süresini siz belirlersiniz. Animasyonun hızlanmasını veya yavaşlamasını kontrol etmek için zaman interpolasyonlarını da kullanabilirsiniz.

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

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

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

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

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

Bu örnekte, çeviri değerlerinin kayan nokta olması gerektiğinden ObjectAnimator.ofFloat() yöntemi kullanılmaktadır. İlk parametre, animasyon eklemek istediğiniz görünüm. İkinci parametre, animasyon uyguladığınız özelliktir. Görünümün yatay olarak hareket etmesi gerektiğinden translationX özelliği kullanılır. Son parametre, animasyonun bitiş değeridir. Bu örnekte 100 değeri, ekranın solundan çok sayıda piksel uzaklıkta bir konumu ifade eder.

Bir sonraki yöntem, animasyonun ne kadar sürdüğünü milisaniye cinsinden belirtir. Bu örnekte animasyon 2 saniye (2.000 milisaniye) boyunca çalışır.

Son yöntem, animasyonun çalışması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 Animate using ObjectAnimator (ObjectAnimator kullanarak animasyon oluşturma) başlıklı makaleyi inceleyin.

Kavisli hareket ekleme

ObjectAnimator kullanmak kolay olsa da varsayılan olarak görünümü başlangıç ve bitiş noktaları arasındaki düz bir çizgi boyunca yeniden konumlandırır. Materyal tasarım, ekrandaki nesnelerin uzamsal hareketi ve animasyonun zamanlaması için eğrilerden yararlanır. Kavisli hareket kullanmak, uygulamanıza daha materyal bir görünüm kazandırırken animasyonlarınızı daha ilgi çekici hale getirir.

Kendi yolunuzu belirleyin

ObjectAnimator sınıfında, koordinatları bir yolla birlikte aynı anda iki veya daha fazla özellik kullanarak canlandırmanıza olanak tanıyan oluşturucular bulunur. Örneğin, aşağıdaki animatör, bir görünümün X ve Y özelliklerine animasyon eklemek için Path nesnesini kullanır:

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
}

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ın animasyonu şu şekilde görünür:

Şekil 1. Eğri bir yol animasyonu.

Interpolator, bir yumuşatma eğrisinin uygulanmasıdır. Yavaşlatma eğrileri kavramı hakkında daha fazla bilgi için Materyal Tasarım belgelerine bakın. Interpolator, animasyondaki belirli değerlerin zamanın bir 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 kullanma

PathInterpolator sınıfı, Android 5.0'da (API 21) kullanıma sunulan bir interpolatördür. Bézier eğrisine veya Path nesnesine dayanır. Kolaylaştırma ile ilgili Material Design belgelerindeki Android örneklerinde PathInterpolator kullanılır.

PathInterpolator, farklı türlerdeki Bézier eğrilerine dayalı oluşturuculara sahiptir. Tüm Bézier eğrilerinin başlangıç ve bitiş noktaları sırasıyla (0,0) ve (1,1) olarak sabitlenir. Diğer oluşturucu 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 yalnızca bir kontrol noktasının X ve Y koordinatları gerekir:

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

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şlayıp sona yaklaştıkça yavaşlayan bir yumuşatma eğrisi oluşturur.

Kübik Bézier oluşturucunun da başlangıç ve bitiş noktaları sabittir ancak iki kontrol noktası gerekir:

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

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 vurgulanmış yavaşlatma yumuşatma eğrisinin bir uygulamasıdır.

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

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

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 işlev, kübik Bézier örneğiyle aynı yumuşatma eğrisini oluşturur ancak bunun yerine Path kullanır.

Ayrıca, bir yol interpolatörü 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"/>

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

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

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