MotionLayout örnekleri

Bu dokümanda, MotionLayout'in nasıl kullanılacağına dair örnekler bulunmaktadır. Her örnekte, hareketi gösteren bir video ile birlikte hareket sahnesi ve düzenleri için ilgili kod yer alır.

Temel hareket

Bu örnekte, dokunup sürükleyerek yatay olarak taşıyabileceğiniz tek bir görünüm bulunmaktadır.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 1. Bir görünüm sürükleniyor.

Özel özellik - backgroundColor

Bu örnek, Temel hareket örneğine benzer. Temel harekete ek olarak, görünüm hareket ettikçe görünümün arka plan rengi de değişir.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 2. Arka plan rengi değişirken bir görünümü sürükleme.

ImageFilterView - resim geçişi

Bu örnekte, bir ImageFilterView doygunluk değerinin nasıl geçirileceği gösterilmektedir.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 3. Doygunluk değişirken bir resmi sürükleme.

Animasyon karesi konumu

Bu örnekte, hareket sırasında görünümün Y konumunu değiştirmek için <KeyFrameSet> kullanılmaktadır.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 4. Bir görünümü sürükleme ve Y konumunu değiştirme.

Animasyon karesi interpolasyonu

Bu örnekte Animasyon karesi konumu örneğine dayanmaktadır ve görünüm geçişine döndürme ve ölçeklendirme eklenmiştir.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 5. Bir görünümü sürükleme ve Y konumunu, döndürmesini ve ölçeğini değiştirme.

Animasyon karesi döngüsü

Bu örnekte, görünüme dalga benzeri hareket eklemek için <KeyCycle> öğeleri eklenmiştir.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 6. Bir görünümün rengini değiştirirken dalga benzeri bir hareketle sürükleme.

CoordinatorLayout (1/2)

Bu örnekte, uygulama çubuğuna hareket eklemek için mevcut bir AppBarLayout öğesine MotionLayout işareti eklenir. Bu örnek, MotionLayout'a Giriş (bölüm III) bölümünde daha ayrıntılı şekilde açıklanmıştır.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 7. Uygulama çubuğu genişletilirken içeriğin kaydırılması.

CoordinatorLayout (2/2)

Bu örnekte, uygulama çubuğuna hareket eklemek için mevcut bir AppBarLayout öğesine MotionLayout işareti eklenir.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 8. Uygulama çubuğu genişlerken içeriğin kaydırılması ve uygulama çubuğunun içine ve dışına metin animasyonunun eklenmesi.

Çekmece Düzeni (1/2)

Bu örnekte, DrawerLayout için nasıl hareket ekleneceği gösterilmektedir. Bu örnek, MotionLayout'a Giriş (bölüm III) bölümünde daha ayrıntılı olarak açıklanmıştır.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 9. "DrawerLayout" genişletiliyor.

Çekmece Düzeni (2/2)

Bu örnekte, DrawerLayout için nasıl hareket ekleneceği gösterilmektedir.

• Düzen XML'ini görüntüleyin.
• Ana içerik için MotionScene XML'yi görüntüleyin.
• MotionSceneMenü XML'sini görüntüleyin.

Şekil 10. Animasyonlu menü metniyle "DrawerLayout"u genişletme.

Yan panel

Bu örnekte, ana içerik alanını sağa sürüklerken yan panelin nasıl görüntüleneceği gösterilmektedir.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 11. Ana içeriği sürükleyerek yan paneli gösterme.

Paralaks

Bu örnekte, farklı arka plan katmanlarının farklı hızlarda hareket ettiği bir paralaks arka planı gösterilmektedir.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 12. Başlık resminde paralaks efekti.

Sayfa Çağrısı

Bu örnekte, ViewPager sekmeleri arasında kaydırma yaparken nasıl hareket ekleyebileceğiniz gösterilmektedir. Bu örnek, MotionLayout'a Giriş (bölüm III) bölümünde daha ayrıntılı şekilde açıklanmıştır.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 13. "ViewPager" kaydırılırken başlık resminde paralaks efekti.

ViewPager - Piyango

Bu örnekte, ViewPager sekmeleri arasında kaydırma yaparken nasıl hareket ekleyebileceğiniz gösterilmektedir.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 14. "ViewPager" kaydırılırken başlık resminde Lottie efektini gösteren resim.

Karmaşık hareket (1/3)

Bu örnekte, karmaşık hareketi göstermek için önceki örneklerdeki öğeler birleştirilmektedir.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 15. Karmaşık hareketler oluşturmak için efektleri birleştirme.

Karmaşık hareket (2/3)

Bu örnekte, karmaşık hareketi göstermek için önceki örneklerdeki öğeler birleştirilmektedir.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 16. Karmaşık hareketler oluşturmak için efektleri birleştirme.

Karmaşık hareket (3/3)

Bu örnekte, karmaşık hareketi göstermek için önceki örneklerdeki öğeler birleştirilmektedir.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 17. Karmaşık hareketler oluşturmak için efektleri birleştirme.

Parça geçişi (1/2)

Bu örnekte, parçalar arasında geçiş yapmak için MotionLayout nasıl kullanabileceğiniz gösterilmektedir.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 18. Parça geçişi.

Parça geçişi (2/2)

Bu örnekte, parçalar arasında geçiş yapmak için MotionLayout nasıl kullanabileceğiniz gösterilmektedir.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 19. Parça geçişi.

YouTube benzeri hareket

Bu örnekte, kompakt görünüm ile ek içeriğe sahip tam ekran deneyimi arasında geçiş gösterilmektedir.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 20. YouTube'a benzer şekilde parça geçişi yapılır.

Tuş Tetikleyici

Bu örnekte, geçiş ilerleme eşiğini aştığında kayan işlem düğmesinin nasıl gösterileceği ve gizleneceği gösterilmektedir.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 21. Kayan işlem düğmesini gösterme ve gizleme.

Birden fazla eyalet

Bu örnekte, hangi hareketin uygulanacağını belirlemek için durumun nasıl kullanılacağı gösterilmektedir.

• Düzen XML'ini görüntüleyin.
• MotionScene XML dosyasını görüntüleyin.

Şekil 22. Duruma göre farklı hareketler.