Animasyon

MotionLayout ile Animasyon Oluşturma

Bir çok  yazılım projesinde arayüz tasarım çok önemlidir. Sade, şık, kullanıcının dikkatini  çeken tasarımların barındığı projeler  her zaman diğer projelerden bir adım önde olmasını sağlar. Yazılım tasarımlarında animasyonlarda  çokça kullanılan özelliklerden biridir.

 Google I/O 2018 konferansında Android uygulama geliştiricileri için, daha kolay ve kısa zamanda  animasyonları eklemeyi sağlayan MotionLayout widget’ı  duyurdular.

Bu makalemde MotionLayout widget’ı Android projelerinize nasıl ekleyeceğinizi ve onunla birkaç farklı animasyonu nasıl oluşturabileceğinizi göstereceğim.

MotionLayout widget nedir?

MotionLayout widget,  artık Android support library (Android destek kütüphanesi) içeresinde  barınmasıyla birlikte ConstraintLayout widget’ın yeni  özellklerinden biridir.

Sadece XML  kodlama kullanarak animasyonları canlandırabilmenizi sağlayan benzersiz bir widget’dır. Dahası, tüm animasyonlar üzerinde ince ayarlar yaparak,  kontrolü sağlamamıza imkan sunmaktadır.

MotionLayout widget alakalı örneklerimize başlayalım.

Ön Koşullar

MotionLayout widget’ı  kullanabilmak için ihtiyacınız olanlar;

  • Android Studio 3.1.3 veya bu sürüm üstü olan bir Android Studio Ide’si
  • Android API 21 veya bu API’den daha yüksek  sürüme sahip bir cihaz veya emülatör
  • En azından temel seviyede ConstraintLayout widget yapısını bilmek

1-Gerekli Kütüphanelerin Eklenmesi

Android Studio Ide ile oluşturduğum projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodları yerleştirerek Android destek kütüphanesi ve ConstraintLayout’un en son versiyonlarını  yüklüyoruz.

2- MotionLayout  Tanımlama

res->layout dizinimizin içerisine root elementi MotionLayout  olan bir layout dosyası açmalısınız. Örnek kod;

Backround rengi olan  bir  Imageview nesnesine animasyonlar katarak örneklerimizi gerçekleştireceğiz. Imageview arayüz elementini oluşturalım.

Ardından, animasyonları başlatmak için basabileceğiniz bir button ekleyin. Aşağıdaki kod, buttonu layout un ortasına nasıl konumlandıracağınızı gösterir:

Ek olarak, animasyonların ilerlemesini izlemek için, bir SeekBar widget’ını layout’a ekleyin.

Son olarak, button’a tıklağınızda, bu eylemi dinleyebileceğiniz, kısa kodu ekleyiniz.

3- Motion Scene Oluşturma

Motion scene, bir MotionLayout widget’ıyla oluşturmak istediğiniz animasyonla ilgili ayrıntıları içeren ayrı bir XML dosyasıdır.

Root elementi Motion scene olan bir layout dosyası açmalısınız. Örnek kod;

Bir hareket sahnesi, bir widget’a animasyonda farklı noktalarda uygulanması gereken constraint’ler belirten ConstraintSet öğelerini içerir. Hareketli sahne dosyaları genellikle iki constraint içerir: biri animasyonun başlangıcı için ve bir tanesi son içindir.

Aşağıdaki kod, MotionLayout widget’ının ImageView widget’ını ekranın sağ alt köşesinden sol üst köşeye taşımasına yardımcı olacak iki constraint ‘in  nasıl oluşturulacağını gösterir:

MotionLayout widget’ının constraint setlerinin uygulanacağı sırayı anlamasına yardımcı olmak için bir Transition elementi oluşturmalısınız. ConstraintSetStart ve constraintSetEnd özniteliklerini kullanarak, hangisinin ilk uygulanacağını ve hangisinin sonlanacağını belirtebilirsiniz. Transition  elementi ayrıca animasyonun süresini belirtmenizi sağlar.

Şuana kadar motion scene özeliğini xml dosyası hazırlandı. Fakat MotionLayout widget motion scene özeliği ile bağ kurabilmesi için, MotionLayout elementine, layoutDescription  özeliği ekleyerek motion scene xml dosya ismini belirtmeniz gerekir. Örnek kod;

4- Animasyonu Çalıştırma

Uygulamayı çalıştırdığınızda, MotionLayout widget’ı Transition elementi constraintSetStart özniteliğinde belirtilen constraint’ı otomatik olarak uygulayacaktır. Bu nedenle, animasyonu başlatmak için yapmanız gereken tek şey, widget’ın transitionToEnd () yöntemini çağırmaktır. Daha önceki bir adımda oluşturduğunuz onlick eventine eklenecek olan kod aşağıdadır.

Uygulamayı çalıştırıp, button’a  tıkladığınızda aşağıdaki görüntüyü elde edeceksiniz.

5- Key Frame Oluşturma

Animasyonumuzda, ImageView widget’ı düz bir çizgiye benzeyen bir yolda hareket eder. Bunun nedeni, MotionLayout widget’ının, çalışmak için yalnızca iki nokta vermesidir. Yolun şeklini değiştirmek istiyorsanız, başlangıç ve bitiş noktaları arasında kalan birkaç ara nokta sağlamanız gerekir. Bunu yapmak için yeni key frame oluşturmanız gerekir.

Key frame oluşturmaya başlamadan önce, motion scene xml dosyanızda Transition elementine KeyFrameSet eklemek zorundasınız.

MotionLayout widget bir çok key frame özeliğine sahiptir. Ben ise sadece KeyPosition ve KeyCycle  frame’lerinden bahsedeceğim.

KeyPosition frame, yolun şeklini değiştirmenize yardımcı olanlardır. Bunları oluştururken, target widget’in ID değerini sağladığınızdan, zaman çizgisi boyunca 0 ile 100 arasında herhangi bir sayı ve yüzde olarak belirtilen istenen X veya Y koordinatları gibi bir konum sağladığınızdan emin olun.

Aşağıdaki kodu KeyFrameSet  tag leri arasına yazmalısınız.

ve sonuç;

KeyCycle frame kullanarak, animasyona salınımlar ekleyebilirsiniz. Bunu oluştururken, tekrar target widget’ının Id’sini, zaman çizgisi boyunca bir konum ve salınımın ileri-geri olması için gereken özelliklerin istenen değerini tekrar sağlamanız gerekir.

Aşağıdaki kod, ImageView elementini  periyodik olarak 50 derece döndürmek için sinüs dalgası salınımını kullanan bir KeyCycle  frame oluşturur.

6-Etkileşimli Animasyon Widget Oluşturma

Şuana kadar bir button a tıklayarak, yani tetikleme yaparak animasyonlu widget’lar oluşturduk.Dilerseniz tetikleme için ekstra  button vb . arayüz nesnelerine ihtiyaç duymadan da  animasyonlu widget’lar oluşturabilirsiniz. MotionLayout widget’ı, animasyonlu widget’lara doğrudan touch event i  eklemenize izin verir.  MotionLayout widget’ı, on-click ve the on-swipe eventleri desteklemektedir.

Örneğin, buttonu kullanmadan animasyonlu widget’a on-click eventi eklemek istiyorsanız,Transition elementine onclick tag i eklemeniz gerekir.

Kullanıcının ImageView widget’ını ekran boyunca elle sürüklemesine izin vermek için OnSwipe öğesini kullanabilirsiniz. Öğeyi oluştururken, sürükleme kolu olarak hareket etmesi gereken doğru sürükle yönünü ve pencere öğesinin yan tarafını sağladığınızdan emin olmalısınız.

 

Artık Android uygulamalarınıza karmaşık, etkileşimli animasyonlar eklemek için MotionLayout widget’ını nasıl kullanacağınızı biliyorsunuz.

Kaynaklar

1- https://code.tutsplus.com/tutorials/creating-animations-with-motionlayout-for-android–cms-31497

2- https://medium.com/google-developers/introduction-to-motionlayout-part-i-29208674b10d

Bülten
Bültene abone ol

Bültene abone olarak yeni makalelerimden haberdar olun.