Motion Editor ile Splash Screen Yapımı
Her uygulama geliştiricisi yaptığı işlere esneklik katmak ister. Yazı ve görsel içeriğine sahip uygulamalar ne kadar güzel geliştirilse de animasyonlarla desteklendiğinde tadından yenmez 😋
Android Studio 4.0 öncesine kadar geliştiriciler bu tarz işler için layout türlerinden MotionLayout kullanıyordu. Motion layout da eklenecek her özellik genellikle xml tarafında olmaktadır. Android Studio 4.0 sonrasında gelen Motion Editör ile artık bu tarz geliştirmeler daha da kolaylaşmaktadır.
Motion Editor, aslında arkaplanda yaptığı için xml kodunu kendi generate etmekdir. Editör de yapılan her değişikliği geliştirici görmesede arkaplanda xml dosyasında güncellenmektedir. Lakin motion editor arayüzüne alışmakta zorlanıyorsanız ya da elim koda değsin diyorsanız da generate edilen bu kodlara ulaşabiliyorsunuz.
Başlamadan Önce
Motion Editör kullanabilmek için öncelikle buradan Android Studio 4.0 stabil versiyonuna sahip olmanız gerekmektedir. Ayrıca Constrainte Layoutun aşağıdaki beta versiyonu implemente edilmelidir:
Bu yazımda en son geliştirmekte olduğum Tavsiye Dünyası uygulamasında kullandığım splash screen animasyonunu anlatıyor olacağım 😍
Setup işlemlemlerinizi hallettiğimizde activity_main.xmldosyamızın design tarafına geçelim. Mouse ile ekranda sağ click yaptığımızda seçeneklerde Convert to MotionLayout görmelisiniz.Bu seçeneğe tıkladığımızda çıkan popup da convert dediğimizde editor penceremize artık geçiş yapabiliriz.
Sağ menüde açılan pencere de tüm işlemlerimiz gerçekleştirebileceğiz. Gördüğünüz üzere Motion layout, start ve end katmanları bulunuyor. Genel akış olarak ekranınızda görülmesini istediğiniz componentleri start katmanına tıklayarak düzenlemesini yapıyoruz. Yani componentlerin başlangıç referanslarını ayarlıyoruz.
Editördeki katmanların sol üstünde bulunan ikonların işlevlerine bakalım:
1-) Default da gelen start ve end katmanları dışında yeni bir custom katman oluşturmak için kullanırız. Oluşturduğumuz bu katmanı da diğer katmanlarla birleştirebililir,içerisinde bulunan componentlerimizi tekrardan düzenleyebiliriz.
2-) Mevcutta bulunan constraintset ler arasında geçişi sağlamak için transitions kullanırız. İstediğimiz kadar transation bağı kurabiliriz. Bu seçeneğe tıklanıldığında karşımıza çıkan pencerede başlangıç ve bitiş katmanlarımızı seçmemiz istenecektir. Ayrıca geçişin otomatik, animasyon vs. gibi hangi şekilde olmasını istediğimizi seçebiliriz.
3-) Oluşturacağımız animasyon geçişlerini nasıl handle edeceğimizi seçeceğimiz menüdür. Default da sayfa yüklendiğinde açılışında hiçbir animasyon başlamamaktadır. Bunun çözümünü yazı sonunda açıklaycağım. Biz geliştiricilere sunulan handle yapıları 2 tanedir. Birinci click handle ikincisi ise swipe handle dır. Fikir vermesi açısından motion layout sayfasında sunulan örneklere buradan bakabilirsiniz.
Yazımızda splash screen yapacağımız için iki handle yöntemine de ihtiyaç duymayacağız.
Start katmanındayken düzenlediğimiz componentleri şimdi end katmanında son referans konumlarını düzenleyeyip oluşan animasyonu oynatacağız ✌️
İşte oluşturduğumuz animasyon karşımızda 😃 Şimdi ise animasyona biraz daha estetik katalım.
Not: End katmanında componentleri tam hizalama yapabilmek ve zaman kaybını engellemek için önceden detaylı konumlandırmasını gerçekleştirdim.
Her component için farklı özellikler atayacağımız Create KeyFrames menüsüne tıklıyoruz. Bu menü içerisinde componentlerin kaçıncı saniyede neler yapacağını belirleyebilir, position özelliklerine müdahale edebilir ve daha fazlasını yapabiliriz.
Rotate Özelliği Verme
Projemizde imageview3 componentine rotate özelliği vermek için Create KeyFrame menüsü altında KeyAttribute e tıklıyoruz. Karşımıza aşağıdaki pencere çıkmaktadır.
Bu ekranda ID özelleştirilecek component id sini belirtiyoruz. Position ile özelliğin kaçıncı saniyede başlayacağını seçiyoruz. Attribute ise componente vericelecek özelliği seçiyoruz. Biz rotation özelliğini seçip add diyoruz.
Her eklenen özelleştirmenin üzerine tıkladığımızda sağ menüde o özelliğe ait attribute lar görünmektedir. Rotation özelliğini 180 derece olarak ayarladığımız da yukarıdaki gibi animasyon olmaktadır.
Position Özelliği Verme
Projemizde imageview6 (turuncu component) componentine daha efektif bir kayma özelliği vermek için Create KeyFrames menüsünden keyPosition özelliğine tıkladığımızda aşağıdaki pencere açılmaktadır.
Burada özelleştirmenin hangi componentte olacağını ID ile seçiyoruz. Position ile bu özelliğin kaçıncı saniyede etki edeceğini belirliyoruz. Type ile de hangi koordinat sisteminde düzenleme yapacağımızı belirtiyoruz. Ben projede deltaRelative kullandım. PercentX ve PercentY seçtiğimiz koordinat sisteminde componentin konumu belirtiyoruz. Bu ayarı ister componenti sürükleyerek isterseniz sağ menüden sabit değerler verebilirsiniz. Biz Aşağıda gördüğünüz gibi sürükleyerek konumlandırdık.
Tekrardan ilgili componente de rotation ya da diğer özellikleri aynı anda verebilirsiniz.
Alpha Özelliği Verme
Projemizde son olarak imageview4 componentine soluklaştırma özelliği ekleyeceğiz. Böylece daha yumuşak bir görünüm elde edeceğiz.
Create KeyFrames menüsünden KeyAttribute e tıklıyoruz. Rotation özelliği ekleme ile ilgili aynı ayarları yapıyoruz sadece attribute özelliği olarak alpha yı seçmemiz gerekmektedir.
Son olarak yaptığımız animasyonu sayfa açıldığında başlaması için onCreate metodu içerisinde aşağıdaki kodu vermeliyiz:
mmlayout activity_main.xml içerisindeki layout id sidir.
Bonus
Şimdiye kadar geliştirdiğimiz animasyonu motion layout ile yapsaydık ne kadar kod yazardık derseniz
res>xml>activity_main_scene.xml dosyasında görebilirsiniz 😊
Projenin tamamına buradan erişebilirsiniz.
Sabırla okuduğunuz için teşekkür ederim.Umarım Motion editor hakkında bilgi sahibi olabilmişsinizdir. Yazıyı beğendiyseniz alkışlayabilirsiniz 👱
Uygulamama destek olmak isterseniz 👇
