Android’de Özgün Vektörel Animasyonlar Oluşturma

Bir yazılım projesinde kullanıcının dikkatini çeken, sade ve şık tasarımın kullanılması müşteri potansiyelinin yükselmesinde fayda sağlar. Bu yüzden tasarımda animasyonlu öğelerin kullanılması sıkça tercih edilmektedir.

Bu makalede, bir tasarım programına bağlı kalmadan pratik ve hızlı bir şekilde özgün vektörel animasyonlar oluşturmayı ve Android uygulamanıza nasıl ekleyeceğinizi örnekleyeceğim.

Makale sonunda elde edeceğimiz animasyonlu vektör görseli;

Animated Vector Drawable ve Shape Shifter Nedir?

Animated Vector Drawable, Android uygulamalarda xml kodlama ile animasyonlu görseller oluşturmamıza sağlamaktadır. Fakat her animasyonlu görsel için xml kodu yazmak zor bir işlemdir. Bu durumun çözümü için Shape Shifter kullanabilirsiniz. Shape Shifter, https://shapeshifter.design sitesi üzerinden hızlı ve kolay bir şekilde Animated Vector Drawable yapısına uygun animasyonlu vektörel görseller oluşturmayı sağlar.

Vektör Çizimi

Animated Vector Drawable’da her bir vektörün oluşturulabilmesi için xml içinde path değeri kullanılır. Android Studio vektörü kolay bir şekilde oluşturmamızı sağlayan Vector Asset adında bir özellik sunmaktadır.

Res ->drawable dizinine sağ tıklayıp New-> Vector Asset yolunu takip ederseniz aşağıdaki pencere açılacaktır. Bu pencereden, Clip Art bölümünü seçip istediğiniz vektörü oluşturabilirsiniz.

Turuncu alanda belirttiğim check vektörünü seçip, Ok butonuna basarsanız, drawable dizinin içinde check vektörünü xml dosyada oluştuğunu göreceksiniz. Xml dosyasındaki path değerini kullanacağız.

Shape Shifter’da Vector Layer Oluşturma

Örneğimizde 2 tane layer bulunmaktadır.

  1. Gri border vektörü
  2. Siyah check vektörü

Shape Shifter sitesinde gri border vektörünü oluşturalım. Kullandığım path; M 0 0 L 0 24 L 24 24 L 24 0 L 0 0

Check vektörünü oluşturalım. Kullandığım path; M 4 12 L 9 18 L 20 7

Check Vektörüne Animasyon Ekleme

Check cektörüne örnek de var olan animasyonu ekleyebilmek için videoyu izleyebilirsiniz.

Hazırlanan Görselin Animated Vector Drawable Çıktısını Oluşturma

Hazırladığımız check vektörel animasyonunu Animated Vector Drawable xml formatında çıktısını alıp, Android uygulamamızda kullanacağız. Bu xml’i oluşturmak için Shape Shifter sitesinin sol alt kısımda bulunan Export->Animated Vector Drawable  seçmeniz gerekir.

avd_anim.xml  adındaki Animated Vector Drawable dosyamızı oluşturduk.

Android Uygulamanıza Hazırladığınız Animated Vector Drawable Ekleme

İlk öncelikle avd_anim.xml  dosyasını,  res/drawable dizinin içerisine eklemeliyiz. Animasyonlu görseli göstermek istediğiniz sayfanın layout dosyasına ImageView kodunu eklemelisiniz.

ImageView kodu;

Son olarak, Java kodlama tarafında ImageView nesnesinin click eventini tanımladık. Animatable sınıfını kullanarak vektör animasyonunun çalışmasını sağladık.

Kaynak

1- https://medium.com/mobile-app-development-publication/create-your-own-animated-vector-drawable-on-android-app-3f8fa9bb08c3

 

Kategori Genel, Makalelerim
Etiketler