Gambaran Umum Animasi

  • Artikel

Windows Presentation Foundation (WPF) menyediakan serangkaian fitur grafis dan tata letak yang kuat yang memungkinkan Anda membuat antarmuka pengguna yang menarik dan dokumen yang menarik. Animasi dapat membuat antarmuka pengguna yang menarik bahkan lebih spektakuler dan dapat digunakan. Dengan hanya menganimasikan warna latar belakang atau menerapkan animasi Transform, Anda dapat membuat transisi layar dramatis atau memberikan isjin visual yang bermanfaat.

Gambaran umum ini memberikan pengantar animasi WPF dan sistem waktu. Ini berfokus pada animasi objek WPF dengan menggunakan papan cerita.

Memperkenalkan Animasi

Animasi adalah ilusi yang dibuat dengan cepat bersepeda melalui serangkaian gambar, masing-masing sedikit berbeda dari yang terakhir. Otak melihat sekelompok gambar sebagai satu adegan yang berubah. Dalam film, ilusi ini dibuat dengan menggunakan kamera yang merekam banyak foto, atau bingkai, setiap detik. Saat bingkai diputar kembali oleh proyektor, audiens akan melihat gambar yang bergerak.

Animasi pada komputer serupa. Misalnya, program yang membuat gambar persegi panjang memudar dari tampilan mungkin berfungsi sebagai berikut.

  • Program ini membuat timer.

  • Program memeriksa timer pada interval yang ditetapkan untuk melihat berapa banyak waktu yang telah berlalu.

  • Setiap kali program memeriksa timer, program menghitung nilai opasitas saat ini untuk persegi panjang berdasarkan berapa banyak waktu yang telah berlalu.

  • Program kemudian memperbarui persegi panjang dengan nilai baru dan menggambar ulang.

Sebelum WPF, pengembang Microsoft Windows harus membuat dan mengelola sistem waktu mereka sendiri atau menggunakan pustaka kustom khusus. WPF mencakup sistem pengaturan waktu efisien yang diekspos melalui kode terkelola dan XAML dan yang terintegrasi secara mendalam ke dalam kerangka kerja WPF. Animasi WPF memudahkan untuk menganimasikan kontrol dan objek grafis lainnya.

WPF menangani semua pekerjaan di balik layar dalam mengelola sistem waktu dan menggambar ulang layar secara efisien. Ini menyediakan kelas pengaturan waktu yang memungkinkan Anda untuk fokus pada efek yang ingin Anda buat, alih-alih mekanika mencapai efek tersebut. WPF juga memudahkan untuk membuat animasi Anda sendiri dengan mengekspos kelas dasar animasi tempat kelas Anda dapat mewarisi, untuk menghasilkan animasi yang disesuaikan. Animasi kustom ini mendapatkan banyak manfaat performa dari kelas animasi standar.

Sistem Animasi Properti WPF

Jika Anda memahami beberapa konsep penting tentang sistem waktu, animasi WPF dapat lebih mudah digunakan. Yang paling penting adalah bahwa, dalam WPF, Anda menganimasikan objek dengan menerapkan animasi ke properti masing-masing. Misalnya, untuk membuat elemen kerangka kerja tumbuh, Anda menganimasikan properti dan Height miliknyaWidth. Untuk membuat objek memudar dari tampilan, Anda menganimasikan propertinya Opacity .

Agar properti memiliki kemampuan animasi, properti harus memenuhi tiga persyaratan berikut:

  • Ini harus menjadi properti dependensi.

  • Ini harus termasuk dalam kelas yang mewarisi dari DependencyObject dan mengimplementasikan IAnimatable antarmuka.

  • Harus ada tipe animasi yang kompatibel yang tersedia. (Jika WPF tidak menyediakannya, Anda dapat membuat sendiri. Lihat Gambaran Umum Animasi Kustom.)

WPF berisi banyak objek yang memiliki IAnimatable properti. Kontrol seperti Button dan TabControl, dan juga Panel dan Shape objek mewarisi dari DependencyObject. Sebagian besar propertinya adalah properti dependensi.

Anda dapat menggunakan animasi hampir di mana saja, yang mencakup dalam gaya dan templat kontrol. Animasi tidak harus visual; Anda dapat menganimasikan objek yang bukan bagian dari antarmuka pengguna jika memenuhi kriteria yang dijelaskan di bagian ini.

Contoh: Membuat Elemen Memudar Masuk dan Tidak Terlihat

Contoh ini menunjukkan cara menggunakan animasi WPF untuk menganimasikan nilai properti dependensi. Ini menggunakan DoubleAnimation, yang merupakan jenis animasi yang menghasilkan Double nilai, untuk menganimasikan Opacity properti dari Rectangle. Akibatnya, memudar Rectangle masuk dan tidak terlihat.

Bagian pertama dari contoh membuat Rectangle elemen. Langkah-langkah berikut menunjukkan cara membuat animasi dan menerapkannya ke properti persegi panjang Opacity .

Berikut ini menunjukkan cara membuat Rectangle elemen di StackPanel XAML.

<StackPanel Margin="10">
    <Rectangle
        Name="MyRectangle"
        Width="100" 
        Height="100"
        Fill="Blue">
    </Rectangle>
</StackPanel>

Berikut ini menunjukkan cara membuat Rectangle elemen dalam StackPanel kode.

var myPanel = new StackPanel();
myPanel.Margin = new Thickness(10);

var myRectangle = new Rectangle();
myRectangle.Name = "myRectangle";
this.RegisterName(myRectangle.Name, myRectangle);
myRectangle.Width = 100;
myRectangle.Height = 100;
myRectangle.Fill = Brushes.Blue;
myPanel.Children.Add(myRectangle);
this.Content = myPanel;

Dim myPanel As New StackPanel()
myPanel.Margin = New Thickness(10)

Dim myRectangle As New Rectangle()
myRectangle.Name = "myRectangle"
Me.RegisterName(myRectangle.Name, myRectangle)
myRectangle.Width = 100
myRectangle.Height = 100
myRectangle.Fill = Brushes.Blue

myPanel.Children.Add(myRectangle)
Me.Content = myPanel

Bagian 1: Membuat DoubleAnimation

Salah satu cara untuk membuat elemen memudar masuk dan keluar dari tampilan adalah dengan menganimasikan propertinya Opacity . Opacity Karena properti berjenis Double, Anda memerlukan animasi yang menghasilkan nilai ganda. Adalah DoubleAnimation salah satu animasi seperti itu. Membuat DoubleAnimation transisi antara dua nilai ganda. Untuk menentukan nilai awalnya, Anda mengatur propertinya From . Untuk menentukan nilai akhirnya, Anda mengatur propertinya To .

  1. Nilai keburaman 1.0 membuat objek benar-benar buram, dan nilai keburaman 0.0 membuatnya benar-benar tidak terlihat. Untuk membuat transisi animasi dari 1.0 ke 0.0 Anda mengatur propertinya From ke 1.0 dan propertinya To ke 0.0. Berikut ini menunjukkan cara membuat DoubleAnimation di XAML.

    <DoubleAnimation From="1.0" To="0.0" />

    Berikut ini memperlihatkan cara membuat DoubleAnimation dalam kode.

    var myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;

    Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 1.0
myDoubleAnimation.To = 0.0

  2. Selanjutnya, Anda harus menentukan Duration. Animasi Duration menentukan berapa lama waktu yang diperlukan untuk berubah dari nilai awalnya ke nilai tujuannya. Berikut ini menunjukkan cara mengatur Duration ke lima detik di XAML.

    <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />

    Berikut ini menunjukkan cara mengatur Duration ke lima detik dalam kode.

    myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));

    myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))

  3. Kode sebelumnya menunjukkan animasi yang beralih dari 1.0 ke 0.0, yang menyebabkan elemen target memudar dari benar-benar buram menjadi benar-benar tidak terlihat. Untuk membuat elemen memudar kembali ke tampilan setelah menghilang, atur AutoReverse properti animasi ke true. Untuk membuat animasi berulang tanpa batas waktu, atur propertinya RepeatBehavior ke Forever. Berikut ini menunjukkan cara mengatur AutoReverse properti dan RepeatBehavior di XAML.

    <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>

    Berikut ini memperlihatkan cara mengatur AutoReverse properti dan RepeatBehavior dalam kode.

    myDoubleAnimation.AutoReverse = true;
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

    myDoubleAnimation.AutoReverse = True
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

Bagian 2: Membuat Storyboard

Untuk menerapkan animasi ke objek, Anda membuat Storyboard dan menggunakan TargetName properti terlampir dan TargetProperty untuk menentukan objek dan properti untuk dianimasikan.

  1. Storyboard Buat dan tambahkan animasi sebagai anaknya. Berikut ini menunjukkan cara membuat Storyboard di XAML.

    <Storyboard>
    <DoubleAnimation
        From="1.0" To="0.0" Duration="0:0:1" 
        AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

    Untuk membuat Storyboard dalam kode, deklarasikan Storyboard variabel di tingkat kelas.

    public partial class MainWindow : Window
{
    private Storyboard myStoryboard;

    Class MainWindow

    Private myStoryboard As Storyboard

    Kemudian inisialisasi Storyboard dan tambahkan animasi sebagai anaknya.

    myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

    myStoryboard = New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

  2. Harus Storyboard tahu di mana harus menerapkan animasi. Storyboard.TargetName Gunakan properti terlampir untuk menentukan objek yang akan dianimasikan. Berikut ini menunjukkan cara mengatur nama DoubleAnimation target ke MyRectangle di XAML.

    <Storyboard>
    <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        From="1.0" To="0.0" Duration="0:0:1" 
        AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

    Berikut ini memperlihatkan cara mengatur nama target ke DoubleAnimationMyRectangle dalam kode.

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)

  3. TargetProperty Gunakan properti terlampir untuk menentukan properti yang akan dianimasikan. Berikut ini menunjukkan bagaimana animasi dikonfigurasi untuk menargetkan Opacity properti Rectangle di XAML.

    <Storyboard>
    <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:5" 
        AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

    Berikut ini memperlihatkan bagaimana animasi dikonfigurasi untuk menargetkan Opacity properti dalam Rectangle kode.

    Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

    Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))

Untuk informasi selengkapnya tentang TargetProperty sintaksis dan untuk contoh tambahan, lihat Ringkasan Papan Cerita.

Bagian 3 (XAML): Kaitkan Papan Cerita dengan Pemicu

Cara term mudah untuk menerapkan dan memulai Storyboard di XAML adalah dengan menggunakan pemicu peristiwa. Bagian ini menunjukkan cara mengaitkan Storyboard dengan pemicu di XAML.

  1. Buat BeginStoryboard objek dan kaitkan papan cerita Anda dengannya. BeginStoryboard adalah jenis TriggerAction yang berlaku dan memulai Storyboard.

    <BeginStoryboard>
  <Storyboard>
    <DoubleAnimation
      Storyboard.TargetName="MyRectangle" 
      Storyboard.TargetProperty="Opacity"
      From="1.0" To="0.0" Duration="0:0:5" 
      AutoReverse="True" RepeatBehavior="Forever" />
  </Storyboard>
</BeginStoryboard>

  2. EventTrigger Buat dan tambahkan ke BeginStoryboard koleksinyaActions. Atur RoutedEvent properti ke peristiwa yang dirutekan EventTrigger yang ingin Anda mulai Storyboard. (Untuk informasi selengkapnya tentang peristiwa yang dirutekan , lihatGambaran Umum Peristiwa Yang Dirutekan.)

    <!-- Animates the rectangle's opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
  <BeginStoryboard>
    <Storyboard>
      <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:5" 
        AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
  </BeginStoryboard>
</EventTrigger>

  3. Tambahkan ke EventTriggerTriggers koleksi Persegi Panjang.

    <Rectangle
  Name="MyRectangle"
  Width="100" 
  Height="100"
  Fill="Blue">
  <Rectangle.Triggers>
    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0.0" Duration="0:0:5" 
            AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Bagian 3 (Kode): Kaitkan Papan Cerita dengan Penanganan Aktivitas

Cara term mudah untuk menerapkan dan memulai Storyboard dalam kode adalah dengan menggunakan penanganan aktivitas. Bagian ini memperlihatkan cara mengaitkan Storyboard dengan penanganan aktivitas dalam kode.

  1. Daftar untuk Loaded peristiwa persegi panjang.

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);

    AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

  2. Deklarasikan penanganan aktivitas. Di penanganan aktivitas, gunakan Begin metode untuk menerapkan papan cerita.

    private void myRectangleLoaded(object sender, RoutedEventArgs e)
{
    myStoryboard.Begin(this);
}

    Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
    myStoryboard.Begin(Me)
End Sub

Contoh Lengkap

Berikut ini menunjukkan cara membuat persegi panjang yang memudar masuk dan tidak terlihat di XAML.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel Margin="10">
            <Rectangle
                Name="MyRectangle"
                Width="100" 
                Height="100"
                Fill="Blue">
                <Rectangle.Triggers>
                    <!-- Animates the rectangle's opacity. -->
                    <EventTrigger RoutedEvent="Rectangle.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetName="MyRectangle" 
                                    Storyboard.TargetProperty="Opacity"
                                    From="1.0" To="0.0" Duration="0:0:5" 
                                    AutoReverse="True" RepeatBehavior="Forever" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Rectangle.Triggers>
            </Rectangle>
        </StackPanel>
    </Grid>
</Window>

Berikut ini memperlihatkan cara membuat persegi panjang yang memudar masuk dan keluar dari tampilan dalam kode.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;
using System.Windows.Media.Animation;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        private Storyboard myStoryboard;

        public MainWindow()
        {
            InitializeComponent();

            StackPanel myPanel = new StackPanel();
            myPanel.Margin = new Thickness(10);

            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "myRectangle";
            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            myRectangle.Fill = Brushes.Blue;

            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 1.0;
            myDoubleAnimation.To = 0.0;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
            myDoubleAnimation.AutoReverse = true;
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

            myStoryboard = new Storyboard();
            myStoryboard.Children.Add(myDoubleAnimation);
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
            Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

            // Use the Loaded event to start the Storyboard.
            myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
            myPanel.Children.Add(myRectangle);
            this.Content = myPanel;
        }

        private void myRectangleLoaded(object sender, RoutedEventArgs e)
        {
            myStoryboard.Begin(this);
        }
    }
}

Imports System.Windows.Media.Animation

Class MainWindow

    Private myStoryboard As Storyboard

    Public Sub New()
        InitializeComponent()

        Dim myPanel As New StackPanel()
        myPanel.Margin = New Thickness(10)

        Dim myRectangle As New Rectangle()
        myRectangle.Name = "myRectangle"
        Me.RegisterName(myRectangle.Name, myRectangle)
        myRectangle.Width = 100
        myRectangle.Height = 100
        myRectangle.Fill = Brushes.Blue

        Dim myDoubleAnimation As New DoubleAnimation()
        myDoubleAnimation.From = 1.0
        myDoubleAnimation.To = 0.0
        myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
        myDoubleAnimation.AutoReverse = True
        myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

        myStoryboard = New Storyboard()
        myStoryboard.Children.Add(myDoubleAnimation)
        Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
        Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))

        ' Use the Loaded event to start the Storyboard.
        AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

        myPanel.Children.Add(myRectangle)
        Me.Content = myPanel
    End Sub

    Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
        myStoryboard.Begin(Me)
    End Sub

End Class

Tipe Animasi

Karena animasi menghasilkan nilai properti, tipe animasi yang berbeda ada untuk tipe properti yang berbeda. Untuk menganimasikan properti yang mengambil Double, seperti Width properti elemen, gunakan animasi yang menghasilkan Double nilai. Untuk menganimasikan properti yang mengambil Point, gunakan animasi yang menghasilkan Point nilai, dan sebagainya. Karena jumlah jenis properti yang berbeda, ada beberapa kelas animasi di System.Windows.Media.Animation namespace layanan. Untungnya, mereka mengikuti konvensi penamaan ketat yang memudahkan untuk membedakannya:

  • <Ketik>Animasi

    Dikenal sebagai animasi "Dari/Ke/Oleh" atau "dasar", animasi ini antara nilai awal dan tujuan, atau dengan menambahkan nilai offset ke nilai awalnya.

    • Untuk menentukan nilai awal, atur properti Dari animasi.

    • Untuk menentukan nilai akhir, atur properti Ke animasi.

    • Untuk menentukan nilai offset, atur properti Menurut animasi.

    Contoh dalam gambaran umum ini menggunakan animasi ini, karena ini adalah yang paling sederhana untuk digunakan. Animasi Dari/Ke/Menurut dijelaskan secara rinci dalam Gambaran Umum Animasi Dari/Ke/Menurut.

  • <Ketik>AnimationUsingKeyFrames

    Animasi bingkai kunci lebih kuat daripada animasi Dari/Ke/Menurut karena Anda dapat menentukan sejumlah nilai target dan bahkan mengontrol metode interpolasinya. Beberapa jenis hanya dapat dianimasikan dengan animasi bingkai kunci. Animasi bingkai kunci dijelaskan secara rinci dalam Gambaran Umum Animasi Key-Frame.

  • <Ketik>AnimationUsingPath

    Animasi jalur memungkinkan Anda menggunakan jalur geometrik untuk menghasilkan nilai animasi.

  • <Ketik AnimationBase>

    Kelas abstrak yang, saat Anda menerapkannya, menganimasikan <nilai Jenis> . Kelas ini berfungsi sebagai kelas dasar untuk <kelas Type>Animation dan <Type>AnimationUsingKeyFrames. Anda harus berurusan langsung dengan kelas-kelas ini hanya jika Anda ingin membuat animasi kustom Anda sendiri. Jika tidak, gunakan <Animasi Tipe>atau Animasi Jenis>KeyFrame<.

Dalam kebanyakan kasus, Anda ingin menggunakan <kelas Jenis>Animasi, seperti DoubleAnimation dan ColorAnimation.

Tabel berikut ini memperlihatkan beberapa jenis animasi umum dan beberapa properti yang digunakan.

Jenis properti Animasi dasar (Dari/Ke/Oleh) yang sesuai Animasi bingkai kunci yang sesuai Animasi Jalur Terkait Contoh penggunaan
Color ColorAnimation ColorAnimationUsingKeyFrames Tidak ada Animasikan Color dari SolidColorBrush atau GradientStop.
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath Animasikan Width dari DockPanel atau Height dari Button.
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath Animasikan Center posisi EllipseGeometry.
String Tidak ada StringAnimationUsingKeyFrames Tidak ada Animasikan Text dari TextBlock atau Content dari Button.

Animasi Adalah Garis Waktu

Semua jenis animasi yang diwarisi dari Timeline kelas; oleh karena itu, semua animasi adalah jenis garis waktu khusus. mendefinisikan Timeline segmen waktu. Anda dapat menentukan perilaku waktu garis waktu: Duration, berapa kali diulang, dan bahkan seberapa cepat waktu berlangsung untuk itu.

Karena animasi adalah Timeline, animasi juga mewakili segmen waktu. Animasi juga menghitung nilai output saat berlangsung melalui segmen waktu yang ditentukan (atau Duration). Saat animasi berlangsung, atau "diputar", animasi memperbarui properti yang terkait dengannya.

Tiga properti pengaturan waktu yang sering digunakan adalah Duration, , AutoReversedan RepeatBehavior.

Properti Durasi

Seperti yang disebutkan sebelumnya, garis waktu mewakili segmen waktu. Panjang segmen tersebut ditentukan oleh Duration garis waktu, yang biasanya ditentukan dengan menggunakan TimeSpan nilai. Ketika garis waktu mencapai akhir durasinya, garis waktu telah menyelesaikan iterasi.

Animasi menggunakan propertinya Duration untuk menentukan nilainya saat ini. Jika Anda tidak menentukan Duration nilai untuk animasi, nilai tersebut menggunakan 1 detik, yang merupakan default.

Sintaks berikut menunjukkan versi yang disederhanakan dari sintaks atribut Extensible Application Markup Language (XAML) untuk properti .Duration

jam:menit:detik

Tabel berikut ini memperlihatkan beberapa Duration pengaturan dan nilai yang dihasilkan.

Pengaturan Nilai yang dihasilkan
0:0:5.5 5,5 detik.
0:30:5.5 30 menit dan 5,5 detik.
1:30:5.5 1 jam, 30 menit, dan 5,5 detik.

Salah satu cara untuk menentukan Duration dalam kode adalah dengan menggunakan FromSeconds metode untuk membuat TimeSpan, lalu mendeklarasikan struktur baru Duration menggunakan .TimeSpan

Untuk informasi selengkapnya tentang Duration nilai dan sintaks Extensible Application Markup Language (XAML) lengkap, lihat strukturnya Duration .

Putar Otomatis

Properti AutoReverse menentukan apakah garis waktu diputar mundur setelah mencapai akhir Duration. Jika Anda mengatur properti animasi ini ke true, animasi terbalik setelah mencapai akhir Duration, memutar dari nilai akhirnya kembali ke nilai awalnya. Secara default, properti ini adalah false.

RepeatBehavior

Properti RepeatBehavior menentukan berapa kali garis waktu diputar. Secara default, garis waktu memiliki jumlah 1.0iterasi , yang berarti mereka bermain satu kali dan tidak mengulangi sama sekali.

Untuk informasi selengkapnya tentang properti ini dan lainnya, lihat Gambaran Umum Perilaku Pengaturan Waktu.

Menerapkan Animasi ke Properti

Bagian sebelumnya menjelaskan berbagai jenis animasi dan properti waktunya. Bagian ini memperlihatkan cara menerapkan animasi ke properti yang ingin Anda animasikan. Storyboard objek menyediakan salah satu cara untuk menerapkan animasi ke properti. adalah Storyboardgaris waktu kontainer yang menyediakan informasi penargetan untuk animasi yang dikandungnya.

Menargetkan Objek dan Properti

Kelas Storyboard menyediakan properti yang TargetName terlampir dan TargetProperty . Dengan mengatur properti ini pada animasi, Anda memberi tahu animasi apa yang harus dianimasikan. Namun, sebelum animasi dapat menargetkan objek, objek biasanya harus diberi nama.

Menetapkan nama ke FrameworkElement berbeda dari menetapkan nama ke Freezable objek. Sebagian besar kontrol dan panel adalah elemen kerangka kerja; namun, sebagian besar objek grafis murni, seperti kuas, transformasi, dan geometri, adalah objek yang dapat dibekukan. Jika Anda tidak yakin apakah jenis adalah FrameworkElement atau Freezable, lihat bagian Hierarki Warisan dari dokumentasi referensinya.

  • Untuk membuat FrameworkElement target animasi, Anda memberinya nama dengan mengatur propertinya Name . Dalam kode, Anda juga harus menggunakan RegisterName metode untuk mendaftarkan nama elemen dengan halaman tempatnya berada.

  • Untuk menjadikan objek sebagai Freezable target animasi di XAML, Anda menggunakan x:Name Directive untuk menetapkan nama. Dalam kode, Anda hanya menggunakan RegisterName metode untuk mendaftarkan objek dengan halaman tempat objek tersebut berada.

Bagian berikut memberikan contoh penamaan elemen di XAML dan kode. Untuk informasi selengkapnya tentang penamaan dan penargetan, lihat Gambaran Umum Papan Cerita.

Menerapkan dan Memulai Papan Cerita

Untuk memulai papan cerita di XAML, Anda mengaitkannya dengan EventTrigger. Adalah EventTrigger objek yang menjelaskan tindakan apa yang harus diambil ketika peristiwa tertentu terjadi. Salah satu tindakan tersebut bisa menjadi BeginStoryboard tindakan, yang Anda gunakan untuk memulai papan cerita Anda. Pemicu peristiwa serupa dalam konsep dengan penanganan aktivitas karena memungkinkan Anda menentukan bagaimana aplikasi Anda merespons peristiwa tertentu. Tidak seperti penanganan aktivitas, pemicu peristiwa dapat sepenuhnya dijelaskan di XAML; tidak ada kode lain yang diperlukan.

Untuk memulai Storyboard dalam kode, Anda dapat menggunakan EventTrigger atau menggunakan Begin metode Storyboard kelas .

Mengontrol Papan Cerita secara interaktif

Contoh sebelumnya menunjukkan cara memulai Storyboard saat peristiwa terjadi. Anda juga dapat mengontrol Storyboard secara interaktif setelah dimulai: Anda dapat menjeda, melanjutkan, menghentikan, memajukannya ke periode pengisiannya, mencari, dan menghapus Storyboard. Untuk informasi selengkapnya dan contoh yang memperlihatkan cara mengontrol Storyboardsecara interaktif , lihat Gambaran Umum Papan Cerita.

Apa yang Terjadi Setelah Animasi Berakhir?

Properti FillBehavior menentukan bagaimana garis waktu berulah ketika berakhir. Secara default, garis waktu dimulai Filling saat berakhir. Animasi yang Filling menyimpan nilai output akhirnya.

Dalam DoubleAnimation contoh sebelumnya tidak berakhir karena propertinya RepeatBehavior diatur ke Forever. Contoh berikut menganimasikan persegi panjang dengan menggunakan animasi serupa. Tidak seperti contoh sebelumnya, RepeatBehavior properti dan AutoReverse animasi ini dibiarkan pada nilai defaultnya. Oleh karena itu, animasi berlangsung dari 1 hingga 0 selama lima detik dan kemudian berhenti.

<Rectangle
  Name="MyRectangle"
  Width="100" 
  Height="100"
  Fill="Blue">
  <Rectangle.Triggers>

    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0" Duration="0:0:5" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));

Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 1.0
myDoubleAnimation.To = 0.0
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))

FillBehavior Karena tidak diubah dari nilai defaultnya, yaitu HoldEnd, animasi menyimpan nilai akhirnya, 0, ketika berakhir. Oleh karena itu, Opacity persegi panjang tetap pada 0 setelah animasi berakhir. Jika Anda mengatur Opacity persegi panjang ke nilai lain, kode Anda tampaknya tidak berpengaruh, karena animasi masih memengaruhi Opacity properti .

Salah satu cara untuk mendapatkan kembali kontrol properti animasi dalam kode adalah dengan menggunakan BeginAnimation metode dan menentukan null untuk AnimationTimeline parameter . Untuk informasi selengkapnya dan contohnya, lihat Mengatur Properti Setelah Menganimasikannya dengan Storyboard.

Perhatikan bahwa, meskipun mengatur nilai properti yang memiliki Active animasi atau Filling tampaknya tidak berpengaruh, nilai properti berubah. Untuk informasi selengkapnya, lihat Gambaran Umum Animasi dan Sistem Pengaturan Waktu.

Pengikatan Data dan Animasi Animasi

Sebagian besar properti animasi dapat terikat data atau dianimasikan; misalnya, Anda dapat menganimasikan Duration properti dari DoubleAnimation. Namun, karena cara kerja sistem waktu, animasi terikat data atau animasi tidak bereaksi seperti data lain yang terikat atau objek animasi. Untuk memahami perilaku mereka, ini membantu memahami apa artinya menerapkan animasi ke properti.

Lihat contoh di bagian sebelumnya yang menunjukkan cara menganimasikan Opacity persegi panjang. Ketika persegi panjang dalam contoh sebelumnya dimuat, pemicu peristiwanya menerapkan Storyboard. Sistem waktu membuat salinan Storyboard dan animasinya. Salinan ini dibekukan (dibuat baca-saja) dan Clock objek dibuat darinya. Jam ini melakukan pekerjaan aktual untuk menjiwai properti yang ditargetkan.

Sistem waktu membuat jam untuk DoubleAnimation dan menerapkannya ke objek dan properti yang ditentukan oleh TargetName dan TargetProperty dari DoubleAnimation. Dalam hal ini, sistem waktu menerapkan jam ke Opacity properti objek yang diberi nama "MyRectangle."

Meskipun jam juga dibuat untuk Storyboard, jam tidak diterapkan ke properti apa pun. Tujuannya adalah untuk mengontrol jam anaknya, jam yang dibuat untuk DoubleAnimation.

Agar animasi mencerminkan pengikatan data atau perubahan animasi, jamnya harus diregenerasi. Jam tidak diregenerasi untuk Anda secara otomatis. Untuk membuat animasi mencerminkan perubahan, terapkan kembali papan ceritanya dengan menggunakan BeginStoryboard atau Begin metode . Saat Anda menggunakan salah satu metode ini, animasi dimulai ulang. Dalam kode, Anda dapat menggunakan Seek metode untuk menggeser papan cerita kembali ke posisi sebelumnya.

Untuk contoh animasi terikat data, lihat Sampel Animasi Key Spline. Untuk informasi selengkapnya tentang cara kerja sistem animasi dan waktu, lihat Gambaran Umum Animasi dan Sistem Pengaturan Waktu.

Cara Lain untuk Menganimasikan

Contoh dalam gambaran umum ini menunjukkan cara menganimasikan dengan menggunakan papan cerita. Saat menggunakan kode, Anda dapat menganimasikan dengan beberapa cara lain. Untuk informasi selengkapnya, lihat Gambaran Umum Teknik Animasi Properti.

Sampel Animasi

Sampel berikut dapat membantu Anda mulai menambahkan animasi ke aplikasi Anda.

Judul Deskripsi
Gambaran Umum Sistem Animasi dan Pengaturan Waktu Menjelaskan bagaimana sistem pengaturan waktu menggunakan Timeline kelas dan Clock , yang memungkinkan Anda membuat animasi.
Tips dan Trik Animasi Mencantumkan tips bermanfaat untuk memecahkan masalah dengan animasi, seperti performa.
Gambaran Umum Animasi Kustom Menjelaskan cara memperluas sistem animasi dengan bingkai kunci, kelas animasi, atau panggilan balik per bingkai.
Gambaran Umum Animasi Dari/Ke/Menurut Menjelaskan cara membuat animasi yang bertransisi di antara dua nilai.
Gambaran Umum Animasi Key-Frame Menjelaskan cara membuat animasi dengan beberapa nilai target, termasuk kemampuan untuk mengontrol metode interpolasi.
Meringankan Fungsi Menjelaskan cara menerapkan rumus matematika ke animasi Anda untuk mendapatkan perilaku realistis, seperti memantul.
Gambaran Umum Animasi Jalur Menjelaskan cara memindahkan atau memutar objek di sepanjang jalur kompleks.
Gambaran Umum Teknik Animasi Properti Menjelaskan animasi properti menggunakan papan cerita, animasi lokal, jam, dan animasi per bingkai.
Gambaran Umum Papan Cerita Menjelaskan cara menggunakan papan cerita dengan beberapa garis waktu untuk membuat animasi yang kompleks.
Gambaran Umum Perilaku Pengaturan Waktu Menjelaskan tipe dan properti yang Timeline digunakan dalam animasi.
Gambaran Umum Peristiwa Pengaturan Waktu Menjelaskan peristiwa yang tersedia pada Timeline objek dan Clock untuk mengeksekusi kode di titik-titik di garis waktu, seperti mulai, jeda, lanjutkan, lewati, atau hentikan.
Topik Cara Penggunaan Berisi contoh kode untuk menggunakan animasi dan garis waktu di aplikasi Anda.
Topik Panduan Jam Berisi contoh kode untuk menggunakan Clock objek di aplikasi Anda.
Topik Panduan Key-Frame Berisi contoh kode untuk menggunakan animasi bingkai kunci di aplikasi Anda.
Topik Cara Animasi Jalur Berisi contoh kode untuk menggunakan animasi jalur di aplikasi Anda.

Referensi