Gambaran Umum Animasi Bingkai Kunci
Topik ini memperkenalkan Anda ke animasi bingkai kunci. Animasi bingkai kunci memungkinkan Anda untuk menganimasikan menggunakan lebih dari dua nilai target, dan mengontrol metode interpolasi animasi.
Prasyarat
Untuk memahami gambaran umum ini, Anda harus terbiasa dengan animasi dan garis waktu Windows Presentation Foundation (WPF). Untuk pengenalan animasi, lihat Gambaran Umum Animasi. Ini juga membantu membiasakan diri dengan animasi From/To/By. Untuk informasi selengkapnya, lihat Gambaran Umum Animasi Dari/Ke/Menurut.
Apa itu Animasi Key-Frame?
Seperti animasi Dari/Ke/Menurut, animasi bingkai kunci menganimasikan nilai properti target. Ini menciptakan transisi di antara nilai targetnya Durationmelalui . Namun, sementara animasi Dari/Ke/Menurut membuat transisi antara dua nilai, animasi bingkai kunci tunggal dapat membuat transisi di antara sejumlah nilai target. Tidak seperti animasi Dari/Ke/Menurut, animasi bingkai kunci tidak memiliki properti Dari, Ke, atau Menurut untuk mengatur nilai targetnya. Nilai target animasi bingkai kunci dijelaskan menggunakan objek bingkai kunci (karenanya istilah , "animasi bingkai kunci"). Untuk menentukan nilai target animasi, Anda membuat objek bingkai kunci dan menambahkannya ke koleksi animasi KeyFrames . Saat animasi berjalan, animasi bertransisi di antara bingkai yang Anda tentukan.
Selain mendukung beberapa nilai target, beberapa metode bingkai kunci bahkan mendukung beberapa metode interpolasi. Metode interpolasi animasi menentukan bagaimana transisi dari satu nilai ke nilai berikutnya. Ada tiga jenis interpolasi: diskrit, linier, dan splin.
Untuk menganimasikan dengan animasi bingkai kunci, Anda menyelesaikan langkah-langkah berikut.
Deklarasikan animasi dan tentukan Duration, seperti yang Anda lakukan untuk animasi dari/ke/by.
Untuk setiap nilai target, buat bingkai kunci dengan jenis yang sesuai, atur nilainya dan KeyTime, dan tambahkan ke koleksi animasi KeyFrames .
Kaitkan animasi dengan properti, seperti yang Anda lakukan dengan animasi Dari/Ke/Menurut. Untuk informasi selengkapnya tentang menerapkan animasi ke properti menggunakan papan cerita, lihat Gambaran Umum Papan Cerita.
Contoh berikut menggunakan DoubleAnimationUsingKeyFrames untuk menganimasikan Rectangle elemen ke empat lokasi berbeda.
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Microsoft.Samples.KeyFrameAnimations.KeyFramesIntroduction"
WindowTitle="KeyFrame Animations">
<Border Width="400" BorderBrush="Black">
<Rectangle Fill="Blue"
Width="50" Height="50"
HorizontalAlignment="Left">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="MyAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from 0 to 350, then 50,
then 200 over 10 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="MyAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:10">
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" />
<LinearDoubleKeyFrame Value="50" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Border>
</Page>
Seperti animasi Dari/Ke/Menurut, animasi bingkai kunci dapat diterapkan ke properti dengan menggunakan Storyboard markup dan kode atau dengan menggunakan BeginAnimation metode dalam kode. Anda juga dapat menggunakan animasi bingkai kunci untuk membuat AnimationClock dan menerapkannya ke satu atau beberapa properti. Untuk informasi selengkapnya tentang berbagai metode untuk menerapkan animasi, lihat Gambaran Umum Teknik Animasi Properti.
Tipe Animasi Key-Frame
Karena animasi menghasilkan nilai properti, ada jenis animasi yang berbeda untuk jenis properti yang berbeda. Untuk menganimasikan properti yang mengambil Double (seperti properti elemen Width ), Anda menggunakan animasi yang menghasilkan Double nilai. Untuk menganimasikan properti yang mengambil Point, Anda menggunakan animasi yang menghasilkan Point nilai, dan sebagainya.
Kelas animasi bingkai kunci milik System.Windows.Media.Animation namespace layanan dan mematuhi konvensi penamaan berikut:
<Jenis>AnimationUsingKeyFrames
Di mana <Jenis> adalah jenis nilai yang dianimasikan kelas.
WPF menyediakan kelas animasi bingkai kunci berikut.
Nilai Target (bingkai kunci) dan Waktu Kunci
Sama seperti ada berbagai jenis animasi bingkai kunci untuk menganimasikan berbagai jenis properti, ada juga berbagai jenis objek bingkai kunci: satu untuk setiap jenis nilai animasi dan metode interpolasi yang didukung. Jenis bingkai kunci mematuhi konvensi penamaan berikut:
<Jenis InterpolationMethod><>KeyFrame
Di mana InterpolationMethod> adalah metode interpolasi yang digunakan bingkai kunci dan< Jenis> adalah jenis nilai yang dianimasikan kelas.< Animasi bingkai kunci yang mendukung ketiga metode interpolasi akan memiliki tiga jenis bingkai kunci yang dapat Anda gunakan. Misalnya, Anda dapat menggunakan tiga jenis bingkai kunci dengan DoubleAnimationUsingKeyFrames: DiscreteDoubleKeyFrame, LinearDoubleKeyFrame, dan SplineDoubleKeyFrame. (Metode interpolasi dijelaskan secara rinci di bagian selanjutnya.)
Tujuan utama bingkai kunci adalah untuk menentukan KeyTime dan Value. Setiap jenis bingkai kunci menyediakan dua properti ini.
Properti Value menentukan nilai target untuk bingkai kunci tersebut.
Properti KeyTime menentukan kapan (dalam animasi Duration) bingkai Value kunci tercapai.
Ketika animasi bingkai kunci dimulai, berulang melalui bingkai kuncinya dalam urutan yang ditentukan oleh propertinya KeyTime .
Jika tidak ada bingkai kunci pada waktu 0, animasi membuat transisi antara nilai properti target saat ini dan Value dari bingkai kunci pertama; jika tidak, nilai output animasi menjadi nilai bingkai kunci pertama.
Animasi membuat transisi antara Value bingkai kunci pertama dan kedua menggunakan metode interpolasi yang ditentukan oleh bingkai kunci kedua. Transisi dimulai pada bingkai KeyTime kunci pertama dan berakhir ketika bingkai KeyTime kunci kedua tercapai.
Animasi berlanjut, membuat transisi antara setiap bingkai kunci berikutnya dan bingkai kunci sebelumnya.
Akhirnya, animasi beralih ke nilai bingkai kunci dengan waktu kunci terbesar yang sama dengan atau lebih kecil dari animasi Duration.
Jika animasi Duration adalah Automatic atau Duration sama dengan waktu bingkai kunci terakhir, animasi berakhir. Jika tidak, jika animasi Duration lebih besar dari waktu kunci bingkai kunci terakhir, animasi menyimpan nilai bingkai kunci sampai mencapai akhir Duration. Seperti semua animasi, animasi bingkai kunci menggunakan propertinya FillBehavior untuk menentukan apakah ia menyimpan nilai akhir ketika mencapai akhir periode aktifnya. Untuk informasi selengkapnya, lihat Gambaran Umum Perilaku Pengaturan Waktu.
Contoh berikut menggunakan objek yang DoubleAnimationUsingKeyFrames ditentukan dalam contoh sebelumnya untuk menunjukkan cara Value kerja properti dan KeyTime .
Bingkai kunci pertama segera mengatur nilai output animasi ke 0.
Bingkai kunci kedua menganimasikan dari 0 hingga 350. Ini dimulai setelah bingkai kunci pertama berakhir (pada waktu = 0 detik) dan diputar selama 2 detik, berakhir pada waktu = 0:0:2.
Bingkai kunci ketiga menganimasikan dari 350 hingga 50. Ini dimulai ketika bingkai kunci kedua berakhir (pada waktu = 2 detik) dan diputar selama 5 detik, berakhir pada waktu = 0:0:7.
Bingkai kunci keempat menganimasikan dari 50 hingga 200. Ini dimulai ketika bingkai kunci ketiga berakhir (pada waktu = 7 detik) dan diputar selama 1 detik, berakhir pada waktu = 0:0:8.
Duration Karena properti animasi diatur ke 10 detik, animasi menyimpan nilai akhirnya selama dua detik sebelum berakhir pada waktu = 0:0:10.
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Microsoft.Samples.KeyFrameAnimations.KeyFramesIntroduction"
WindowTitle="KeyFrame Animations">
<Border Width="400" BorderBrush="Black">
<Rectangle Fill="Blue"
Width="50" Height="50"
HorizontalAlignment="Left">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="MyAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from 0 to 350, then 50,
then 200 over 10 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="MyAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:10">
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" />
<LinearDoubleKeyFrame Value="50" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Border>
</Page>
Metode Interpolasi
Bagian sebelumnya menyebutkan bahwa beberapa animasi bingkai kunci mendukung beberapa metode interpolasi. Interpolasi animasi menjelaskan bagaimana animasi beralih antar nilai selama durasinya. Dengan memilih jenis bingkai kunci mana yang Anda gunakan dengan animasi, Anda dapat menentukan metode interpolasi untuk segmen bingkai kunci tersebut. Ada tiga jenis metode interpolasi yang berbeda: linier, diskrit, dan splin.
Interpolasi Linier
Dengan interpolasi linier, animasi berkembang pada tingkat konstan durasi segmen. Misalnya, jika segmen bingkai kunci beralih dari 0 ke 10 selama durasi 5 detik, animasi akan menghasilkan nilai berikut pada waktu yang ditentukan:
| Waktu | Nilai output |
|---|---|
| 0 | 0 |
| 1 | 2 |
| 2 | 4 |
| 3 | 6 |
| 4 | 8 |
| 4,25 | 8.5 |
| 4.5 | 9 |
| 5 | 10 |
Interpolasi Diskrit
Dengan interpolasi diskrit, fungsi animasi melompat dari satu nilai ke nilai berikutnya tanpa interpolasi. Jika segmen bingkai kunci beralih dari 0 ke 10 selama durasi 5 detik, animasi akan menghasilkan nilai berikut pada waktu yang ditentukan:
| Waktu | Nilai output |
|---|---|
| 0 | 0 |
| 1 | 0 |
| 2 | 0 |
| 3 | 0 |
| 4 | 0 |
| 4,25 | 0 |
| 4.5 | 0 |
| 5 | 10 |
Perhatikan bagaimana animasi tidak mengubah nilai outputnya sampai akhir durasi segmen.
Interpolasi splin lebih kompleks. Ini dijelaskan di bagian berikutnya.
Interpolasi Splined
Interpolasi splin dapat digunakan untuk mencapai efek waktu yang lebih realistis. Karena animasi begitu sering digunakan untuk meniru efek yang terjadi di dunia nyata, pengembang mungkin membutuhkan kontrol yang baik atas akselerasi dan perlempitan objek, dan manipulasi segmen waktu yang dekat. Bingkai kunci spline memungkinkan Anda untuk menganimasikan dengan interpolasi yang di-splin. Dengan bingkai kunci lainnya, Anda menentukan Value dan KeyTime. Dengan bingkai kunci spline, Anda juga menentukan KeySpline. Contoh berikut menunjukkan bingkai kunci spline tunggal untuk DoubleAnimationUsingKeyFrames. KeySpline Perhatikan properti; itulah yang membuat bingkai kunci spline berbeda dari jenis bingkai kunci lainnya.
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
Kurva Bezier kubik didefinisikan oleh titik awal, titik akhir, dan dua titik kontrol. Properti KeySpline bingkai kunci spline mendefinisikan dua titik kontrol kurva Bezier yang memanjang dari (0,0) ke (1,1). Titik kontrol pertama mengontrol faktor kurva dari paruh pertama kurva Bezier, dan titik kontrol kedua mengontrol faktor kurva dari paruh kedua segmen Bezier. Kurva yang dihasilkan menjelaskan laju perubahan untuk bingkai kunci spline tersebut. Semakin curam kurva, semakin cepat bingkai kunci mengubah nilainya. Saat kurva menjadi lebih datar, bingkai kunci mengubah nilainya lebih lambat.
Anda mungkin menggunakan KeySpline untuk mensimulasikan lintasan fisik seperti jatuh air atau bola memantul, atau menerapkan efek "kemudahan masuk" dan "memudahkan" lainnya untuk animasi gerakan. Untuk efek interaksi pengguna seperti latar belakang memudar atau tombol kontrol rebound, Anda mungkin menerapkan interpolasi splin untuk mempercepat atau memperlambat laju perubahan untuk animasi dengan cara tertentu.
Contoh berikut menentukan KeySpline 0,1 1,0, yang membuat kurva Bezier berikut.
Spline kunci dengan titik kontrol (0.0, 1.0) dan (1.0, 0.0)
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
Bingkai kunci ini menganimasikan dengan cepat ketika dimulai, melambat, dan kemudian mempercepat lagi sebelum berakhir.
Contoh berikut menentukan KeySpline 0,5,0,25 0,75,1,0, yang membuat kurva Bezier berikut.
Spline kunci dengan titik kontrol (0,25, 0,5) dan (0,75, 1,0)
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15" KeySpline="0.25,0.5 0.75,1" />
Karena kelengkungan kurva Bezier berubah sangat sedikit, bingkai kunci ini menganimasikan pada tingkat yang hampir konstan; itu melambat agak menuju ke ujungnya.
Contoh berikut menggunakan DoubleAnimationUsingKeyFrames untuk menganimasikan posisi persegi panjang. DoubleAnimationUsingKeyFrames Karena menggunakan SplineDoubleKeyFrame objek, transisi antara setiap nilai bingkai kunci menggunakan interpolasi yang di-splin.
<!-- This rectangle is animated using a key frame animation
with splined interpolation. -->
<Rectangle
Width="50"
Height="50"
Fill="Purple">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="SplineAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from its base value (0) to 500, then 200,
then 350 over 15 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="SplineAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:15"
RepeatBehavior="Forever">
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
<SplineDoubleKeyFrame Value="200" KeyTime="0:0:10" KeySpline="0.0,0.0 1.0,0.0" />
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15" KeySpline="0.25,0.5 0.75,1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Interpolasi yang tercecer bisa sulit dipahami; bereksperimen dengan pengaturan yang berbeda dapat membantu. Sampel Animasi Key Spline memungkinkan Anda mengubah nilai spline kunci dan melihat hasilnya pada animasi.
Menggabungkan Metode Interpolasi
Anda dapat menggunakan bingkai kunci dengan jenis interpolasi yang berbeda dalam satu animasi bingkai kunci. Ketika dua animasi bingkai kunci dengan interpolasi yang berbeda saling mengikuti, metode interpolasi bingkai kunci kedua digunakan untuk membuat transisi dari nilai pertama ke yang kedua.
Dalam contoh berikut, DoubleAnimationUsingKeyFrames dibuat yang menggunakan interpolasi linier, splin, dan diskrit.
<!-- This rectangle is animated using a key frame animation
with a combination of interpolation methods. -->
<Rectangle
Width="50"
Height="50"
Fill="Orange">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="ComboAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from its base value (0) to 500, then 200,
then 350 over 15 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="ComboAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:15"
RepeatBehavior="Forever">
<DiscreteDoubleKeyFrame Value="500" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:10" />
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15"
KeySpline="0.25,0.5 0.75,1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Lebih lanjut tentang Durasi dan Waktu Kunci
Seperti animasi lainnya, animasi bingkai kunci memiliki Duration properti . Selain menentukan animasi Duration, Anda perlu menentukan bagian mana dari durasi tersebut yang diberikan untuk setiap bingkai kunci. Anda melakukannya dengan menjelaskan KeyTime untuk setiap bingkai kunci animasi. Setiap bingkai KeyTime kunci menentukan kapan bingkai kunci tersebut berakhir.
Properti KeyTime tidak menentukan berapa lama waktu kunci diputar. Jumlah waktu yang diputar bingkai kunci ditentukan oleh ketika bingkai kunci berakhir, ketika bingkai kunci sebelumnya berakhir, dan durasi animasi. Waktu kunci dapat ditentukan sebagai nilai waktu, persentase, atau sebagai nilai Uniform khusus atau Paced.
Daftar berikut menjelaskan berbagai cara menentukan waktu kunci.
Nilai Rentang Waktu
Anda dapat menggunakan TimeSpan nilai untuk menentukan KeyTime. Nilai harus lebih besar dari atau sama dengan 0 dan kurang dari atau sama dengan durasi animasi. Contoh berikut menunjukkan animasi dengan durasi 10 detik dan empat bingkai kunci yang waktu kuncinya ditentukan sebagai nilai waktu.
Bingkai kunci pertama menganimasikan dari nilai dasar menjadi 100 selama 3 detik pertama, berakhir pada waktu = 0:0:03.
Bingkai kunci kedua menganimasikan dari 100 hingga 200. Ini dimulai setelah bingkai kunci pertama berakhir (pada waktu = 3 detik) dan diputar selama 5 detik, berakhir pada waktu = 0:0:8.
Bingkai kunci ketiga menganimasikan dari 200 hingga 500. Ini dimulai ketika bingkai kunci kedua berakhir (pada waktu = 8 detik) dan diputar selama 1 detik, berakhir pada waktu = 0:0:9.
Bingkai kunci keempat menganimasikan dari 500 hingga 600. Ini dimulai ketika bingkai kunci ketiga berakhir (pada waktu = 9 detik) dan diputar selama 1 detik, berakhir pada waktu = 0:0:10.
<!-- This rectangle is animated with KeyTimes using TimeSpan values.
Goes to 100 in the first 3 seconds, 100 to 200 in
the next 5 seconds, 300 to 500 in the next second,
and 500 to 600 in the final second. -->
<Rectangle Width="50" Height="50" Fill="Blue">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform01" X="10" Y="30" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform01"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed as TimeSpan values
which are in the form of "hours:minutes:seconds". -->
<LinearDoubleKeyFrame Value="100" KeyTime="0:0:3" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
<LinearDoubleKeyFrame Value="500" KeyTime="0:0:9" />
<LinearDoubleKeyFrame Value="600" KeyTime="0:0:10" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Nilai Persentase
Nilai persentase menentukan bahwa bingkai kunci berakhir pada beberapa persentase animasi Duration. Di XAML, Anda menentukan persentase sebagai angka diikuti oleh % simbol . Dalam kode, Anda menggunakan FromPercent metode dan meneruskannya yang Double menunjukkan persentase. Nilai harus lebih besar dari atau sama dengan 0 dan kurang dari atau sama dengan 100 persen. Contoh berikut menunjukkan animasi dengan durasi 10 detik dan empat bingkai kunci yang waktu kuncinya ditentukan sebagai persentase.
Bingkai kunci pertama menganimasikan dari nilai dasar menjadi 100 selama 3 detik pertama, berakhir pada waktu = 0:0:3.
Bingkai kunci kedua menganimasikan dari 100 hingga 200. Ini dimulai setelah bingkai kunci pertama berakhir (pada waktu = 3 detik) dan diputar selama 5 detik, berakhir pada waktu = 0:0:8 (0,8 * 10 = 8).
Bingkai kunci ketiga menganimasikan dari 200 hingga 500. Ini dimulai ketika bingkai kunci kedua berakhir (pada waktu = 8 detik) dan diputar selama 1 detik, berakhir pada waktu = 0:0:9 (0,9 * 10 = 9).
Bingkai kunci keempat menganimasikan dari 500 hingga 600. Ini dimulai ketika bingkai kunci ketiga berakhir (pada waktu = 9 detik) dan diputar selama 1 detik, berakhir pada waktu = 0:0:10 (1 * 10 = 10).
<!-- Identical animation behavior to the previous rectangle
but using percentage values for KeyTimes rather then TimeSpan. -->
<Rectangle Height="50" Width="50" Fill="Purple">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform02" X="10" Y="110" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform02"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed as Percentages. -->
<LinearDoubleKeyFrame Value="100" KeyTime="30%" />
<LinearDoubleKeyFrame Value="200" KeyTime="80%" />
<LinearDoubleKeyFrame Value="500" KeyTime="90%" />
<LinearDoubleKeyFrame Value="600" KeyTime="100%" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Nilai Khusus, Seragam
Gunakan Uniform waktu saat Anda ingin setiap bingkai kunci mengambil jumlah waktu yang sama.
Uniform Waktu kunci membagi waktu yang tersedia secara merata dengan jumlah bingkai kunci untuk menentukan waktu akhir setiap bingkai kunci. Contoh berikut menunjukkan animasi dengan durasi 10 detik dan empat bingkai kunci yang waktu kuncinya ditentukan sebagai Uniform.
Bingkai kunci pertama dianimasikan dari nilai dasar menjadi 100 selama 2,5 detik pertama, berakhir pada waktu = 0:0:2,5.
Bingkai kunci kedua menganimasikan dari 100 hingga 200. Ini dimulai setelah bingkai kunci pertama berakhir (pada waktu = 2,5 detik) dan diputar selama sekitar 2,5 detik, berakhir pada waktu = 0:0:5.
Bingkai kunci ketiga menganimasikan dari 200 hingga 500. Ini dimulai ketika bingkai kunci kedua berakhir (pada waktu = 5 detik) dan diputar selama 2,5 detik, berakhir pada waktu = 0:0:7,5.
Bingkai kunci keempat menganimasikan dari 500 hingga 600. Ini dimulai ketika bingkai kunci kedua berakhir (pada waktu = 7,5 detik) dan diputar selama 2,5 detik, berakhir pada waktu = 0:0:1.
<!-- This rectangle is animated with KeyTimes using Uniform values. -->
<Rectangle Height="50" Width="50" Fill="Red">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform03" X="10" Y="190" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform03"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed with values of Uniform.
When a key time is set to "Uniform" the total allotted
time of the animation is divided evenly between key frames.
In this example, the total duration of the animation is
ten seconds and there are four key frames each of which
are set to "Uniform", therefore, the duration of each key frame
is 3.3 seconds (10/3). -->
<LinearDoubleKeyFrame Value="100" KeyTime="Uniform" />
<LinearDoubleKeyFrame Value="200" KeyTime="Uniform" />
<LinearDoubleKeyFrame Value="500" KeyTime="Uniform" />
<LinearDoubleKeyFrame Value="600" KeyTime="Uniform" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Nilai Khusus, Dihentikan
Gunakan Paced waktu saat Anda ingin menganimasikan pada tingkat konstanta.
Waktu Paced kunci mengalokasikan waktu yang tersedia sesuai dengan panjang masing-masing bingkai kunci untuk menentukan durasi setiap bingkai. Ini akan memberikan perilaku bahwa kecepatan atau kecepatan animasi tetap konstan. Contoh berikut menunjukkan animasi dengan durasi 10 detik dan tiga bingkai kunci yang waktu kuncinya ditentukan sebagai Paced.
<!-- Using Paced Values. Rectangle moves between key frames at
uniform rate except for first key frame
because using a Paced value on the first KeyFrame in a
collection of frames gives a time of zero. -->
<Rectangle Height="50" Width="50" Fill="Orange">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform04" X="10" Y="270" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform04"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed with values of Paced.
Paced values are used when a constant rate is desired.
The time allocated to a key frame with a KeyTime of "Paced"
is determined by the time allocated to the other key
frames of the animation. This time is calculated to
attempt to give a "paced" or "constant velocity"
for the animation. -->
<LinearDoubleKeyFrame Value="100" KeyTime="Paced" />
<LinearDoubleKeyFrame Value="200" KeyTime="Paced" />
<LinearDoubleKeyFrame Value="500" KeyTime="Paced" />
<LinearDoubleKeyFrame Value="600" KeyTime="Paced" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Perhatikan bahwa, jika waktu kunci bingkai kunci terakhir adalah Paced atau Uniform, waktu kunci yang diselesaikan akan diatur ke 100 persen. Jika bingkai kunci pertama dalam animasi multiframe ditempelkan, waktu kunci yang diselesaikan akan diatur ke 0. (Jika kumpulan bingkai kunci hanya berisi bingkai kunci tunggal dan merupakan bingkai kunci paced, waktu kunci yang diselesaikan akan diatur ke 100 persen.)
Bingkai kunci yang berbeda dalam animasi bingkai kunci tunggal dapat menggunakan jenis waktu kunci yang berbeda.
Menggabungkan Key Times, Bingkai Kunci Yang Tidak Berurutan
Anda dapat menggunakan bingkai kunci dengan jenis nilai yang berbeda KeyTime dalam animasi yang sama. Dan, meskipun disarankan agar Anda menambahkan bingkai kunci dalam urutan di mana mereka harus bermain, itu tidak diperlukan. Sistem animasi dan waktu mampu menyelesaikan bingkai kunci pesanan. Bingkai kunci dengan waktu kunci yang tidak valid diabaikan.
Daftar berikut menjelaskan prosedur di mana waktu kunci diselesaikan untuk bingkai kunci animasi bingkai kunci.
Tentukan total waktu interpolasi animasi, total waktu yang dibutuhkan animasi bingkai kunci untuk menyelesaikan perulangan ke depan.
Gunakan nilai total waktu interpolasi untuk mengatasi PercentKeyTime nilai.
Atasi bingkai kunci terakhir, jika belum diselesaikan di langkah-langkah sebelumnya. KeyTime Jika dari bingkai kunci terakhir adalah Uniform atau Paced, waktu yang diselesaikan akan sama dengan total waktu interpolasi.
KeyTime Jika bingkai kunci pertama adalah Paced dan animasi ini memiliki lebih dari pada bingkai kunci, selesaikan nilainya KeyTime menjadi nol; jika hanya ada satu bingkai kunci dan nilainya KeyTime adalah Paced, itu diselesaikan ke total waktu interpolasi, seperti yang dijelaskan pada langkah sebelumnya.
Atasi nilai yang tersisa UniformKeyTime : masing-masing diberi bagian yang sama dari waktu yang tersedia. Selama proses ini, nilai yang tidak terselesaikan PacedKeyTime untuk sementara diperlakukan sebagai UniformKeyTime nilai, dan mendapatkan waktu yang diselesaikan sementara.
KeyTime Atasi nilai bingkai kunci dengan waktu kunci yang tidak ditentukan dengan menggunakan bingkai kunci yang dideklarasikan terdekat dengan nilai yang telah diselesaikanKeyTime.
Atasi nilai yang tersisa PacedKeyTime . PacedKeyTimeKeyTime gunakan nilai bingkai kunci tetangga untuk menentukan waktu yang diselesaikan. Tujuannya adalah untuk memastikan bahwa kecepatan animasi konstan di sekitar waktu yang diselesaikan bingkai kunci ini.
Urutkan bingkai kunci dalam urutan waktu yang diselesaikan (kunci primer), dan urutan deklarasi (kunci sekunder), yaitu, gunakan pengurutan stabil berdasarkan nilai bingkai KeyTime kunci yang diselesaikan.
Baca juga
.NET Desktop feedback
Saran dan Komentar
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat: https://aka.ms/ContentUserFeedback.
Kirim dan lihat umpan balik untuk