XamlFlair

Xamlflair

Tujuan perpustakaan XAMLFLAIR adalah untuk memudahkan implementasi animasi umum dan memungkinkan pengembang untuk dengan mudah menambahkan satu set animasi gabungan atau hanya dengan beberapa baris XAML.

Memamerkan

Permainan teka -teki Sekuence

Mendukung saya

Jika Anda ingin mendukung pekerjaan saya dengan beberapa kopi, Anda dapat melakukannya di sini: belikan saya kopi. Bantuan Anda memungkinkan saya untuk terus menghabiskan waktu di proyek ini dan terus mempertahankan dan memperbarui dengan fitur baru jika memungkinkan. Terima kasih sebelumnya!

Isi

• Instal dari Nuget

• Tinjauan Fitur

• Konsep Dasar

• Penggunaan

• Jenis animasi dasar

• Animasi Warna ( WPF dan UNO saja )

• Mengesahkan nilai default global

• Menggunakan ResourceDictionary untuk pengaturan dasar

• Animasi default ( hanya WPF )

• Properti TransformOn ( hanya WPF )

• Rotasi perspektif ( hanya UWP )

• Menggabungkan animasi

• Nilai utama

• Terjemahan relatif pada sumbu x dan y

• Animasi majemuk

• Mengulang animasi

• Acara

• Binding

• Perintah penyelesaian primer dan sekunder

• Menggunakan Properti StartWith

• Menggunakan Properti AllowOpacityReset ( hanya WPF )

• Menggunakan properti ClipToBounds ( UWP dan uno saja )

• Animasi debugging

• Animasi logging

• ListViewBase ( UWP dan UNO ) dan Animasi ListBox -Based ( WPF )

Instal dari Nuget

Platform	Kemasan	Nuget
UWP	Xamlflair.uwp
WPF	Xamlflair.wpf
Uno	Xamlflair.uno

Untuk menginstal XAMLFLAIR , jalankan perintah berikut di Konsol Manajer Paket :

UWP:

 Install-Package XamlFlair.UWP

Aplikasi Anda harus menargetkan minimum Windows 10 Versi 1809 (Build 17763)

WPF:

 Install-Package XamlFlair.WPF

Uno:

 Install-Package XamlFlair.Uno

Aplikasi UWP Anda harus menargetkan minimum Windows 10 Versi 1809 (Build 18362)

Tinjauan Fitur

Fitur	UWP	WPF	UWP (UNO)	iOS (uno)	Android (UNO)	Wasm (UNO) Eksperimental
Sistem Animasi	Komposisi	Storyboard	Storyboard	Storyboard	Storyboard	Storyboard
Tipe mengubah	N/a	Transformgroup	Compositetransform	Compositetransform	Compositetransform	Compositetransform
Defaultanimations.xaml	-	✔	-	-	-	-
TransformOn	-	✔	-	-	-	-
Animasi majemuk	✔	✔	✔	✔	✔	✔
Terjemahan relatif	✔	✔	✔	✔	✔	✔
Mengulang animasi	✔	✔	✔	✔	✔	✔
Acara & Binding	✔	✔	✔	✔	✔	✔
Perintah Penyelesaian Primer/Sekunder	✔	✔	✔	✔	✔	✔
StartWith	✔	✔	✔	✔	✔	✔
AllowOpacityReset	-	✔	-	-	-	-
ClipToBounds	✔	N/a	✔	✔	✔	✔
Daftar animasi	✔	✔	✔	✔	✔	✔
Efek blur	✔	✔	-	-	-	-
Efek saturasi	✔	-	-	-	-	-
Efek warna	✔	-	-	-	-	-
Animasi warna	-	✔	✔	✔	✔	✔
Rotasi perspektif (putar)	✔	-	-	-	-	-
Animasi debugging	✔	✔	✔	✔	✔	-

Konsep Dasar

Konsep dasar XAMLFLAIR didasarkan pada animasi yang dikategorikan sebagai dari dan ke . Elemen UI apa pun yang terdiri dari animasi dari animasi akan dimulai dengan satu atau lebih nilai sewenang -wenang, dan lengkap menggunakan nilai default dari properti yang sesuai . Elemen UI apa pun yang terdiri dari animasi akan dimulai dalam keadaan saat ini dan menghidupkan ke satu atau lebih nilai sewenang -wenang .

Contoh dari animasi (elemen UI yang diterjemahkan ke nilai default terjemahan (0)):

Contoh animasi (elemen UI yang meluncur menjauh dari keadaan saat ini):

Catatan : Penting untuk dicatat ada pengecualian untuk aturan ini untuk animasi warna, yang dijelaskan di bagian Jenis Animasi Base.

Penggunaan

Untuk memulai, Anda harus memiliki referensi namespace XAML berikut:

UWP dan uno:

xmlns:xf="using:XamlFlair"

WPF:

xmlns:xf="clr-namespace:XamlFlair;assembly=XamlFlair.WPF"

Dari sini, ini adalah masalah sederhana untuk mengatur properti yang terlampir ke setiap FrameworkElement yang membutuhkan animasi:

< Border xf:Animations.Primary= " {StaticResource FadeIn} " />

Catatan : Jika FrameworkElement Anda mendefinisikan CompositeTransform di XAML Anda, itu akan diubah selama proses animasi.

CATATAN : Penggunaan StaticResource adalah untuk merujuk animasi umum global, yang dibahas di bagian selanjutnya.

Jenis animasi dasar

Memudar

Peringatan : Berhati -hatilah saat menjiwai FadeTo karena elemen tetap di pohon visual jika Visibility Visible . Mungkin ada kasus di mana Anda harus mengelola IsHitTestVisible secara manual untuk memungkinkan pengguna mengetuk elemen.

Menerjemahkan

Skala

Memutar

Blur ( hanya UWP dan WPF )

Jenuh ( hanya UWP )

Tint ( hanya UWP )

Warna ( WPF dan Uno saja )

Catatan : Penting untuk dicatat saat menjiwai warna menggunakan AROMASI AM , warna akan menghidupkan dari nilai yang ditentukan ke keadaan saat ini alih -alih nilai default.

Putar ( hanya UWP )

CATATAN : Baca rotasi perspektif bagian ( hanya UWP ) untuk perincian lebih lanjut.

Berikut ini mencantumkan beberapa nilai default yang terkenal saat bekerja dengan XAMLFLAIR:

• Jenis : Fadeto
• Durasi ( milidetik ): 500
• Pelonggaran : Kubik
• Mode pelonggaran : kemudahan
• TransformCenterPoint : (0,5, 0,5)
• Acara : dimuat
• InterElementDelay ( milidetik ): 25 ( hanya daftar kontrol )
• Transformon : Render ( hanya WPF )
• Saturation : 0,5 ( hanya UWP )
• Tint : Transparan ( hanya UWP )

Animasi Warna ( WPF dan UNO saja )

Animasi warna membutuhkan perhatian karena mereka sedikit berbeda dari animasi tipe dasar lainnya. Saat menggunakan ColorTo dan ColorFrom , berikut ini harus dilakukan:

• Anda hanya Control.BorderBrush menghidupkan sifat -sifat berikut: Control.Background TextBlock.Foreground Control.Foreground Shape.Stroke Border.BorderBrush , Border.Background Shape.Fill
• Pastikan untuk mengatur sikat pada properti yang sesuai yang ingin Anda berifosit
• Anda juga harus menentukan properti target menggunakan ColorOn

Contoh berikut akan menghidupkan Fill persegi panjang dari RoyalBlue ke Darkgreen:

< xf : AnimationSettings x : Key = " SampleColorAnimation "
                      Kind = " ColorTo "
                      Color = " DarkGreen "
                      ColorOn = " Fill " />

< Rectangle Fill = " RoyalBlue "
           xf:Animations.Primary= " {StaticResource SampleColorAnimation} " />

Mengesahkan nilai default global

Jika Anda memiliki kebutuhan untuk secara global mengubah salah satu nilai animasi default (misalnya, memiliki Duration default 750, bukan 500), Anda dapat menghubungi fungsi OverrideDefaultSettings dalam kode inisialisasi aplikasi Anda. Contoh berikut mengubah nilai default untuk Duration dan Easing :

 XamlFlair . Animations . OverrideDefaultSettings (
    duration : 750 ,
    easing : EasingType . Quadratic ) ;

Oleh karena itu, dengan kode sampel di atas, setiap animasi akan berjalan selama 750ms dengan pelonggaran kuadratik.

Menggunakan ResourceDictionary untuk pengaturan dasar

Semua animasi umum harus ditempatkan di global ResourceDictionary (mis: Animations.xaml ) dan digunakan jika diperlukan di seluruh aplikasi. Tujuannya adalah untuk mengkonsolidasikan semua animasi menjadi satu file dengan nama yang bermakna sehingga pengembang dapat memahami dengan tepat animasi apa yang diterapkan pada FrameworkElement . Inilah contoh kecil dari seperti apa:

< ResourceDictionary xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
                    xmlns : x = " http://schemas.microsoft.com/winfx/2006/xaml "
                    xmlns : xf = " using:XamlFlair " >

    < x : Double x : Key = " PositiveOffset " >50</ x : Double >
    < x : Double x : Key = " NegativeOffset " >-50</ x : Double >
    < x : Double x : Key = " SmallScaleFactor " >0.75</ x : Double >
    < x : Double x : Key = " LargeScaleFactor " >1.25</ x : Double >

    < xf : AnimationSettings x : Key = " FadeIn "
                          Kind = " FadeFrom "
                          Opacity = " 0 " />

    < xf : AnimationSettings x : Key = " FadeOut "
                          Kind = " FadeTo "
                          Opacity = " 0 " />

    <!-- Scale to a larger value -->
    < xf : AnimationSettings x : Key = " Expand "
                          Kind = " ScaleXTo,ScaleYTo "
                          ScaleX = " {StaticResource LargeScaleFactor} "
                          ScaleY = " {StaticResource LargeScaleFactor} " />

    <!-- Scale from a larger value -->
    < xf : AnimationSettings x : Key = " Contract "
                          Kind = " ScaleXFrom,ScaleYFrom "
                          ScaleX = " {StaticResource LargeScaleFactor} "
                          ScaleY = " {StaticResource LargeScaleFactor} " />
    .
    .
    .
    </ ResourceDictionary >

Untuk mengatur set AnimationSettings yang telah dikonfigurasi sebelumnya sudah tersedia di aplikasi Anda, lakukan langkah-langkah berikut:

1. Klik kanan pada proyek Anda, lalu klik Tambah> Item Baru ...
2. Pilih Kamus Sumber Daya dan beri nama Animations.xaml
3. Di App.xaml Anda, tambahkan yang berikut:

    < Application .Resources>
        < ResourceDictionary >
            < ResourceDictionary .MergedDictionaries>
                < ResourceDictionary Source = " Animations.xaml " />
            </ ResourceDictionary .MergedDictionaries>
        </ ResourceDictionary >
    </ Application .Resources>

4. Dalam Animations.xaml , salin & tempel konten dari tautan yang sesuai di bawah ini:

• Pengaturan Animasi untuk UWP

• Pengaturan Animasi untuk WPF

• Pengaturan Animasi untuk UNO

Aplikasi Anda sekarang memiliki serangkaian animasi umum global yang siap digunakan.

Animasi default ( hanya WPF )

Atau untuk membuat ResourceDictionary Anda sendiri yang berisi AnimationSettings kustom Anda, XAMLFLAIR menyediakan beberapa animasi default .

Untuk merujuk animasi default ini di aplikasi Anda, lakukan langkah -langkah berikut di App.xaml Anda:

1. Tentukan namespace XamlFlair.WPF di bagian atas:

    xmlns:xf="clr-namespace:XamlFlair;assembly=XamlFlair.WPF"

2. Perbarui Sumber Daya Aplikasi Anda:

    < Application .Resources>
        < ResourceDictionary >
            < ResourceDictionary .MergedDictionaries>
                < xf : XamlFlairResources />
            </ ResourceDictionary .MergedDictionaries>
        </ ResourceDictionary >
    </ Application .Resources>

Aplikasi Anda sekarang memiliki seperangkat animasi default global yang siap digunakan.

Jika Visual Studio Intellisense tidak berfungsi saat menggunakan <xf:XamlFlairResources /> , Anda mungkin ingin mencoba yang berikut ini sebagai gantinya:

    < Application .Resources>
        < ResourceDictionary >
            < ResourceDictionary .MergedDictionaries>
                < ResourceDictionary Source = " pack://application:,,,/XamlFlair.WPF;component/DefaultAnimations.xaml " />
            </ ResourceDictionary .MergedDictionaries>
        </ ResourceDictionary >
    </ Application .Resources>

Properti TransformOn ( hanya WPF )

Menggunakan properti TransformOn , Anda dapat menargetkan jenis RenderTransform mana yang berlaku untuk animasi Anda. Opsi yang tersedia adalah Render dan Layout . Ketika tidak ada yang ditentukan, Vale default Render . Inilah contoh keduanya:

Catatan : Sangat penting untuk dicatat bahwa LayoutTransform WPF tidak mendukung TranslateTransform apa pun, oleh karena itu menerjemahkan animasi tidak akan pernah berhasil. Anda dapat membaca lebih lanjut tentang hal itu di bagian Pernyataan di sini.

Rotasi perspektif ( hanya UWP )

Penting untuk dicatat bahwa untuk menerapkan rotasi perspektif (juga disebut sebagai Swivel ) ke elemen target, diperlukan bahwa itu dibungkus dalam wadah dengan sifat tata letak yang diterapkan pada elemen kontainer. Oleh karena itu, pertimbangkan rotasi perspektif sederhana berikut:

< xf : AnimationSettings x : Key = " PerspectiveVerticalRotation "
                      Kind = " SwivelYFrom "
                      SwivelY = " -45 " />

Alih -alih menjiwai elemen seperti itu:

< Rectangle Fill = " RoyalBlue "
           Width = " 200 "
           Height = " 200 "
           HorizontalAlignment = " Center "
           VerticalAlignment = " Center "
           xf:Animations.Primary= " {StaticResource PerspectiveVerticalRotation} " />

Elemen harus ditempatkan dalam wadah agar animasi berfungsi dengan benar:

< Border Width = " 200 "
        Height = " 200 "
        HorizontalAlignment = " Center "
        VerticalAlignment = " Center " >
    < Rectangle Fill = " RoyalBlue "
           xf:Animations.Primary= " {StaticResource PerspectiveVerticalRotation} " />
</ Border >

Menggabungkan animasi

Animasi dapat digabungkan, dan seperti yang disebutkan sebelumnya, salah satu dari animasi gabungan ini yang biasa digunakan harus ditempatkan di global ResourceDictionary (mis: Animations.xaml ):

< ResourceDictionary xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
                    xmlns : x = " http://schemas.microsoft.com/winfx/2006/xaml "
                    xmlns : xf = " using:XamlFlair " >
    .
    .
    .
    < xf : AnimationSettings x : Key = " FadeInAndSlideFromLeft "
                          Kind = " FadeFrom,TranslateXFrom "
                          Opacity = " 0 "
                          OffsetX = " {StaticResource NegativeOffset} " />

    < xf : AnimationSettings x : Key = " FadeInAndSlideFromTop "
                          Kind = " FadeFrom,TranslateYFrom "
                          Opacity = " 0 "
                          OffsetY = " {StaticResource NegativeOffset} " />

    < xf : AnimationSettings x : Key = " FadeInAndGrow "
                          Kind = " FadeFrom,ScaleXFrom,ScaleXFrom "
                          Opacity = " 0 "
                          ScaleX = " {StaticResource SmallScaleFactor} "
                          ScaleY = " {StaticResource SmallScaleFactor} " />

    < xf : AnimationSettings x : Key = " FadeInAndGrowHorizontally "
                          Kind = " FadeFrom,ScaleXFrom "
                          Opacity = " 0 "
                          ScaleX = " {StaticResource SmallScaleFactor} " />
    .
    .
    .
    </ ResourceDictionary >

Ini menunjukkan animasi gabungan dari FadeFrom dan TranslateFrom :

Ini menunjukkan animasi gabungan dari FadeFrom , TranslateFrom , dan ScaleFrom :

Nilai utama

Animasi dapat membuat pengaturannya ditimpa langsung di FrameworkElement . Ini umumnya dilakukan untuk mengubah nilai untuk keterlambatan dan durasi sehingga kami tidak terlalu mempopulasi file Animations.xaml dengan sumber daya berulang. Untuk mencapai overriding, gunakan ekstensi markup Animate yang dipasangkan dengan properti BasedOn :

< Border xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource ScaleFromBottom}, Delay=500} " />

Terjemahan relatif pada sumbu x dan y

Karena nilai-nilai yang dikodekan untuk OffsetX dan OffsetY dapat membatasi (seperti dalam kasus ketika berhadapan dengan jendela yang dapat diatur ulang), baik OffsetX dan OffsetY mendukung nilai berbasis bintang:

< Border xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource SlideFromLeft}, OffsetX=1.5*} " />

Nilai berbasis bintang akan menghitung offset berdasarkan pada ActualWidth saat ini dan/atau nilai ActualHeight dari FrameworkElement , oleh karena itu penting bahwa elemen tersebut telah melaksanakan acara Loaded . Jika ActualWidth dan/atau ActualHeight belum dihitung, nilai offset akan mencoba didasarkan pada Width dan/atau Height .

Animasi majemuk

Animasi majemuk hanyalah animasi multi-langkah menggunakan kelas CompoundSettings . Setiap animasi batin dieksekusi setelah yang sebelumnya selesai, karenanya mereka animasi berurutan:

< xf : CompoundSettings x : Key = " Compound " >
    < xf : CompoundSettings .Sequence>
        < xf : AnimationSettings Kind = " ScaleXTo "
                              ScaleX = " 1.25 "
                              Duration = " 1250 " />
        < xf : AnimationSettings Kind = " ScaleXTo "
                              ScaleX = " 1 "
                              Duration = " 1250 " />
        < xf : AnimationSettings Kind = " RotateTo "
                              Rotation = " 360 "
                              Duration = " 1250 " />
    </ xf : CompoundSettings .Sequence>
</ xf : CompoundSettings >

Catatan : CompoundSettings mendukung properti Event , yang dibahas di bagian selanjutnya.

Mengulang animasi

Animasi dapat diulangi dengan menggunakan IterationBehavior dan properti IterationCount (masing -masing nilai default Count dan 1 ).

Berikut ini menunjukkan cara menjalankan animasi hanya 5 kali:

< Border xf:Animations.Primary= " {StaticResource FadeIn} "
        xf:Animations.IterationCount= " 5 " />

Berikut ini menunjukkan cara menjalankan animasi tanpa batas:

< Border xf:Animations.Primary= " {StaticResource FadeIn} "
        xf:Animations.IterationBehavior= " Forever " />

Perhatikan juga bahwa juga dimungkinkan untuk mengulangi animasi majemuk. Misalnya, menggunakan animasi gabungan ( kemajuan bernama) dari bagian sebelumnya:

< Border xf:Animations.Primary= " {StaticResource Progress} "
        xf:Animations.IterationCount= " 5 " />

PERINGATAN : Saat menggunakan animasi berulang, Anda tidak dapat mengatur animasi Secondary pada elemen.

Penting untuk dicatat bahwa semua animasi XAMLFLAIR adalah animasi "kick-off" , dengan kata lain, mereka mulai dan hanya berhenti ketika mereka selesai (atau ketika elemen yang terkait membongkar), kecuali mengulang animasi. Animasi yang berulang dapat dihentikan saat memasok nilai false ke properti PrimaryBinding (binding dicakup di bagian selanjutnya):

< CheckBox x : Name = " SampleCheckBox "
          IsChecked = " False " />

< Rectangle xf:Animations.PrimaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
           xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} " />

Ketika false diatur pada ikatan, iterasi animasi saat ini akan berjalan sampai selesai dan kemudian animasi yang berulang akan berhenti.

Acara

Secara default, semua animasi dieksekusi ketika elemen animasi menembakkan acara Loaded . Perilaku ini dapat ditimpa dengan mengatur properti Event . Event dapat berupa acara apa pun yang diekspos dari elemen yang dianimasikan. Misalnya, untuk menjalankan animasi pada tombol saat diklik, acara Click dapat digunakan:

< Button xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeOut}, Event=Click} " />

Beberapa contoh peristiwa umum yang dapat digunakan:

• Dimuat ( nilai default )
• Visibilitas ( hanya memicu saat visibilitas == terlihat )
• DataContextChanged ( pemicu saat nilainya tidak nol )
• Pointerover
• Pointerexit
• Gotfocus
• Lostfocus

Ada beberapa kasus khusus yang perlu diperhatikan. Kasus khusus pertama adalah acara DataContextChanged . Saat menggunakan acara DataContextChanged , itu akan menembak ketika nilai DataContext berubah, kecuali untuk kasus di mana nilai null diatur, null disaring dan tidak akan memicu animasi.

Kasus khusus lainnya adalah Visibility . Meskipun tidak ada VisibilityChanged peristiwa yang diubah pada FrameworkElement , properti Visibility telah diperlakukan seperti peristiwa ketika nilai berubah karena dapat berguna untuk menghidupkan elemen ketika menjadi terlihat pada UI. Jika suatu animasi dipicu dengan Event=Visibility , itu hanya akan dipicu setiap kali nilai Visibile ditetapkan.

Binding

Salah satu nilai terpenting untuk Event adalah None , yang merupakan nilai yang digunakan untuk membatalkan pemicu animasi berbasis acara. Saat menentukan None , Anda perlu memicu animasi Anda secara manual menggunakan properti PrimaryBinding atau SecondaryBinding . Properti ini adalah tipe bool dan mengharapkan nilai True untuk menjalankan animasi yang sesuai. Berikut ini adalah contoh memicu animasi berdasarkan IsChecked dari kontrol kotak centang:

< CheckBox x : Name = " SampleCheckBox "
          IsChecked = " False " />

< Rectangle xf:Animations.PrimaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
           xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} " />

Animasi di atas hanya akan dieksekusi ketika IsChecked itu True . Jika None yang tidak ditentukan untuk Event , animasi kemudian akan dieksekusi pada Loaded dan pada ikatan.

Saat bekerja dengan PrimaryBinding dan SecondaryBinding yang bersama -sama (berdasarkan pada nilai boolean yang sama), mungkin lebih bersih dan lebih sederhana untuk menggunakan CombinedBinding . CombinedBinding hanya bertindak sebagai PrimaryBinding dan SecondaryBinding bersama. Alih -alih sebagai berikut:

< CheckBox x : Name = " SampleCheckBox "
          IsChecked = " False " />

< Rectangle xf:Animations.PrimaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
           xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} "
           xf:Animations.SecondaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox, Converter={StaticResource InverseBoolConverter}} "
           xf:Animations.Secondary= " {xf:Animate BasedOn={StaticResource FadeOut}, Event=None} "
           xf:Animations.StartWith= " {StaticResource FadeOut} " />

Anda akan menggunakannya seperti itu:

< CheckBox x : Name = " SampleCheckBox "
          IsChecked = " False " />

< Rectangle xf:Animations.CombinedBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
           xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} "
           xf:Animations.Secondary= " {xf:Animate BasedOn={StaticResource FadeOut}, Event=None} "
           xf:Animations.StartWith= " {StaticResource FadeOut} " />

Dengan menggunakan CombinedBinding dengan cara ini, ia menghemat untuk menggunakan konverter untuk nilai Boolean terbalik, yang ditangani secara internal.

Perintah penyelesaian primer dan sekunder

Mungkin ada skenario di mana Anda mungkin ingin menjalankan ICommand ketika animasi selesai. Dalam kasus seperti itu, ada dua properti: PrimaryCompletionCommand dan SecondaryCompletionCommand .

Dalam contoh berikut, perintah bernama MyCustomCommand akan mengeksekusi setelah animasi utama selesai:

< TextBlock Text = " Example of a completion command "
           xf:Animations.Primary= " {StaticResource FadeInAndSlideFromBottom} "
           xf:Animations.PrimaryCompletionCommand= " {x:Bind MyCustomCommand} " />

Menggunakan Properti StartWith

Akan ada kasus ketika Anda membutuhkan elemen UI Anda untuk memulai dalam keadaan tertentu, misalnya, elemen harus menyusut sebelum animasinya dijalankan. Ini dicapai dengan menggunakan properti StartWith :

< Rectangle xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource ScaleFromBottom}, Delay=500} "
           xf:Animations.StartWith= " {StaticResource ScaleFromBottom} " />

Dalam contoh di atas, karena elemen itu menskalakan dari bawah, tetapi dengan penundaan, kita perlu memulai pada posisi yang diskalakan , jadi kita menggunakan properti StartWith untuk mengatur keadaan awalnya. Apa yang pada dasarnya StartWith awal adalah mengatur nilai awal pada elemen segera setelah dimuat.

Menggunakan Properti AllowOpacityReset ( hanya WPF )

Dokumentasi .NET menyatakan berikut ini:

Dalam beberapa kasus, mungkin Anda tidak dapat mengubah nilai properti setelah dianimasikan. ... Anda harus menghentikan animasi dari mempengaruhi properti.

Mungkin ada kasus ketika Anda menghidupkan opacity, di mana animasi opacity tiba -tiba mengatur ulang nilainya alih -alih menjiwai, atau tidak berperilaku sesuai keinginan Anda. Dalam kasus, Anda mungkin perlu menetapkan AllowOpacityReset = False ( nilai default dari AllowOpacityReset adalah True ) untuk mencapai perilaku yang dimaksud:

< Image xf:Animations.Primary= " {StaticResource FadeInThenFadeOut} "
       xf:Animations.AllowOpacityReset= " False "
       Source = " /Assets/... " />

Menggunakan properti ClipToBounds ( UWP dan uno saja )

Properti bermanfaat yang ada di WPF, ClipToBounds adalah properti bermanfaat yang ada di WPF, tetapi sayangnya tidak di UWP. Oleh karena itu, telah ditambahkan di Xamlflair karena kemudahan penggunaan dan kepatuhannya. Untuk klip konten anak ke batas elemen yang mengandung, cukup atur ClipToBounds ke True pada elemen yang mengandung:

< Border xf:Layout.ClipToBounds= " True " >
.
.
.
< Border >

Animasi debugging

Untuk men -debug animasi dan masuk ke kode, gunakan properti EnableDebugging . Debugging dimungkinkan karena dimasukkannya perpustakaan Sourcelink. Pastikan untuk melakukan hal berikut:

< Rectangle xf:Animations.EnableDebugging= " InitializeElement "
           xf:Animations.Primary= " {StaticResource SlideFromLeft} " />

Tabel berikut menjelaskan nilai -nilai enumerasi:

Nilai enum	Keterangan
None	Nilai default. Tidak ada debugging yang akan terjadi.
InitializeElement	Breaks debugger dalam fungsi InitializeElement XAMLFLAIR.
RunAnimation	Breaks debugger dalam fungsi RunAnimation Xamlflair.

Animasi logging

Perpustakaan Xamlflair mengabstraksi loggingnya menggunakan Microsoft.Extensions.Logging.Abstractions . Di bawah ini adalah contoh logging menggunakan serilog di aplikasi UWP:

 public App ( )
{
    this . InitializeComponent ( ) ;
    .
    .
    .
    // Setup the Serilog logger
    Log . Logger = new LoggerConfiguration ( )
        . MinimumLevel . Debug ( )
        . WriteTo . Debug ( )
        . CreateLogger ( ) ;

    // Initalie the XamlFlair loggers using the LoggerFactory (with Serilog support)
	XamlFlair . Animations . InitializeLoggers ( new LoggerFactory ( ) . AddSerilog ( ) ) ;
}

Untuk mengeluarkan nilai -nilai satu atau lebih animasi, cukup atur Debug ke properti EnableLogging pada FrameworkElement target:

< Rectangle xf:Animations.EnableLogging= " Debug "
           xf:Animations.Primary= " {StaticResource SlideFromLeft} " />

Melakukan hal itu akan memberi Anda output konsol serupa berikut (sedikit berbeda untuk WPF):

 Element = Windows.UI.Xaml.Controls.Button
Kind = FadeFrom, TranslateFrom
TargetProperty = Translation
Duration = 500
Delay = 0
Opacity = 0
OffsetX = 0
OffsetY = 50
OffsetZ = 0
ScaleX = 1
ScaleY = 1
ScaleZ = 1
Rotation = 0
Blur = 0
TransformCenterPoint = 0.5,0.5
Easing = Cubic
EasingMode = EaseOut

Saat setiap storyboard dieksekusi, itu disimpan dalam daftar internal sampai selesai (atau dihentikan). Untuk mengeluarkan daftar internal ini, untuk sementara waktu menambahkan yang berikut dalam kode startup aplikasi Anda:

 Animations . EnableActiveTimelinesLogging = LogLevel . Debug ;

Melakukan hal itu akan memberi Anda output konsol serupa berikut:

 ---------- ALL ACTIVE TIMELINES --------
Active timeline removed at 12:42:26:43222

Element = Button,  Key = d69f826a-1978-4a4e-b516-4a6b0469238b,  ElementGuid = 195d8c13-1dd7-4fef-a7f3-fc78bdab1cd7
    State = Running,  IsSequence = False,  IsIterating = False,  IterationBehavior = Count,  IterationCount = 0
------------------------------------

---------- ACTIVE TIMELINE --------
Guid d69f826a-1978-4a4e-b516-4a6b0469238b - Updated state to: Completed at 12:42:26:88616
------------------------------------

---------- ALL ACTIVE TIMELINES --------
Active timeline removed at 12:42:26:89614

NO ACTIVE TIMELINES!
------------------------------------

Saat ini, semua penebangan di Xamlflair yang disebutkan di atas dicatat di LogLevel.Debug

ListViewBase ( UWP dan UNO ) dan Animasi ListBox -Based ( WPF )

Untuk mengimplementasikan animasi item dengan benar pada item daftar, itu tidak cukup untuk hanya membuat properti terlampir terhadap kontrol ListViewBase (UWP) dan ListBox (WPF). Sebagai gantinya, kontrol yang diwariskan dibuat: AnimatedListView dan AnimatedGridView untuk UWP, dan AnimatedListView dan AnimatedListBox untuk WPF, semuanya tersedia dari XamlFlair.Controls NAMESPACE:

UWP dan uno namespace:

xmlns:xfc="using:XamlFlair.Controls"

WPF Namespace:

xmlns:xfc="clr-namespace:XamlFlair.Controls;assembly=XamlFlair.WPF"

Animasi item dalam daftar sedikit berbeda dari menjiwai elemen UI yang khas. Alasan utama untuk perbedaan ini adalah bahwa nilai Event pada AnimationSettings yang sesuai tidak dapat diubah dari nilai defaultnya. Oleh karena itu berikut ini tidak valid :

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations:Items= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=Visibility} " />

Daftar Animasi Item, Secara Default , Animate Berdasarkan Peristiwa Loaded dari setiap item yang terlihat , dan juga berdasarkan pembaruan ke properti ItemsSource dari Kontrol Daftar. Untuk menonaktifkan perilaku default ini, dua properti berikut dapat digunakan secara independen:

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations.AnimateOnLoad= " False "
                      ... />

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations.AnimateOnItemsSourceChange= " False "
                      ... />

Secara default, animasi item memiliki keterlambatan 25 milidetik antara setiap item. Nilai ini dapat diubah menggunakan properti InterElementDelay :

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations.InterElementDelay= " 50 "
                      ... />

Sama seperti PrimaryBinding dan SecondaryBinding , animasi item dapat dipicu oleh ikatan dengan penggunaan properti ItemsBinding :

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations.AnimateOnLoad= " False "
                      xf:Animations.ItemsBinding= " {Binding MyViewModelProperty} "
                      xf:Animations:Items= " {xf:Animate BasedOn={StaticResource FadeIn}} " />

PERINGATAN ( hanya UWP ) : Perlu diketahui bahwa jika Anda memiliki ItemContainerTransitions yang ditetapkan pada AnimatedListView atau AnimatedGridView , mereka akan dihapus. Ini dilakukan untuk menghindari animasi item yang bertentangan.

Catatan ( hanya uno ) : Untuk menghindari berkedip pada animasi item, saat ini ada kendala di tempat: Animasi Items harus berisi FadeFrom .