Jetpack Compose Animations API Kullanımı

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. Bu yüzden arayüz tasarımı, yazılım projeler için çok hassas bir konudur.

Bu makalemde ise geliştiricilerin animasyon tasarımlarını, etkileyici ve kullanıcı deneyimini artıracak şekilde gösterilmesini sağlayan Jetpack Compose Animations API’nin kullanımını örnekleyeceğim.

Jetpack Compose Animations kütüphanesi, AndroidX yapısını kullanmaktadır. Bu yüzden ilk önce projelerinizi AndroidX yapısına geçişini sağlamalısınız. Bu konuda AndroidX Kütüphanesine Geciş adlı makalemden faydalanabilirsiniz.

Pokemon ile ilgili yapılmış bir uygulamanın tasarımından esinlenerek bir örnek hazırladım. Aşağıdaki resmin arka planında dönen Pokeball animasyonunu nasıl oluşturabileceğimizi anlatacağım.

Bu örneği uygulayabilmek için işlemleri adım adım belirteceğim.

1-Proje Oluşturma

Jetpack Compose yapısını kullanabilmek için Android Studio 4.2 versiyonuna sahip olmalısınız. Bu linkden Android Studio 4.2 versiyonunu  indirebilirsiniz. Bu Ide’de proje oluştururken layout tipini, Empty Compose Activity olarak seçmelisiniz.

2-Gerekli Kütüphanelerin Yüklenmesi

Projeyi belirttiğim gibi oluşturduktan sonra, projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodları yerleştirerek Jetpack Compose Animations kütüphanelerini yüklüyoruz.

3-Resmin Ekranda Gösterilmesi

Jetpack Compose ile kullanıcı arayüzünde bazı eylemler oluşturmak istersek, bu işlemler composable fonksiyonlar aracılığıyla yapılır. Composable fonksiyonlar @Composable notasyonu ile belirtilir. Composable fonksiyonlar sadece Composable fonksiyonlar içerisinden çağrılabilirler.

Aşağıdaki kodda, oluşturmuş olduğum Pokeball metodunda DrawImage Composable ile ekranda göstermek istediğim resmi çağırdım ve Container ile resimin kaplayacağı alanın boyutunu belirttim.

Kodu çalıştırdığınız ekranda Şekil-1 görünür.

Şekil-1

Dilerseniz bu resmin rengini ve opacity değerini(görünürlüğünü azaltma) değiştirebilirsiniz.

Şuana kadar Jetpack Compose ile statik resim üzerinde değişiklik yaptın. Compose ile bir şeyi nasıl döndüreceğimize bakalım.

4-Resmi Döndürmeye Başlama

Resmi 45 derece döndürmeyi deneyelim.

Bu kodları çalıştırırsanız, resmin sol üst köşesi ((0,0) koordinatları) etrafında döndürdüğümüzü göreceksiniz.  Yalnız bu şekilde kullanıldığında, resmin merkezi noktasından dönmediği için garip bir görüntü oluşmaktadır.(Şekil-2)

Şekil-2

Bu durumun çözümü yükseklik ve genişlik değerlerinin yarısı kadar translate metodunda kullanarak, nesnenin merkezden dönmesini sağlamaktır. Kodu;

Üstteki kodu çalıştırdığımızda, merkezin etrafında dönüş yaptığını görmüş oluyoruz.(Şekil -3)

Şekil -3

Şuana kadar, resmi doğru bir şekilde istediğimiz açıyla bir kere döndürmeyi yaptık. Peki bunu sürekli animasyon şeklinde nasıl yapacağız?

5-Resime Animasyon Özelliği Ekleme

Jetpack Compose’da animasyonlarla çalışmanın en basit yolu Transition komponentini kullanmaktır. Bu komponent, animasyonlarınız için birkaç özellik tanımlamanıza olanak tanır:

  1. Başlangıç ve bitiş durumları.
  2. Animasyon zamanlayıcı.
  3. Animasyon tamamlandığında, tekrar başlayabilmesi
  4. Composable content wrapper  metodu sayesinde, canlandırmak istediğiniz UI öğelerini eklemenizi sağlar.

Döndürme değerini animasyona ekleyebilmek için, aşağıdaki gibi bir TransitionDefinition oluşturabiliriz:

Daha önce hazırladığımız resmin  1 kere dönme işlemini yapan kodlar ile Transition komponentini kullanarak, resmi animasyon görünümünü elde edeceğiz.

Sonuç:

Son Ufak Ayarlar

Yukarıdaki gifte animasyon sürekli olsa da, bunun tek nedeni gifin döngü halinde olmasıdır. Kodumuzu bir cihazda başlatırsak, animasyonun tek bir dönüş tamamlandıktan sonra gerçekten bittiğini ve bundan sonra başka hiçbir şey yapmadığını görürdük.

TransitionDefinition bölümünde tween özelliğini ekleyerek animasyonun ne kadar süre çalışacağını belirtmiş oluruz.

Kodumuzun son hali:

Kaynaklar

1-https://proandroiddev.com/rotating-pokeball-animation-with-jetpack-compose-e3e839782cba

2-https://developer.android.com/jetpack/compose/tutorial

Kategori Genel
Etiketler