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

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ı:

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

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:

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 ş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:

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 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:

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, 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:

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ş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.

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

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