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