Bagikan melalui

Animasi bercerita

  • 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 storyboard di aplikasi Windows Runtime seperti Silverlight atau 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. 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 berfungsi terhadap utas UI, yang juga merupakan tempat input pengguna aktif dan pembaruan lain 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 pelingan kustom saat ini tidak didukung di Windows Runtime.

Menentukan animasi bercerita

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 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 papan cerita adalah jika Anda adalah penulis kontrol atau membuat templat ulang kontrol, dan Anda menentukan status visual. Untuk informasi selengkapnya, lihat Animasi storyboarded 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. Papan cerita biasanya didefinisikan dalam XAML yang tidak berada di sekitar definisi XAML UI 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 merupakan apa yang Anda tetapkan sebelumnya dan di tempat lain dengan atribut x:Name.

Menargetkan properti dependensi untuk dianimasikan

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 properti langsung dari objek target, tetapi itu bersarang lebih dalam dalam hubungan properti objek. Anda sering kali perlu melakukan ini untuk menelusuri paling detail ke dalam sekumpulan objek kontribusi dan nilai properti 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 storyboard adalah mengubah warna bagian dari UI aplikasi atau kontrol untuk mewakili bahwa kontrol berada dalam status tertentu. Katakanlah Anda ingin menganimasikan Latar Depan TextBlock, sehingga berubah dari merah ke hijau. Anda akan mengharapkan bahwa ColorAnimation terlibat, dan itu benar. Namun, tidak ada properti pada elemen UI yang memengaruhi warna objek 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 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 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 di tengah, yang tidak ada di dalam tanda kurung, adalah langkah. Ini ditafsirkan oleh sintaks untuk 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 mempertaruhkan 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 atau properti terlampir Storyboard.TargetProperty.

Jenis animasi

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

  • Ganda, dapat dianimasikan dengan DoubleAnimation apa pun
  • Point, dapat dianimasikan dengan PointAnimation apa pun
  • Warna, dapat dianimasikan dengan ColorAnimation apa pun

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 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 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 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 Ganda ini terhadap properti Opacity, 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/Oleh 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 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 . 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.

Putar 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 untuk menggandakan 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 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 default, ketika animasi berakhir, animasi meninggalkan nilai properti sebagai nilai final Ke atau By-modified bahkan setelah durasinya melampaui. 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).

BeginTime

Secara default, BeginTime animasi adalah "0:0:0", sehingga dimulai segera setelah storyboard berisi berjalan. Anda dapat 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 disarankan.

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 diterjemahkan 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 bertitik 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. Anda biasanya tidak mengatur ini pada Papan Cerita 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 fungsi key-frame dan kemudahan.

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 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.

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 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, lihat Animasi storyboarded 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 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 memengaruhi performa fitur aplikasi lain yang juga berada di utas UI yang sama.

Variasi 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 yang Anda animasikan, dan faktor lain seperti warisan dan komposisi kontrol. Ada keadaan di mana bahkan jika animasi mengubah UI, animasi dapat berdampak 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, 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. (Masing-masing 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 responsI 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 EnableDependentAnimation 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 dengan tangan, 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

Segala sesuatu yang telah kami tunjukkan 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 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"/>

Penanganan aktivitas memulai Storyboard (animasi) dengan menggunakan metode Mulai 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/animasi properti, 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 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 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 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 fungsi key-frame dan kemudahan.