MotionLayout örnekleri

Compose yöntemini deneyin
Jetpack Compose, Android için önerilen kullanıcı arayüzü araç setidir. Compose'da animasyonları nasıl kullanacağınızı öğrenin.
Compose'daki animasyonlar →

Bu belgede, MotionLayout kullanımına ilişkin örnekler yer almaktadır. Her örnekte, hareketin gösterildiği bir video ile hareket sahnesi ve düzenlerle ilgili kodlar yer alır.

Temel hareket

Bu örnekte, yatay olarak hareket ettirmek için dokunup sürükleyebileceğiniz tek bir görünüm yer alıyor.

Şekil 1. Görünümü sürükleme

Özel özellik: backgroundColor

Bu örnek, Temel hareket örneğine benzer. Temel hareketin yanı sıra 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 - image transition

Bu örnekte, ImageFilterView doygunluk değerinin nasıl değiştirileceği gösterilmektedir.

Şekil 3. Doygunluğu değişirken 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ükleyip Y konumunu değiştirme.

Animasyon karesi interpolasyonu

Bu örnek, Animasyon karesi konumu örneğini temel alır ve görünüm geçişine döndürme ve ölçeklendirme ekler.

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

Animasyon karesi döngüsü

Bu örnek, görünüme dalgalı bir hareket eklemek için <KeyCycle> öğelerini kullanır.

Şekil 6. Rengini değiştirirken görünümü dalgalı bir hareketle sürükleme.

CoordinatorLayout (1/2)

Bu örnek, uygulama çubuğuna hareket eklemek için mevcut bir AppBarLayout öğesine MotionLayout ekler. Bu örnek, Introduction to MotionLayout (part III) (MotionLayout'a Giriş - Bölüm III) başlıklı makalede daha ayrıntılı olarak açıklanmaktadır.

Şekil 7. Uygulama çubuğu genişlerken içeriği kaydırma

CoordinatorLayout (2/2)

Bu örnek, uygulama çubuğuna hareket eklemek için mevcut bir AppBarLayout öğesine MotionLayout ekler.

Şekil 8. Uygulama çubuğu genişlerken ve metin uygulama çubuğunda animasyonla girip çıkarken içeriği kaydırma.

DrawerLayout (1/2)

Bu örnekte, DrawerLayout öğesine nasıl hareket ekleneceği gösterilmektedir. Bu örnek, Introduction to MotionLayout (part III) başlıklı makalede daha ayrıntılı olarak açıklanmaktadır.

Şekil 9. `DrawerLayout` genişletiliyor.

DrawerLayout (2/2)

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

Şekil 10. Animasyonlu menü metniyle `DrawerLayout` öğesini 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 panel 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.

ViewPager

Bu örnekte, ViewPager sekmeleri arasında kaydırırken nasıl hareket ekleyebileceğiniz gösterilmektedir. Bu örnek, Introduction to MotionLayout (part III) başlıklı makalede daha ayrıntılı olarak açıklanmaktadır.

Şekil 13. `ViewPager` kaydırılırken başlık resmindeki paralaks efekti.

ViewPager - Lottie

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

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

Karmaşık hareket (1/3)

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

Ş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ştirilmiştir.

Ş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ştirilmiştir.

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

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

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

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

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

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

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

YouTube benzeri hareket

Bu örnekte, ek içeriklerle birlikte kompakt görünüm ile tam ekran deneyimi arasında geçiş yapılması gösterilmektedir.

Şekil 20. YouTube'a benzer şekilde parçalar arasında geçiş yapma.

KeyTrigger

Bu örnekte, geçiş bir 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. Eyalete göre farklı hareketler.