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.

Ş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.

Ş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.

Ş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.

Ş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.

Ş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.

Ş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.

Ş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.

Ş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.

Şekil 9. "DrawerLayout" genişletiliyor.

Çekmece Düzeni (2/2)

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

Ş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.

Ş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.

Ş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.

Ş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.

Ş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.

Ş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.

Ş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.

Ş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.

Ş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.

Ş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.

Ş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.

Ş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.

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