Ekrandaki nesnelerin genellikle kullanıcı etkileşimi nedeniyle yeniden konumlandırılmaları gerekir. perde arkasında işliyorlar. Nesnenin durumunu hemen güncellemek yerine, bir alandan diğerine yanıp sönmesine neden olacak şekilde ayarlamak için bir animasyon başlangıç konumundan bitiş konumuna taşıyın.
Android'in ekrandaki görünüm nesnelerinizi yeniden konumlandırmak için kullandığı
ObjectAnimator
kullanılıyor. Hedef kitlenizin kim olduğunu
hem de animasyon süresinin sabit olmasını istersiniz. Şunları yapabilirsiniz:
ivme ve yavaşlamasını kontrol etmek için de zaman interpolatörleri
animasyon ekler.
ObjectAnimator ile görünüm konumunu değiştirme
ObjectAnimator
API, belirli bir süre boyunca bir görünümün özelliklerini değiştirmek için bir yol sağlar.
Şuna bağlı olarak, ObjectAnimator
öğesinin örneklerini oluşturmak için statik yöntemler içerir:
Animasyonlar oluşturduğunuz özelliğin türünü. Yeni Google Haritalar'da
translationX
ve translationY
özelliklerini kullanın.
Aşağıda, görünümü 100. konuma taşıyan bir ObjectAnimator
örneği verilmiştir.
piksel sayısı:
Kotlin
ObjectAnimator.ofFloat(view, "translationX", 100f).apply { duration = 2000 start() }
Java
ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f); animation.setDuration(2000); animation.start();
Bu örnekte, SSCS'nin
ObjectAnimator.ofFloat()
yöntemidir, çünkü çeviri değerlerinin kayan olması gerekir. İlk parametre
animasyon eklemek istediğiniz görünümü seçin. İkinci parametre, kullandığınız mülktür.
daha fazla bilgi edineceksiniz. Görünümün yatay olarak hareket etmesi gerektiğinden, translationX
özelliği kullanılır. Son parametre, animasyonun bitiş değeridir. Burada
örneğin, 100 değeri, bir konumun
ekranda görebilirsiniz.
Sonraki yöntem, animasyonun ne kadar süreceğini milisaniye cinsinden belirtir. Burada Örneğin, animasyon 2 saniye (2000 milisaniye) sürer.
Son yöntem, animasyonun çalıştırılmasına neden olur ve görünümün konumunu günceller. ekranda görebilirsiniz.
ObjectAnimator
kullanımı hakkında daha fazla bilgi için bkz.
ObjectAnimator öğesini seçin.
Eğri hareket ekle
ObjectAnimator
kullanımı kolay olsa da varsayılan olarak
bir çizgi boyunca görünümü sabitleyin. Malzeme
Tasarım, ekrandaki nesnelerin uzamsal hareketi için eğrilere ve
bir animasyonun zamanlaması. Kavisli hareket kullanmak, uygulamanıza daha somut bir görünüm kazandırır
hem de animasyonlarınızı daha ilgi çekici hale getirin.
Kendi yolunuzu belirleyin
ObjectAnimator
sınıfı, koordinatları canlandırmanızı sağlayan kuruculara sahiptir
bir yol ile birlikte aynı anda iki veya daha fazla özellik kullanma. Örneğin,
aşağıdaki animatörde bir
X ve Y animasyonu için Path
nesnesi
bir görünümün özellikleri:
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 şu şekilde görünür:
Şekil 1. Eğri yol animasyonu.
Interpolator
bir yumuşatma eğrisinin uygulanmasıdır. Bkz.
Materyal Tasarım belgeleri
konusuna bakın. Interpolator
bir animasyondaki belirli değerlerin
gerekir. Sistem, tablodaki üç temel eğri için XML kaynakları sağlar:
Materyal Tasarım spesifikasyonu:
@interpolator/fast_out_linear_in.xml
@interpolator/fast_out_slow_in.xml
@interpolator/linear_out_slow_in.xml
PathInterpolator kullanma
İlgili içeriği oluşturmak için kullanılan
PathInterpolator
class'ı, Android 5.0 (API 21) sürümünde kullanıma sunulan bir ara değişkendir. Şuna dayalı:
Bézier eğrisi veya
Path
nesne. Materyal Tasarım dokümanlarındaki
yumuşak geçiş
PathInterpolator
kullanın.
PathInterpolator
, farklı Bézier eğrilerine dayanan kurucular içerir.
Tüm Bézier eğrilerinin başlangıç ve bitiş noktaları şu noktalarda sabittir: (0,0)
ve (1,1)
,
tıklayın. Diğer kurucu bağımsız değişkenleri Bézier türüne bağlıdır
eğri oluşturuluyor.
Örneğin, ikinci dereceden bir Bézier eğrisi için yalnızca X ve Y koordinatları en az bir denetim noktası olması 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 ilerledikçe yavaşlayan bir yumuşatma eğrisi oluşturur. sonna yaklaşır.
Kübik Bézier oluşturucunun da benzer şekilde sabit başlangıç ve bitiş noktaları vardır, 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, vurgulanan Materyal Tasarım'ın bir uygulamasıdır yavaşlama yumuşak geçiş eğrisi.
Daha fazla kontrol için eğriyi tanımlamak amacıyla 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ğiyle aynı yumuşak geçiş eğrisini sağlar, ancak
Bunun yerine Path
.
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 bu nesneyi
Animator.setInterpolator()
yöntemidir. Animator
, zamanlamayı veya yolu belirlemek için interpolator kullanır
eğri olacaktı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();