Maui: [Spesifikasi] Transisi

Dibuat pada 18 Mei 2020 · 7Komentar · Sumber: dotnet/maui

Transisi

Maui sudah memiliki API animasi lengkap yang memungkinkan Anda membuat konten langsung dan lancar di halaman. Namun, apa yang terjadi saat menavigasi antar halaman?.

Spesifikasi ini mendefinisikan API transisi Maui . Kami memiliki dua jenis transisi yang terdiferensiasi dengan baik:

Transisi tradisional :
Transisi elemen bersama : Sering kali, ada elemen yang sama untuk kedua aktivitas dan menyediakan kemampuan untuk mentransisikan elemen bersama ini secara terpisah menekankan kesinambungan antara transisi dan melanggar batas aktivitas saat pengguna menavigasi aplikasi.

shared_transitions

API

Transisi tradisional

Untuk transisi tradisional, kita memerlukan enumerasi baru dengan transisi yang didukung:

public enum NavigationTransitionType
{
    None,
    Fade,
    Flip,
    Scale,
    SlideFromLeft,
    SlideFromRight,
    SlideFromTop,
    SlideFromBottom,
    Turnstile
}

Dan, sertakan properti baru di Halaman untuk memungkinkan transisi halaman menggunakan NavigationPage dan Shell:

TransitionType : Efek transisi yang digunakan.
TransitionDuration : Durasi transisi dalam milidetik.

public static readonly BindableProperty TransitionTypeProperty =
     BindableProperty.Create(nameof(TransitionType), typeof(NavigationTransitionType),   typeof(NavigationPage), PageTransitionType.None,
     BindingMode.TwoWay, null);

public NavigationTransitionType TransitionType
{
    get { return (NavigationTransitionType)GetValue(TransitionTypeProperty); }
    set { SetValue(TransitionTypeProperty, value); }
}

public static readonly BindableProperty TransitionDurationProperty =
     BindableProperty.Create(nameof(TransitionDuration), typeof(double), typeof(NavigationPage), 500d,
     BindingMode.TwoWay, null);

public double TransitionDuration
{
    get { return (double)GetValue(TransitionDurationProperty); }
    set { SetValue(TransitionDurationProperty, value); }
}

Transisi elemen bersama

Di sisi lain, kita membutuhkan cara untuk memungkinkan transisi elemen bersama. Kuncinya adalah cara untuk _"menautkan"_ item yang sama yang tersedia di dua halaman berbeda.

Kami akan memiliki properti TransitionTag yang dilampirkan ke elemen yang didukung yang diwarisi dari View:

public static readonly BindableProperty TransitionTagProperty =    
     BindableProperty.CreateAttached("TransitionTag", typeof(int), typeof(Transition), 0,
propertyChanged: OnPropertyChanged);

Penggunaannya akan menjadi:

<Image Source="xamarin.jpg" TransitionTag="logo" WidthRequest="100" />

Tandai kontrol untuk transisi di halaman sumber.

<Image Source="xamarin.jpg" TransitionTag="logo" WidthRequest="300" />

Dan beri tag kontrol untuk transisi di halaman tujuan.

Skenario

Mari kita lihat beberapa contoh.

Contoh XAML

Contoh menggunakan transisi antar halaman:

<ContentPage
     TransitionType=“SlideFromBottom”
     TransitionDuration="750" />

Contoh menggunakan elemen transisi bersama:

Halaman 1:

<Image  
     Source="xamagon_preview.png"
     TransitionTag="xamagon"/>

Halaman 2:

<Image  
     Source="xamagon.png"
     TransitionTag="xamagon"/>

Catatan

TransitionTag di halaman sumber dan tujuan harus cocok untuk menampilkan transisi.
Anda dapat menganimasikan beberapa tampilan sekaligus, tetapi setiap TransitionTag di halaman harus unik.

Kesulitan: Sedang

animation 🎬 enhancement proposal-open

Sumber

jsuarezruiz

👍21 ❤8

Komentar yang paling membantu

Mengenai transisi bersama, harap perhatikan bahwa jika Anda ingin melakukan transisi dari daftar item (misalnya tampilan Koleksi), properti "TransitionTag" tidak cukup untuk mengidentifikasi tampilan yang ingin Anda animasikan.

Bayangkan sebuah DataTemplate dengan daftar item yang berisi gambar dan teks, setiap gambar berbeda tetapi TransitionTag selalu sama (misalnya: "ImageToTransition").

Saat Anda mengetuk sebuah elemen, Perender Navigasi perlu tahu persis elemen apa yang perlu diterjemahkan, dan jika Anda memiliki satu tag untuk semua gambar Anda di CollectionView, ini bisa menjadi masalah.

Di plugin saya, saya memutuskan menggunakan properti TransitionGroup yang saya gunakan untuk mengidentifikasi elemen yang akan diterjemahkan.

Saya ingin berkontribusi pada fitur ini tetapi kode saya untuk Android tidak cukup stabil (ada masalah dengan ChildFragments saat menggunakan TabbedPages/MasterPage, tetapi di shell saya pikir baik-baik saja), juga di iOS saya menuntut beberapa peretasan untuk membuat transisi yang baik bentuk .

Saya mengerjakan ulang banyak kode dari versi pertama dan sekarang terlihat lebih baik tetapi saya tidak berpikir cukup baik untuk masuk ke inti, tetapi saya siap membantu dan berkontribusi jika diperlukan
https://github.com/GiampaoloGabba/Xamarin.Plugin.SharedTransitions

GiampaoloGabba pada 19 Mei 2020

❤8

Semua 7 komentar

Saran

Mungkin properti yang menerima animasi alih-alih enum ?
Untuk dapat memperluas dan menerima animasi khusus yang perlu mengimplementasikan beberapa antarmuka ITransitionAnimation .
Dan beberapa animasi standar untuk digunakan seperti NamedSize pada font

Contoh:

<ContentPage
     Transition=“{local:MyCustomTransition}"
     TransitionDuration="750" />

Atau "Transisi Bernama" yang telah ditentukan sebelumnya

<ContentPage
     Transition=“Fade"
     TransitionDuration="750" />

felipebaltazar pada 19 Mei 2020

👍2

Bayangkan sebuah DataTemplate dengan daftar item yang berisi gambar dan teks, setiap gambar berbeda tetapi TransitionTag selalu sama (misalnya: "ImageToTransition").

Di plugin saya, saya memutuskan menggunakan properti TransitionGroup yang saya gunakan untuk mengidentifikasi elemen yang akan diterjemahkan.

GiampaoloGabba pada 19 Mei 2020

❤8

Btw banyak kode saya bisa sangat disederhanakan jika beberapa properti dapat diintegrasikan di inti utama

GiampaoloGabba pada 19 Mei 2020

❤2

@felipebaltazar Ini bisa menjadi sesuatu yang mirip dengan proposal untuk membuat transisi khusus di TabView https://github.com/xamarin/Xamarin.Forms/issues/10773 Saya akan melakukan beberapa tes dan setelah itu kami akan meninjau Spec.

@GiampaoloGabba Pasti akan sangat menyenangkan menerima tanggapan Anda tentang API ini. Jika Anda ingin berkontribusi, seperti di Xamarin.Forms kami akan menerima PR dan saya akan dengan senang hati membantu Anda. Tentang parameter yang Anda tunjukkan untuk koleksi, saya telah meninjaunya dan Anda benar. Mnn, kita dapat menambahkan properti tambahan untuk menutupi kasus ini ( TransitionGroup ), atau mungkin secara internal jika induk dari elemen adalah kumpulan, buat grup secara otomatis.

jsuarezruiz pada 21 Mei 2020

❤3

atau mungkin secara internal jika induk elemen adalah kumpulan, buat grup secara otomatis.

saya mencoba pendekatan ini tetapi agak sulit. Misalnya dalam tampilan koleksi, kita dapat memulai navigasi berdasarkan perubahan SelectedItem.
Jauh lebih mudah untuk "menampar" properti untuk pengelompokan dan kemudian membiarkan pengguna memutuskan kapan dan bagaimana menggunakannya :)

Btw saya berencana untuk menulis di sini dokumen kecil yang mencakup arsitektur dasar yang saya gunakan untuk mengembangkan ini (cara melacak transisi dan bagaimana mewujudkannya di iOS, karena tidak ada dukungan asli untuk itu dan saya harus mengembangkan semuanya dengan tangan , sementara itu jauh lebih mudah di Android, jika Anda mengecualikan fragmen anak yang dihasilkan oleh tappedpage dan MasterDetail)

Untuk berjaga-jaga mungkin ada beberapa ide bagus untuk dipindahkan ke sini dan mengecualikan yang buruk, yang, saya yakin, akan banyak :)

GiampaoloGabba pada 21 Mei 2020

❤2

Kedengarannya bagus @GiampaoloGabba , terima kasih!

jsuarezruiz pada 21 Mei 2020

@felipebaltazar Ini bisa menjadi sesuatu yang mirip dengan proposal untuk membuat transisi khusus di TabView xamarin/Xamarin.Forms#10773 Saya akan melakukan beberapa tes dan setelah itu kami akan meninjau Spec.

Kedengarannya bagus!!!!
Saya telah melakukan beberapa animasi pada repositori Xamarin.Forms.Skeleton , mungkin dapat membantu untuk ide-ide baru... Saya tidak tahu...

https://github.com/HorusSoftwareUY/Xamarin.Forms.Skeleton

felipebaltazar pada 21 Mei 2020

👍3

Apakah halaman ini membantu?

0 / 5 - 0 peringkat