Bagikan melalui

Animasi yang dipaparkan dalam storyboard

Animasi papan cerita bukan hanya animasi dalam arti visual. Animasi berbingkai adalah cara untuk mengubah nilai properti dependensi dalam bentuk fungsi waktu. Salah satu alasan utama Anda mungkin memerlukan animasi papan cerita yang bukan dari pustaka animasi adalah untuk menentukan status visual untuk kontrol, sebagai bagian dari templat kontrol atau definisi halaman.

Menentukan animasi berstoryboard

Animasi berbingkai adalah cara untuk mengubah nilai properti dependensi dalam bentuk fungsi waktu. Properti yang Anda animasikan tidak selalu merupakan properti yang secara langsung memengaruhi UI aplikasi Anda. Tetapi karena XAML adalah tentang mendefinisikan UI untuk aplikasi, biasanya itu adalah properti terkait UI yang Anda animasikan. Misalnya, Anda dapat menganimasikan sudut RotateTransform, atau nilai warna latar belakang tombol.

Salah satu alasan utama Anda mungkin mendefinisikan animasi yang menggunakan papan cerita adalah jika Anda adalah penulis kontrol atau membuat ulang templat kontrol, dan Anda menentukan status visual. Untuk informasi selengkapnya, silakan melihat Animasi yang dibuat storyboard untuk status visual.

Baik Anda mendefinisikan status visual atau animasi kustom untuk aplikasi, konsep dan API untuk animasi papan cerita yang dijelaskan dalam topik ini sebagian besar berlaku untuk keduanya.

Agar dapat dianimasikan, properti yang Anda targetkan dengan animasi storyboard harus menjadi properti dependensi. Properti dependensi adalah fitur utama dari implementasi Windows Runtime XAML. Properti yang dapat ditulis dari elemen UI yang paling umum biasanya diimplementasikan sebagai properti dependensi, sehingga Anda dapat menganimasikannya, menerapkan nilai terikat data, atau menerapkan Gaya dan menargetkan properti dengan Setter. Untuk informasi selengkapnya tentang cara kerja properti dependensi, lihat Gambaran umum properti Dependensi.

Sebagian besar waktu, Anda mendefinisikan animasi storyboard dengan menulis XAML. Jika Anda menggunakan alat seperti Microsoft Visual Studio, alat ini akan menghasilkan XAML untuk Anda. Dimungkinkan untuk menentukan animasi storyboard menggunakan kode juga, tetapi itu kurang umum.

Mari kita lihat contoh sederhana. Dalam contoh XAML ini, properti Opacity dianimasikan pada objek Persegi panjang tertentu.

<Page ...>
  <Page.Resources>
    <!-- Storyboard resource: Animates a rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"/>
    </Storyboard>
  </Page.Resources>

  <!--Page root element, UI definition-->
  <Grid>
    <Rectangle x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue"/>
  </Grid>
</Page>

Mengidentifikasi objek untuk dianimasikan

Dalam contoh sebelumnya, papan cerita menganimasikan properti Opacity dari Persegi Panjang. Anda tidak mendeklarasikan animasi pada objek itu sendiri. Sebagai gantinya, Anda melakukan ini dalam definisi animasi papan cerita. Storyboard biasanya didefinisikan dalam XAML yang tidak langsung berdekatan dengan definisi XAML UI dari objek yang ingin dianimasikan. Sebaliknya, mereka biasanya disiapkan sebagai sumber daya XAML.

Untuk menyambungkan animasi ke target, Anda mereferensikan target dengan mengidentifikasi nama pemrogramannya. Anda harus selalu menerapkan atribut x:Name dalam definisi XAML UI untuk memberi nama objek yang ingin Anda animasikan. Anda kemudian menargetkan objek untuk dianimasikan dengan mengatur Storyboard.TargetName dalam definisi animasi. Untuk nilai Storyboard.TargetName, Anda menggunakan string nama objek target, yang merupakan apa yang Anda tetapkan sebelumnya dan di tempat lain dengan atribut x:Name.

Menargetkan properti dependensi untuk tujuan animasi

Anda menetapkan nilai untuk Storyboard.TargetProperty dalam animasi. Ini menentukan properti spesifik objek yang ditargetkan mana yang dianimasikan.

Terkadang Anda perlu menargetkan properti yang bukan merupakan properti langsung dari objek target, melainkan yang bersarang lebih dalam di dalam relasi objek-properti. Anda sering kali perlu melakukan ini untuk menelusuri lebih dalam ke dalam sekumpulan objek dan nilai properti yang berkontribusi hingga Anda dapat mereferensikan jenis properti yang dapat dianimasikan (Double, Point, Color). Konsep ini disebut penargetan tidak langsung, dan sintaks untuk menargetkan properti dengan cara ini dikenal sebagai jalur properti.

Berikut ini contohnya. Salah satu skenario umum untuk animasi storyboard adalah mengubah warna bagian dari UI aplikasi atau kontrol untuk mewakili bahwa kontrol berada dalam status tertentu. Katakanlah Anda ingin menganimasikan Latar DepanTextBlock, sehingga berubah dari merah ke hijau. Anda mungkin mengharapkan bahwa ColorAnimation terlibat, dan itu benar. Namun, pada elemen UI, tidak ada properti yang memengaruhi warna objek yang sebenarnya berjenis Color. Sebaliknya, mereka berjenis Brush. Jadi yang sebenarnya perlu Anda targetkan untuk animasi adalah properti Warna dari kelas SolidColorBrush , yang merupakan jenis turunan Brush yang biasanya digunakan untuk properti UI terkait warna ini. Dan inilah bagaimana tampilan dalam membentuk jalur properti untuk menargetkan properti animasi Anda:

<Storyboard x:Name="myStoryboard">
  <ColorAnimation
    Storyboard.TargetName="tb1"
    Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
    From="Red" To="Green"/>
</Storyboard>

Berikut cara memikirkan sintaksis ini dalam hal bagian-bagiannya:

  • Setiap set tanda kurung () mengapit nama properti.
  • Dalam nama properti, ada titik, dan titik tersebut memisahkan nama jenis dan nama properti, sehingga properti yang Anda identifikasi tidak ambigu.
  • Titik yang ada di tengah dan bukan di dalam tanda kurung adalah suatu langkah. Ini ditafsirkan oleh sintaks yang berarti; mengambil nilai properti pertama (yang merupakan objek), melangkah ke model objeknya, dan menargetkan sub-properti tertentu dari nilai properti pertama.

Berikut adalah daftar skenario penargetan animasi di mana Anda mungkin akan menggunakan penargetan properti tidak langsung, dan beberapa string jalur properti yang mendekati sintaks yang akan Anda gunakan:

Anda akan melihat beberapa contoh ini menggunakan tanda kurung siku di sekitar angka. Ini adalah pengindeks. Ini menunjukkan bahwa nama properti sebelumnya memiliki koleksi sebagai nilai, dan Anda menginginkan item (seperti yang diidentifikasi oleh indeks berbasis nol) dari dalam koleksi tersebut.

Anda juga dapat menganimasikan properti terlampir XAML. Selalu sertakan nama properti terlampir lengkap dalam tanda kurung, misalnya (Canvas.Left). Untuk informasi selengkapnya, lihat Menganimasikan properti terlampir XAML.

Untuk informasi selengkapnya tentang cara menggunakan jalur properti untuk penargetan tidak langsung properti untuk dianimasikan, lihat Sintaks jalur properti.

Jenis animasi

Sistem animasi Windows Runtime memiliki tiga jenis spesifik yang dapat menjadi target untuk animasi yang dibuat dengan teknik storyboard.

Ada juga jenis animasi Objek umum untuk nilai referensi objek, yang akan kita bahas nanti.

Menentukan nilai animasi

Sejauh ini kami telah menunjukkan kepada Anda cara menargetkan objek dan properti untuk dianimasikan, tetapi belum menjelaskan apa yang dilakukan animasi ke nilai properti saat dijalankan.

Jenis animasi yang kami jelaskan kadang-kadang dikenal sebagai animasi Dari/Ke/Oleh. Ini berarti bahwa animasi mengubah nilai properti, dari waktu ke waktu, menggunakan satu atau beberapa input ini yang berasal dari definisi animasi:

  • Nilai dimulai pada nilai Dari . Jika Anda tidak menentukan nilai Dari , nilai awal adalah nilai apa pun yang dimiliki properti animasi pada saat sebelum animasi berjalan. Ini mungkin nilai default, nilai dari gaya atau templat, atau nilai yang secara khusus diterapkan oleh definisi UI XAML atau kode aplikasi.
  • Di akhir animasi, nilainya adalah nilai Kepada .
  • Atau, untuk menentukan nilai akhir relatif terhadap nilai awal, atur properti Menurut . Anda akan mengatur ini alih-alih properti Kepada .
  • Jika Anda tidak menentukan nilai Kepada atau nilai Menurut , nilai akhir adalah nilai apa pun yang dimiliki properti animasi pada saat sebelum animasi berjalan. Dalam hal ini, Anda lebih baik memiliki nilai Dari karena jika tidak, animasi tidak akan mengubah nilai sama sekali; nilai awal dan akhir keduanya sama.
  • Animasi biasanya memiliki setidaknya satu elemen seperti From, By, atau To, tetapi tidak pernah ketiganya sekaligus.

Mari kita lihat kembali contoh XAML sebelumnya dan lihat lagi nilai Dari dan Ke , dan Durasi. Contohnya adalah menganimasikan properti Opacity , dan jenis properti Opacity adalah Double. Jadi animasi yang digunakan di sini adalah DoubleAnimation.

From="1.0" To="0.0" menentukan bahwa ketika animasi berjalan, properti Opacity dimulai pada nilai 1 dan menganimasikan ke 0. Dengan kata lain, dalam hal arti nilai Double ini terhadap properti Opacity, animasi ini akan menyebabkan objek mulai sepenuhnya opak dan kemudian berubah menjadi transparan.

...
<Storyboard x:Name="myStoryboard">
  <DoubleAnimation
    Storyboard.TargetName="MyAnimatedRectangle"
    Storyboard.TargetProperty="Opacity"
    From="1.0" To="0.0" Duration="0:0:1"/>
</Storyboard>
...

Duration="0:0:1" menentukan berapa lama animasi berlangsung, yaitu seberapa cepat persegi panjang memudar. Properti Durasi ditentukan dalam bentuk jam:menit:detik. Durasi waktu dalam contoh ini adalah satu detik.

Untuk informasi selengkapnya tentang Nilai durasi dan sintaks XAML, lihat Durasi.

Nota

Untuk contoh yang kami tunjukkan, jika Anda yakin bahwa status awal objek yang dianimasikan memiliki Opacity selalu sama dengan 1, baik melalui default atau set eksplisit, Anda dapat menghilangkan nilai Dari , animasi akan menggunakan nilai awal implisit, dan hasilnya akan sama.

Dari/Ke/Oleh bisa bernilai null

Kami menyebutkan sebelumnya bahwa Anda dapat menghilangkan Dari, Ke atau Oleh dan dengan demikian menggunakan nilai non-animasi saat ini sebagai pengganti nilai yang hilang. Dari, Ke, atau Menurut properti animasi bukan tipe yang mungkin Anda tebak. Misalnya jenis properti DoubleAnimation.To bukan Double. Sebaliknya, ini adalah Nullable untuk Double. Dan nilai defaultnya adalah null, bukan 0. Nilai null tersebut adalah bagaimana sistem animasi membedakan bahwa Anda belum secara khusus menetapkan nilai untuk properti Dari, Ke, atau Menurut .

Properti animasi lainnya

Properti berikutnya yang dijelaskan di bagian ini semuanya opsional karena memiliki default yang sesuai untuk sebagian besar animasi.

Pembalikan Otomatis

Jika Anda tidak menentukan AutoReverse atau RepeatBehavior pada animasi, animasi tersebut akan berjalan sekali, dan berjalan untuk waktu yang ditentukan sebagai Durasi.

Properti AutoReverse menentukan apakah garis waktu diputar secara terbalik setelah mencapai akhir Durasinya. Jika Anda mengaturnya ke true, animasi akan berbalik setelah mencapai akhir Durasi yang dinyatakan, mengubah nilai dari nilai akhirnya (Ke) kembali ke nilai awalnya (Dari). Ini berarti bahwa animasi secara efektif berjalan selama dua kali lipat dari Durasinya.

RepeatBehavior

Properti RepeatBehavior menentukan berapa kali garis waktu diputar, atau durasi lebih panjang di mana garis waktu seharusnya diulang. Secara default, garis waktu memiliki jumlah iterasi "1x", yang berarti diputar satu kali untuk Durasinya dan tidak diulang.

Anda dapat menyebabkan animasi menjalankan beberapa iterasi. Misalnya, nilai "3x" menyebabkan animasi berjalan tiga kali. Atau, Anda dapat menentukan Durasi yang berbeda untuk RepeatBehavior. Durasi itu harus lebih lama dari Durasi animasi itu sendiri agar efektif. Misalnya, jika Anda menentukan RepeatBehavior "0:0:10", untuk animasi yang memiliki Durasi "0:0:2", animasi tersebut berulang lima kali. Jika ini tidak dibagi secara merata, animasi akan terpotong pada saat waktu repeatBehavior tercapai, yang mungkin sebagian dilalui. Terakhir, Anda dapat menentukan nilai khusus "Selamanya", yang menyebabkan animasi berjalan tanpa batas sampai sengaja dihentikan.

Untuk informasi selengkapnya tentang nilai RepeatBehavior dan sintaks XAML, lihat RepeatBehavior.

FillBehavior="Stop"

Secara bawaan, ketika animasi berakhir, animasi meninggalkan nilai properti sebagai nilai akhir Ke atau dimodifikasi oleh-nilai bahkan setelah durasi animasi selesai. Namun, jika Anda menetapkan nilai properti FillBehavior ke FillBehavior.Stop, nilai nilai animasi kembali ke nilai apa pun sebelum animasi diterapkan, atau lebih tepatnya ke nilai efektif saat ini seperti yang ditentukan oleh sistem properti dependensi (untuk informasi selengkapnya tentang perbedaan ini, lihat Gambaran umum properti Dependensi).

WaktuMulai

Secara bawaan, BeginTime animasi adalah "0:0:0", sehingga animasi dimulai segera setelah Storyboard tersebut berjalan. Anda dapat mengubah ini jika Storyboard berisi lebih dari satu animasi dan Anda ingin menjadwalkan waktu mulai yang berbeda untuk animasi lainnya dibandingkan dengan animasi awal, atau untuk menciptakan penundaan singkat yang disengaja.

SpeedRatio

Jika Anda memiliki lebih dari satu animasi di Storyboard , Anda dapat mengubah tingkat waktu satu atau beberapa animasi relatif terhadap Storyboard. Ini adalah Storyboard induk yang pada akhirnya mengontrol bagaimana waktu Durasi berlalu saat animasi berjalan. Properti ini tidak sering digunakan. Untuk informasi selengkapnya, lihat SpeedRatio.

Menentukan lebih dari satu animasi di Storyboard

Konten Storyboard dapat berupa lebih dari satu definisi animasi. Anda mungkin memiliki lebih dari satu animasi jika Anda menerapkan animasi terkait ke dua properti dari objek target yang sama. Misalnya, Anda dapat mengubah properti TranslateX dan TranslateY dari TranslateTransform yang digunakan sebagai RenderTransform dari elemen UI; ini akan menyebabkan elemen menerjemahkan secara diagonal. Anda memerlukan dua animasi berbeda untuk mencapainya, tetapi Anda mungkin ingin animasi menjadi bagian dari Storyboard yang sama karena Anda selalu ingin kedua animasi tersebut dijalankan bersama-sama.

Animasi tidak harus berjenis yang sama, atau menargetkan objek yang sama. Mereka dapat memiliki durasi yang berbeda, dan tidak perlu berbagi nilai properti apa pun.

Ketika Storyboard induk berjalan, masing-masing animasi di dalamnya juga akan berjalan.

Kelas Storyboard sebenarnya memiliki banyak properti animasi yang sama seperti jenis animasi, karena keduanya berbagi kelas dasar Garis Waktu . Dengan demikian, Storyboard dapat memiliki RepeatBehavior, atau BeginTime. Biasanya Anda tidak mengatur ini pada Storyboard kecuali Anda ingin semua animasi yang terkandung memiliki perilaku tersebut. Sebagai aturan umum, properti Garis Waktu apa pun seperti yang ditetapkan pada Storyboard berlaku untuk semua animasi anaknya. Jika dibiarkan tidak diatur, Storyboard memiliki durasi implisit yang dihitung dari nilai Durasi terpanjang dari animasi yang terkandung. Durasi yang diatur secara eksplisit pada Storyboard yang lebih pendek dari salah satu animasi anaknya akan menyebabkan animasi tersebut terputus, yang biasanya tidak diinginkan.

Papan cerita tidak boleh berisi dua animasi yang mencoba menargetkan dan menganimasikan properti yang sama pada objek yang sama. Jika Anda mencoba ini, Anda akan mendapatkan kesalahan runtime saat papan cerita mencoba berjalan. Pembatasan ini berlaku bahkan jika animasi tidak tumpang tindih dalam waktu karena nilai dan durasi BeginTime yang sengaja berbeda. Jika Anda benar-benar ingin menerapkan garis waktu animasi yang lebih kompleks ke properti yang sama dalam satu papan cerita, cara untuk melakukan ini adalah dengan menggunakan animasi bingkai kunci. Lihat Animasi keyframe dan fungsi easing.

Sistem animasi dapat menerapkan lebih dari satu animasi ke nilai properti, jika input tersebut berasal dari beberapa papan cerita. Penggunaan perilaku ini secara sengaja untuk menjalankan papan cerita secara bersamaan adalah hal yang tidak umum. Namun ada kemungkinan bahwa animasi yang ditentukan aplikasi yang Anda terapkan ke properti kontrol akan memodifikasi nilai HoldEnd animasi yang sebelumnya dijalankan sebagai bagian dari model status visual kontrol.

Menentukan papan cerita sebagai sumber daya

Papan Cerita adalah kontainer tempat Anda memasukkan objek animasi. Anda biasanya mendefinisikan Storyboard sebagai sumber daya yang tersedia untuk objek yang ingin Anda animasikan, baik di Sumber Daya tingkat halaman atau Application.Resources.

Contoh berikutnya ini menunjukkan bagaimana contoh Storyboard sebelumnya akan dimuat dalam definisi Sumber Daya tingkat halaman, di mana Storyboard adalah sumber daya kunci dari Halaman akar. Perhatikan atribut x:Name. Atribut ini adalah cara Anda menentukan nama variabel untuk Storyboard, sehingga elemen lain di XAML serta kode dapat merujuk ke Storyboard nanti.

<Page ...>
  <Page.Resources>
    <!-- Storyboard resource: Animates a rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"/>
    </Storyboard>
  </Page.Resources>
  <!--Page root element, UI definition-->
  <Grid>
    <Rectangle x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue"/>
  </Grid>
</Page>

Menentukan sumber daya di akar XAML dari file XAML seperti page.xaml atau app.xaml adalah praktik umum tentang cara mengatur sumber daya utama di XAML Anda. Anda juga dapat memperhitungkan sumber daya ke dalam file terpisah dan menggabungkannya ke dalam aplikasi atau halaman. Untuk informasi selengkapnya, lihat Referensi sumber daya ResourceDictionary dan XAML.

Nota

Windows Runtime XAML mendukung identifikasi sumber daya baik menggunakan atribut x:Key atau atribut x:Name. Menggunakan atribut x:Name lebih umum untuk Storyboard, karena Anda akhirnya ingin mereferensikannya berdasarkan nama variabel, sehingga Anda dapat memanggil metode Mulai dan menjalankan animasi. Jika Anda menggunakan atribut x:Key, Anda harus menggunakan metode ResourceDictionary seperti pengindeks Item untuk mengambilnya sebagai sumber daya kunci lalu mentransmisikan objek yang diambil ke Storyboard untuk menggunakan metode Storyboard .

Papan cerita untuk status visual

Anda juga menempatkan animasi Anda dalam unit Storyboard saat Anda mendeklarasikan animasi status visual untuk tampilan visual kontrol. Dalam hal ini elemen Storyboard yang Anda tentukan masuk ke kontainer VisualState yang berlapis lebih dalam dalam Gaya (ini adalah Gaya yang merupakan sumber daya kunci). Anda tidak memerlukan kunci atau nama untuk Storyboard Anda dalam hal ini karena VisualState yang memiliki nama target yang dapat dipanggil VisualStateManager . Gaya untuk kontrol sering diperhitungkan ke dalam file XAML ResourceDictionary terpisah daripada ditempatkan di halaman atau kumpulan Sumber Daya aplikasi. Untuk informasi selengkapnya, silakan melihat Animasi yang dibuat storyboard untuk status visual.

Animasi dependen dan independen

Pada titik ini kita perlu memperkenalkan beberapa poin penting tentang cara kerja sistem animasi. Secara khusus, animasi berinteraksi secara mendasar dengan bagaimana aplikasi Windows Runtime dirender ke layar, dan bagaimana penyajian tersebut menggunakan utas pemrosesan. Aplikasi Windows Runtime selalu memiliki utas UI utama, dan utas ini bertanggung jawab untuk memperbarui layar dengan informasi saat ini. Selain itu, aplikasi Windows Runtime memiliki utas komposisi, yang digunakan untuk menghitung tata letak sebelum ditampilkan. Ketika Anda menganimasikan UI, ada kemungkinan menimbulkan banyak pekerjaan untuk utas UI. Sistem harus menggambar ulang area layar yang besar menggunakan interval waktu yang cukup singkat di antara setiap refresh. Ini diperlukan untuk menangkap nilai properti terbaru dari properti animasi. Jika Anda tidak berhati-hati, ada risiko bahwa animasi dapat membuat UI kurang responsif, atau akan memengaruhi performa fitur aplikasi lain yang juga berada di utas UI yang sama.

Variasi animasi yang memiliki risiko tertentu memperlambat utas UI disebut animasi dependen. Animasi yang tidak tunduk pada risiko ini adalah animasi independen. Perbedaan antara animasi dependen dan independen tidak hanya ditentukan oleh jenis animasi (DoubleAnimation dan sebagainya) seperti yang kami jelaskan sebelumnya. Sebaliknya, ini ditentukan oleh properti tertentu yang Anda animasikan, dan faktor lain seperti warisan dan komposisi kontrol. Ada kondisi di mana meskipun animasi mengubah antarmuka, animasi tersebut dapat memberikan dampak minimal pada thread antarmuka dan sebagai gantinya dapat ditangani oleh thread komposisi sebagai animasi yang independen.

Animasi independen jika memiliki salah satu karakteristik ini:

Peringatan

Agar animasi Anda diperlakukan sebagai independen, Anda harus secara eksplisit mengatur Duration="0". Misalnya, jika Anda menghapus Duration="0" dari XAML ini, animasi diperlakukan sebagai dependen, meskipun KeyTime bingkai adalah "0:0:0".

<Storyboard>
  <DoubleAnimationUsingKeyFrames
    Duration="0"
    Storyboard.TargetName="Button2"
    Storyboard.TargetProperty="Width">
    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="200"/>
  </DoubleAnimationUsingKeyFrames>
</Storyboard>

Jika animasi Anda tidak memenuhi kriteria ini, mungkin animasi dependen. Secara default, sistem animasi tidak akan menjalankan animasi dependen. Jadi selama proses pengembangan dan pengujian, Anda bahkan mungkin tidak melihat animasi Anda berjalan. Anda masih dapat menggunakan animasi ini, tetapi Anda harus secara khusus mengaktifkan setiap animasi dependen tersebut. Untuk mengaktifkan animasi Anda, atur properti EnableDependentAnimation objek animasi ke true. (Setiap subkelas Garis Waktu yang mewakili animasi memiliki implementasi properti yang berbeda tetapi semuanya bernama EnableDependentAnimation.)

Persyaratan mengaktifkan animasi dependen yang menjadi tanggung jawab pengembang aplikasi adalah aspek desain yang disengaja dari sistem animasi dan pengalaman pengembangan. Kami ingin pengembang menyadari bahwa animasi memiliki biaya kinerja untuk responsivitas UI Anda. Animasi berkinerja buruk sulit untuk diisolasi dan di-debug dalam aplikasi skala penuh. Jadi lebih baik mengaktifkan hanya animasi dependen yang benar-benar Anda butuhkan untuk pengalaman UI aplikasi Anda. Kami tidak ingin membuatnya terlalu mudah untuk membahayakan performa aplikasi Anda karena animasi dekoratif yang menggunakan banyak siklus. Untuk informasi selengkapnya tentang tips performa untuk animasi, lihat Mengoptimalkan animasi dan media.

Sebagai pengembang aplikasi, Anda juga dapat memilih untuk menerapkan pengaturan di seluruh aplikasi yang selalu menonaktifkan animasi dependen, bahkan pengaturan di mana EnableDependentAnimationbenar. Lihat Timeline.AllowDependentAnimations.

Petunjuk / Saran

Jika Anda menggunakan Panel Animasi di Blend untuk Visual Studio 2019, setiap kali Anda mencoba menerapkan animasi dependen ke properti status visual, peringatan akan ditampilkan di perancang. Peringatan tidak akan ditampilkan dalam output build atau Daftar Kesalahan. Jika Anda mengedit XAML dengan tangan, perancang tidak akan menampilkan peringatan. Pada runtime saat debug, output Debug panel Output akan menampilkan peringatan bahwa animasi yang tidak independen akan dilewati.

Memulai dan mengontrol animasi

Segala sesuatu yang telah kami tunjukkan kepada Anda sejauh ini tidak benar-benar menyebabkan animasi berjalan atau diterapkan! Sampai animasi dimulai dan berjalan, perubahan nilai yang dinyatakan oleh animasi dalam XAML bersifat tersembunyi dan belum akan terjadi. Anda harus secara eksplisit memulai animasi dengan beberapa cara yang terkait dengan masa pakai aplikasi atau pengalaman pengguna. Pada tingkat paling sederhana, Anda memulai animasi dengan memanggil metode Begin di Storyboard yang merupakan induk untuk animasi tersebut. Anda tidak dapat memanggil metode dari XAML secara langsung, jadi apa pun yang Anda lakukan untuk mengaktifkan animasi Anda, Anda akan melakukannya dari kode. Itu akan menjadi kode di belakang untuk halaman atau komponen aplikasi Anda, atau mungkin logika kontrol Anda jika Anda menentukan kelas kontrol kustom.

Biasanya, Anda akan memanggil Mulai dan membiarkan animasi berjalan hingga durasinya selesai. Namun, Anda juga dapat menggunakan metode Jeda, Lanjutkan , dan Hentikan untuk mengontrol Storyboard pada run-time, serta API lain yang digunakan untuk skenario kontrol animasi yang lebih canggih.

Saat Anda memanggil Mulai di papan cerita yang berisi animasi yang berulang tanpa batas (RepeatBehavior="Forever"), animasi tersebut berjalan hingga halaman yang berisinya dibongkar, atau Anda secara khusus memanggil Jeda atau Berhenti.

Memulai animasi dari kode aplikasi

Anda dapat memulai animasi secara otomatis, atau sebagai respons terhadap tindakan pengguna. Untuk kasus otomatis, Anda biasanya menggunakan peristiwa seumur hidup objek seperti Dimuat untuk bertindak sebagai pemicu animasi. Peristiwa Dimuat adalah peristiwa yang baik untuk digunakan untuk ini karena pada saat itu UI siap untuk interaksi, dan animasi tidak akan dipotong di awal karena bagian lain dari UI masih dimuat.

Dalam contoh ini, peristiwa PointerPressed dilampirkan ke persegi panjang sehingga ketika pengguna mengklik persegi panjang, animasi dimulai.

<Rectangle PointerPressed="Rectangle_Tapped"
  x:Name="MyAnimatedRectangle"
  Width="300" Height="200" Fill="Blue"/>

Pengendali kejadian memulai Storyboard (animasi) dengan menggunakan metode Mulai dari Storyboard.

myStoryboard.Begin();

myStoryboard().Begin();

Anda dapat menangani peristiwa Selesai jika Anda ingin logika lain berjalan setelah animasi selesai menerapkan nilai. Selain itu, untuk pemecahan masalah interaksi sistem/animasi properti, metode GetAnimationBaseValue dapat berguna.

Petunjuk / Saran

Setiap kali Anda mengodekan untuk skenario aplikasi di mana Anda memulai animasi dari kode aplikasi, Anda mungkin ingin meninjau lagi apakah animasi atau transisi sudah ada di pustaka animasi untuk skenario UI Anda. Pustaka animasi menghadirkan pengalaman UI yang lebih konsisten di semua aplikasi Windows Runtime, serta lebih mudah digunakan.

Animasi untuk status visual

Perilaku eksekusi untuk Storyboard yang digunakan untuk menentukan status visual kontrol berbeda dari cara aplikasi mungkin menjalankan storyboard secara langsung. Seperti yang diterapkan pada definisi status visual di XAML, Storyboard adalah elemen dari VisualState yang berisi, dan status secara keseluruhan dikontrol dengan menggunakan VISUALStateManager API. Animasi apa pun di dalamnya akan berjalan sesuai dengan nilai animasi dan properti Garis Waktunya saat VisualState yang berisi digunakan oleh kontrol. Untuk informasi selengkapnya, lihat Storyboards untuk status visual. Untuk status visual, FillBehavior yang jelas berbeda. Jika status visual diubah ke status lain, semua perubahan properti yang diterapkan oleh status visual sebelumnya dan animasinya dibatalkan, bahkan jika status visual baru tidak secara khusus menerapkan animasi baru ke properti.

Storyboard dan EventTrigger

Ada salah satu cara untuk memulai animasi yang dapat dideklarasikan sepenuhnya di XAML. Namun, teknik ini tidak banyak digunakan lagi. Ini adalah sintaksis warisan dari WPF dan versi awal Silverlight sebelum dukungan VisualStateManager . Sintaks EventTrigger ini masih berfungsi di Windows Runtime XAML untuk alasan impor/kompatibilitas, tetapi hanya berfungsi untuk perilaku pemicu berdasarkan peristiwa FrameworkElement.Loaded ; mencoba memicu peristiwa lain akan melemparkan pengecualian atau gagal dikompilasi. Untuk informasi selengkapnya, lihat EventTrigger atau BeginStoryboard.

Menganimasikan properti terlampir XAML

Ini bukan skenario umum, tetapi Anda dapat menerapkan nilai animasi ke properti terlampir XAML. Untuk informasi selengkapnya tentang properti terlampir dan cara kerjanya, lihat Gambaran umum properti terlampir. Menargetkan properti terlampir memerlukan sintaks jalur properti yang menyertakan nama properti dalam tanda kurung. Anda dapat menganimasikan properti terlampir bawaan seperti Canvas.ZIndex dengan menggunakan ObjectAnimationUsingKeyFrames yang menerapkan nilai bilangan bulat diskrit. Namun, batasan yang ada dari implementasi Windows Runtime XAML adalah Anda tidak dapat menganimasikan properti terlampir kustom.

Jenis animasi lainnya, dan langkah berikutnya untuk mempelajari tentang menganimasikan UI Anda

Hingga sekarang, kami telah menampilkan animasi kustom yang menganimasikan antara dua nilai, lalu menginterpolasi nilai secara linier seperlunya saat animasi berjalan. Ini disebut Dari/Ke/Oleh animasi. Tetapi ada jenis animasi lain yang memungkinkan Anda mendeklarasikan nilai perantara yang berada di antara awal dan akhir. Ini disebut animasi bingkai kunci. Ada juga cara untuk mengubah logika interpolasi pada animasi From/To/By atau animasi key-frame. Ini melibatkan penerapan fungsi pelingan. Untuk informasi selengkapnya tentang konsep-konsep ini, lihat Animasi key-frame dan fungsi easing.

Perbedaan dengan WPF

Jika Anda terbiasa dengan Windows Presentation Foundation (WPF), baca bagian ini; jika tidak, Anda dapat melewatinya.

Secara umum, membuat animasi storyboard di aplikasi Windows Runtime seperti WPF. Tetapi ada sejumlah perbedaan penting:

  • Animasi storyboard bukan satu-satunya cara untuk menganimasikan UI secara visual, juga bukan cara term mudah bagi pengembang aplikasi untuk melakukannya. Alih-alih menggunakan animasi storyboard, sering kali lebih baik untuk menggunakan animasi tema dan animasi transisi. Ini dapat dengan cepat membuat animasi UI yang direkomendasikan tanpa masuk ke seluk-beluk penargetan properti animasi. Untuk informasi selengkapnya, lihat Animasi di XAML.
  • Di Windows Runtime, banyak kontrol XAML menyertakan animasi tema dan animasi transisi sebagai bagian dari perilaku bawaannya. Sebagian besar, kontrol WPF tidak memiliki perilaku animasi default.
  • Tidak semua animasi kustom yang Anda buat dapat berjalan secara default di aplikasi Windows Runtime, jika sistem animasi menentukan bahwa animasi dapat menyebabkan performa buruk di UI Anda. Animasi di mana sistem menentukan mungkin ada dampak performa yang disebut animasi dependen. Ini tergantung karena pengaturan waktu animasi Anda berlangsung langsung pada utas UI, yang juga merupakan tempat di mana masukan pengguna aktif dan pembaruan lainnya mencoba menerapkan perubahan runtime pada UI. Animasi dependen yang mengonsumsi sumber daya sistem yang luas pada utas UI dapat membuat aplikasi tampak tidak responsif dalam situasi tertentu. Jika animasi Anda menyebabkan perubahan tata letak atau berpotensi memengaruhi performa pada utas UI, Anda sering kali perlu mengaktifkan animasi secara eksplisit untuk melihatnya berjalan. Itulah tujuan properti EnableDependentAnimation pada kelas animasi tertentu. Lihat Animasi dependen dan independen untuk informasi selengkapnya.
  • Fungsi pemulusan kustom saat ini tidak didukung di Windows Runtime.
  • Last updated on