Animasi papan cerita

  • Artikel

Animasi papan cerita bukan hanya animasi dalam arti visual. Animasi papan cerita adalah cara untuk mengubah nilai properti dependensi sebagai 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.

Perbedaan dengan Silverlight dan WPF

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

Secara umum, membuat animasi papan cerita di aplikasi Windows Runtime seperti Silverlight atau WPF. Tetapi ada sejumlah perbedaan penting:

  • Animasi papan cerita bukan satu-satunya cara untuk menganimasikan UI secara visual, juga tidak selalu menjadi cara termampu bagi pengembang aplikasi untuk melakukannya. Daripada menggunakan animasi papan cerita sering kali merupakan praktik desain yang 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 Gambaran umum animasi.
  • Di Windows Runtime, banyak kontrol XAML menyertakan animasi tema dan animasi transisi sebagai bagian dari perilaku bawaannya. Sebagian besar, kontrol WPF dan Silverlight 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 pencatatan animasi Anda secara langsung bekerja terhadap utas UI, yang juga merupakan tempat input pengguna aktif dan pembaruan lain mencoba menerapkan perubahan runtime ke 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 pelingan kustom saat ini tidak didukung di Windows Runtime.

Menentukan animasi papan cerita

Animasi papan cerita adalah cara untuk mengubah nilai properti dependensi sebagai 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 ini 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 papan cerita adalah jika Anda adalah pembuat kontrol atau membuat templat ulang kontrol, dan Anda mendefinisikan status visual. Untuk informasi selengkapnya, lihat Animasi 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 papan cerita harus merupakan properti dependensi. Properti dependensi adalah fitur utama implementasi XAML Windows Runtime. 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 papan cerita dengan menulis XAML. Jika Anda menggunakan alat seperti Microsoft Visual Studio, alat ini akan menghasilkan XAML untuk Anda. Dimungkinkan untuk mendefinisikan animasi papan cerita 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. Papan cerita biasanya didefinisikan dalam XAML yang tidak berada di sekitar definisi UI XAML dari objek untuk 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 Anda tetapkan sebelumnya dan di tempat lain dengan atribut x:Name.

Menargetkan properti dependensi untuk dianimasikan

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

Terkadang Anda perlu menargetkan properti yang bukan properti langsung dari objek target, tetapi itu bersarang lebih dalam dalam hubungan properti objek. Anda sering kali perlu melakukan ini untuk menelusuri paling detail sekumpulan nilai objek dan properti yang berkontribusi hingga Anda dapat mereferensikan jenis properti yang dapat dianimasikan (Ganda, Titik, Warna). Konsep ini disebut penargetan tidak langsung, dan sintaks untuk menargetkan properti dengan cara ini dikenal sebagai jalur properti.

Berikut adalah contoh. Salah satu skenario umum untuk animasi papan cerita 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 akan mengharapkan bahwa ColorAnimation terlibat, dan itu benar. Namun, tidak ada properti pada elemen UI yang mempengaruhi warna objek yang sebenarnya berjenis Color. Sebaliknya, mereka jenis Brush. Jadi yang sebenarnya perlu Anda targetkan untuk animasi adalah properti Color dari kelas SolidColorBrush , yang merupakan jenis turunan Brush yang biasanya digunakan untuk properti UI terkait warna ini. Dan inilah yang terlihat seperti dalam hal membentuk jalur properti untuk penargetan 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 sintaks 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 di tengah, yang tidak ada di dalam tanda kurung, adalah langkah. Ini ditafsirkan oleh sintaks rata-rata, 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 mempertaruhkan sintaks yang akan Anda gunakan:

Anda akan melihat beberapa contoh ini menggunakan kurung siku di sekitar angka. Ini adalah pengindeks. Ini menunjukkan bahwa nama properti sebelumnya memiliki koleksi sebagai nilai, dan bahwa 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 lengkap yang dilampirkan 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 atau properti terlampir Storyboard.TargetProperty.

Jenis animasi

Sistem animasi Windows Runtime memiliki tiga tipe spesifik yang bisa diterapkan animasi papan cerita:

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 disebut sebagai Dari/Ke/Oleh animasi . 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 XAML UI 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 Ke .
  • 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 dari From, By atau To tetapi tidak pernah ketiganya.

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 akan 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 apa arti nilai Ganda ini terhadap properti Oacity , animasi ini akan menyebabkan objek mulai buram dan kemudian memudar 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.

Catatan

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/Menurut dapat diubah ke 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 Ganda. Sebaliknya, ini adalah Nullable untuk Double. Dan nilai defaultnya null, bukan 0. Nilai null itu adalah bagaimana sistem animasi membedakan bahwa Anda belum secara khusus menetapkan nilai untuk properti Dari, Ke, atau Menurut . Ekstensi komponen Visual C++ (C++/CX) tidak memiliki jenis Nullable , sehingga menggunakan IReference sebagai gantinya .

Properti animasi lainnya

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

Balik Otomatis

Jika Anda tidak menentukan AutoReverse atau RepeatBehavior pada animasi, animasi tersebut akan berjalan sekali, dan berjalan selama 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 untuk dua kali lipat waktu Durasinya.

RepeatBehavior

Properti RepeatBehavior menentukan berapa kali garis waktu diputar, atau durasi yang lebih besar yang harus diulangi garis waktu. Secara default, garis waktu memiliki jumlah perulangan "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 hingga sengaja dihentikan.

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

FillBehavior="Stop"

Secara default, saat animasi berakhir, animasi meninggalkan nilai properti sebagai nilai akhir Kepada atau Berdasarkan modifikasi bahkan setelah durasinya melampaui. Namun, jika Anda menetapkan nilai properti FillBehavior ke FillBehavior.Stop, nilai nilai animasi kembali ke apa pun nilainya 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).

BeginTime

Secara default, BeginTime animasi adalah "0:0:0", sehingga dimulai segera setelah storyboard berisi berjalan. Anda mungkin mengubah ini jika Storyboard berisi lebih dari satu animasi dan Anda ingin mengejutkan waktu mulai yang lain versus animasi awal, atau untuk membuat penundaan singkat yang disengaja.

SpeedRatio

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

Menentukan lebih dari satu animasi dalam Papan-cerita

Isi Papan Cerita bisa 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 diterjemahkan secara diagonal. Anda memerlukan dua animasi berbeda untuk mencapainya, tetapi Anda mungkin ingin animasi menjadi bagian dari Papan Cerita yang sama karena Anda selalu ingin kedua animasi tersebut dijalankan bersama-sama.

Animasi tidak harus bertipe 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, Papan Cerita dapat memiliki RepeatBehavior, atau BeginTime. Anda biasanya tidak mengatur ini di Storyboard kecuali Anda ingin semua animasi yang terkandung memiliki perilaku tersebut. Sebagai aturan umum, properti Garis Waktu apa pun seperti yang ditetapkan pada Papan Cerita berlaku untuk semua animasi turunannya. 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 turunannya 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 meskipun 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 fungsi key-frame dan permudah.

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

Menentukan papan cerita sebagai sumber daya

Papan Cerita adalah kontainer tempat Anda meletakkan 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 menjadi file terpisah dan menggabungkannya ke dalam aplikasi atau halaman. Untuk informasi selengkapnya, lihat Referensi sumber daya ResourceDictionary dan XAML.

Catatan

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 dengan 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 Papan Cerita .

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 ResourceDictionary XAML terpisah daripada ditempatkan di halaman atau kumpulan Sumber Daya aplikasi. Untuk informasi selengkapnya, lihat Animasi 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 terlebih dahulu segera sebelum ditampilkan. Ketika Anda menganimasikan UI, ada potensi untuk menyebabkan 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 berdampak pada performa fitur aplikasi lain yang juga berada di utas UI yang sama.

Berbagai animasi yang ditentukan memiliki beberapa risiko 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 mana yang Anda animasikan, dan faktor lain seperti pewarisan dan komposisi kontrol. Ada keadaan di mana bahkan jika animasi mengubah UI, animasi dapat memiliki dampak minimal ke utas UI, dan sebaliknya dapat ditangani oleh utas komposisi sebagai animasi 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, itu 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 dari 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 jatuh ke pengembang aplikasi adalah aspek desain sadar dari sistem animasi dan pengalaman pengembangan. Kami ingin pengembang menyadari bahwa animasi memang memiliki biaya performa untuk responsivitas UI Anda. Animasi berkinerja buruk sulit 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 EnableDependentAnimationadalah benar. Lihat Timeline.AllowDependentAnimations.

Tip

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 secara manual, perancang tidak akan menampilkan peringatan. Pada runtime saat penelusuran kesalahan, output Debug panel Output akan menampilkan peringatan bahwa animasi tidak independen dan akan dilewati.

Memulai dan mengontrol animasi

Semua yang telah kami perlihatkan kepada Anda sejauh ini tidak benar-benar menyebabkan animasi berjalan atau diterapkan! Sampai animasi dimulai dan berjalan, nilai berubah bahwa animasi dideklarasikan di XAML laten dan belum akan terjadi. Anda harus secara eksplisit memulai animasi dalam beberapa cara yang terkait dengan masa pakai aplikasi atau pengalaman pengguna. Pada tingkat paling sederhana, Anda memulai animasi dengan memanggil metode Mulai di Papan Cerita 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 belakang untuk halaman atau komponen aplikasi Anda, atau mungkin logika kontrol Anda jika Anda mendefinisikan 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"/>

Penanganan aktivitas memulai Storyboard (animasi) dengan menggunakan metode Mulaidari Storyboard.

myStoryboard.Begin();

myStoryboard().Begin();

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 properti/animasi, metode GetAnimationBaseValue dapat berguna.

Tip

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. Animasi pustaka memungkinkan pengalaman UI yang lebih konsisten di semua aplikasi Windows Runtime, dan lebih mudah digunakan.

 

Animasi untuk status visual

Perilaku eksekusi untuk Storyboard yang digunakan untuk menentukan status visual kontrol berbeda dari bagaimana aplikasi mungkin menjalankan papan cerita 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 API VisualStateManager . Animasi apa pun di dalamnya akan berjalan sesuai dengan nilai animasi dan properti Garis Waktu saat VisualState yang berisi digunakan oleh kontrol. Untuk informasi selengkapnya, lihat Storyboard 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, meskipun status visual baru tidak secara khusus menerapkan animasi baru ke properti.

Papan cerita dan EventTrigger

Ada satu cara untuk memulai animasi yang dapat dideklarasikan sepenuhnya di XAML. Namun, teknik ini tidak banyak digunakan lagi. Ini adalah sintaks 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 melempar 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 apa itu 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 implementasi Windows Runtime XAML yang ada 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 Dari/Ke/Menurut atau animasi bingkai kunci. Ini melibatkan penerapan fungsi pelingasan. Untuk informasi selengkapnya tentang konsep ini, lihat Animasi fungsi key-frame dan easing.