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

"Oluştur" yöntemini deneyin

Android için önerilen kullanıcı arayüzü araç seti Jetpack Compose'dur. Oluşturma'da animasyonları nasıl kullanacağınızı öğrenin.

Konumu canlandır →

Ekrandaki nesnelerin, kullanıcı etkileşimi veya arka planda işleme nedeniyle genellikle yeniden konumlandırılması gerekir. Nesnenin konumunu hemen güncellemek yerine (bunların yanıp sönmesine neden olan bir alan) başlangıç konumundan bitiş konumuna taşımak için bir animasyon kullanın.

Android'le ekrandaki görünüm nesnelerinizi yeniden konumlandırmak için ObjectAnimator kullanabilirsiniz. Nesnenin oturmasını istediğiniz bitiş konumunu ve animasyonun süresini sağlarsınız. Animasyonun hızlanma veya yavaşlama hızını kontrol etmek için zaman interpolatörlerini de kullanabilirsiniz.

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

ObjectAnimator API, belirli bir süreye sahip bir görünümün özelliklerini değiştirmenin bir yolunu sağlar. Animasyon uyguladığınız özelliğin türüne 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.

Görünümü 2 saniye içinde ekranın solundan 100 piksel bir konuma taşıyan ObjectAnimator örneğini aşağıda görebilirsiniz:

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

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, animasyon uyguladığınız mülktür. 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 çok sayıda piksel uzaklıktaki bir konumu gösterir.

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

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

ObjectAnimator kullanımı hakkında daha fazla bilgi için ObjectAnimator'ı kullanarak animasyon konusuna bakın.

Eğri hareket ekle

ObjectAnimator'ü kullanmak kullanışlı 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 mekansal hareketi ve animasyon zamanlaması için eğrilerden yararlanır. Eğimli hareketler kullanmak, uygulamanıza daha gerçekçi bir görünüm kazandırırken animasyonlarınızı daha ilgi çekici hale getirir.

Kendi yolunuzu çizin

ObjectAnimator sınıfında, bir yol ile birlikte aynı anda iki veya daha fazla mülkü kullanarak koordinatları animasyonlu hale getirmenize olanak tanıyan kurucular bulunur. Örneğin, aşağıdaki animatör, bir görünümün X ve Y özelliklerini canlandırmak için Path nesnesi 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 animasyonu aşağıdaki gibi görünür:

Şekil 1. Eğri yol animasyonu.

Interpolator, eğimli eğrinin bir uygulaması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 işlevi 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 (API 21) sürümünde kullanıma sunulan bir interpolatordur. Bézier eğrisini veya Path nesnesini temel alı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ğrisi türlerine dayalı kuruculara sahiptir. Tüm Bézier eğrilerinin sırasıyla (0,0) ve (1,1) noktalarında sabit başlangıç ve bitiş noktaları bulunur. 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 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şlayan ve sona yaklaştıkça yavaşlayan bir yumuşatma eğrisi oluşturur.

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

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

Bir yol interpolator'ı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 bunu Animator.setInterpolator() yöntemine aktarabilirsiniz. Animator, başlatıldığında zamanlamayı veya yol eğrisini belirlemek için interpolator 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();