Gambaran Umum Teknik Animasi Properti

Artikel
12/18/2024

Topik ini menjelaskan berbagai pendekatan untuk menganimasikan properti: papan cerita, animasi lokal, jam, dan animasi per bingkai.

Prasyarat

Untuk memahami topik ini, Anda harus terbiasa dengan fitur animasi dasar yang dijelaskan dalam gambaran umum animasi .

Berbagai Cara untuk Menganimasikan

Karena ada banyak skenario berbeda untuk menganimasikan properti, WPF menyediakan beberapa pendekatan untuk menganimasikan properti.

Untuk setiap pendekatan, tabel berikut menunjukkan apakah dapat digunakan per instans, dalam gaya, dalam templat kontrol, atau dalam templat data; apakah dapat digunakan dalam XAML; dan apakah pendekatan memungkinkan Anda mengontrol animasi secara interaktif. "Per-Instance" mengacu pada teknik menerapkan animasi atau papan cerita langsung ke instans suatu objek, bukan melalui gaya, templat kontrol, atau templat data.

Teknik animasi	Skenario	Mendukung XAML	Dapat dikontrol secara interaktif
Animasi papan cerita	Per-instance, Style, ControlTemplate, DataTemplate	Ya	Ya
Animasi lokal	Per-individu	Tidak	Tidak
Animasi jam	Berdasarkan setiap instance	Tidak	Ya
Animasi per bingkai	Per kasus	Tidak	N/A

Animasi Papan Cerita

Gunakan Storyboard saat Anda ingin menentukan dan menerapkan animasi Anda di XAML, secara interaktif mengontrol animasi Anda setelah dimulai, membuat pohon animasi yang kompleks, atau menganimasikan dalam Style, ControlTemplate atau DataTemplate. Agar objek dianimasikan oleh Storyboard, objek harus berupa FrameworkElement atau FrameworkContentElement, atau harus digunakan untuk mengatur FrameworkElement atau FrameworkContentElement. Untuk detail selengkapnya, lihat gambaran umum Storyboards.

Storyboard adalah jenis kontainer khusus Timeline yang menyediakan informasi penargetan untuk animasi yang dikandungnya. Untuk menganimasikan dengan Storyboard, Anda menyelesaikan tiga langkah berikut.

Deklarasikan Storyboard dan satu atau beberapa animasi.
Gunakan properti terlampir TargetName dan TargetProperty untuk menentukan objek target dan properti setiap animasi.
(Kode saja) Tentukan NameScope untuk FrameworkElement atau FrameworkContentElement. Daftarkan nama objek untuk dianimasikan dengan FrameworkElement atau FrameworkContentElementtersebut.
Mulai Storyboard.

Memulai Storyboard menerapkan animasi pada properti yang dianimasikan dan memulainya. Ada dua cara untuk memulai Storyboard: Anda dapat menggunakan metode Begin yang disediakan oleh kelas Storyboard, atau Anda dapat menggunakan tindakan BeginStoryboard. Satu-satunya cara untuk menganimasikan di XAML adalah dengan menggunakan tindakan BeginStoryboard. Tindakan BeginStoryboard dapat digunakan dalam EventTrigger, properti Trigger, atau DataTrigger.

Tabel berikut menunjukkan tempat di mana setiap teknik mulai Storyboard mendapatkan dukungan: per instance, gaya, templat kontrol, dan templat data.

Storyboard dimulai dengan menggunakan...	Per contoh	Gaya	Templat kontrol	Templat data	Contoh
BeginStoryboard dan EventTrigger	Ya	Ya	Ya	Ya	Menganimasikan Properti dengan Storyboard
BeginStoryboard dan properti Trigger	Tidak	Ya	Ya	Ya	Memicu Animasi Saat Nilai Properti Berubah
BeginStoryboard dan DataTrigger	Tidak	Ya	Ya	Ya	Cara: Memicu Animasi Saat Data Berubah
metode Begin	Ya	Tidak	Tidak	Tidak	Menganimasikan sebuah Properti dengan Storyboard

Untuk informasi selengkapnya tentang objek Storyboard, lihat Gambaran Umum Storyboards.

Animasi Lokal

Animasi lokal menyediakan cara mudah untuk menganimasikan properti dependensi dari objek Animatable apa pun. Gunakan animasi lokal saat Anda ingin menerapkan satu animasi ke properti dan Anda tidak perlu mengontrol animasi secara interaktif setelah dimulai. Tidak seperti animasi Storyboard, animasi lokal dapat menganimasikan objek yang tidak terkait dengan FrameworkElement atau FrameworkContentElement. Anda juga tidak perlu menentukan NameScope untuk jenis animasi ini.

Animasi lokal hanya dapat digunakan dalam kode, dan tidak dapat ditentukan dalam gaya, templat kontrol, atau templat data. Animasi lokal tidak dapat dikontrol secara interaktif setelah dimulai.

Untuk menganimasikan menggunakan animasi lokal, selesaikan langkah-langkah berikut.

Buat objek AnimationTimeline.
Gunakan metode BeginAnimation objek yang ingin Anda animasikan untuk menerapkan AnimationTimeline ke properti yang Anda tentukan.

Contoh berikut menunjukkan cara menganimasikan lebar dan warna latar belakang Button.

/*

   This sample demonstrates how to apply non-storyboard animations to a property.
   To animate in markup, you must use storyboards.

*/

using namespace System;
using namespace System::Windows;
using namespace System::Windows::Navigation;
using namespace System::Windows::Media;
using namespace System::Windows::Media::Animation;
using namespace System::Windows::Shapes;
using namespace System::Windows::Controls;


namespace Microsoft {
   namespace Samples {
      namespace Animation {
         namespace LocalAnimations {
            // Create the demonstration.
            public ref class LocalAnimationExample : Page {

            public: 
               LocalAnimationExample ()
               {
                  WindowTitle = "Local Animation Example";
                  StackPanel^ myStackPanel = gcnew StackPanel();
                  myStackPanel->Margin = Thickness(20);

                  // Create and set the Button.
                  Button^ aButton = gcnew Button();
                  aButton->Content = "A Button";

                  // Animate the Button's Width.
                  DoubleAnimation^ myDoubleAnimation = gcnew DoubleAnimation();
                  myDoubleAnimation->From = 75;
                  myDoubleAnimation->To = 300;
                  myDoubleAnimation->Duration = Duration(TimeSpan::FromSeconds(5));
                  myDoubleAnimation->AutoReverse = true;
                  myDoubleAnimation->RepeatBehavior = RepeatBehavior::Forever;

                  // Apply the animation to the button's Width property.
                  aButton->BeginAnimation(Button::WidthProperty, myDoubleAnimation);

                  // Create and animate a Brush to set the button's Background.
                  SolidColorBrush^ myBrush = gcnew SolidColorBrush();
                  myBrush->Color = Colors::Blue;

                  ColorAnimation^ myColorAnimation = gcnew ColorAnimation();
                  myColorAnimation->From = Colors::Blue;
                  myColorAnimation->To = Colors::Red;
                  myColorAnimation->Duration = Duration(TimeSpan::FromMilliseconds(7000));
                  myColorAnimation->AutoReverse = true;
                  myColorAnimation->RepeatBehavior = RepeatBehavior::Forever;

                  // Apply the animation to the brush's Color property.
                  myBrush->BeginAnimation(SolidColorBrush::ColorProperty, myColorAnimation);
                  aButton->Background = myBrush;

                  // Add the Button to the panel.
                  myStackPanel->Children->Add(aButton);
                  this->Content = myStackPanel;
               };
            };
         }
      }
   }
}

/*

   This sample demonstrates how to apply non-storyboard animations to a property.
   To animate in markup, you must use storyboards.

*/

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

namespace Microsoft.Samples.Animation.LocalAnimations
{

    // Create the demonstration.
    public class LocalAnimationExample : Page
    {

        public LocalAnimationExample()
        {

            WindowTitle = "Local Animation Example";
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(20);

            // Create and set the Button.
            Button aButton = new Button();
            aButton.Content = "A Button";

            // Animate the Button's Width.
            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 75;
            myDoubleAnimation.To = 300;
            myDoubleAnimation.Duration =  new Duration(TimeSpan.FromSeconds(5));
            myDoubleAnimation.AutoReverse = true;
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Apply the animation to the button's Width property.
            aButton.BeginAnimation(Button.WidthProperty, myDoubleAnimation);

            // Create and animate a Brush to set the button's Background.
            SolidColorBrush myBrush = new SolidColorBrush();
            myBrush.Color = Colors.Blue;

            ColorAnimation myColorAnimation = new ColorAnimation();
            myColorAnimation.From = Colors.Blue;
            myColorAnimation.To = Colors.Red;
            myColorAnimation.Duration =  new Duration(TimeSpan.FromMilliseconds(7000));
            myColorAnimation.AutoReverse = true;
            myColorAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Apply the animation to the brush's Color property.
            myBrush.BeginAnimation(SolidColorBrush.ColorProperty, myColorAnimation);
            aButton.Background = myBrush;

            // Add the Button to the panel.
            myStackPanel.Children.Add(aButton);
            this.Content = myStackPanel;
        }
    }
}

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
'''This sample demonstrates how to apply non-storyboard animations to a property.
'''To animate in markup, you must use storyboards.
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

Imports System.Windows
Imports System.Windows.Navigation
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes
Imports System.Windows.Controls

Namespace Microsoft.Samples.Animation.LocalAnimations

    ' Create the demonstration.
    Public Class LocalAnimationExample
        Inherits Page

        Public Sub New()

            WindowTitle = "Animate Property Example"
            Dim myStackPanel As New StackPanel()
            myStackPanel.Margin = New Thickness(20)

            ' Create and set the Button.
            Dim aButton As New Button()
            aButton.Content = "A Button"

            ' Animate the Button's Width.
            Dim myDoubleAnimation As New DoubleAnimation()
            myDoubleAnimation.From = 75
            myDoubleAnimation.To = 300
            myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
            myDoubleAnimation.AutoReverse = True
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

            ' Apply the animation to the button's Width property.
            aButton.BeginAnimation(Button.WidthProperty, myDoubleAnimation)

            ' Create and animate a Brush to set the button's Background.
            Dim myBrush As New SolidColorBrush()
            myBrush.Color = Colors.Blue

            Dim myColorAnimation As New ColorAnimation()
            myColorAnimation.From = Colors.Blue
            myColorAnimation.To = Colors.Red
            myColorAnimation.Duration = New Duration(TimeSpan.FromMilliseconds(7000))
            myColorAnimation.AutoReverse = True
            myColorAnimation.RepeatBehavior = RepeatBehavior.Forever

            ' Apply the animation to the brush's Color property.
            myBrush.BeginAnimation(SolidColorBrush.ColorProperty, myColorAnimation)
            aButton.Background = myBrush

            ' Add the Button to the panel.
            myStackPanel.Children.Add(aButton)
            Me.Content = myStackPanel
        End Sub
    End Class
End Namespace

Animasi Jam

Gunakan objek Clock saat Anda ingin menganimasikan tanpa menggunakan Storyboard dan Anda ingin membuat pohon pengaturan waktu yang kompleks atau mengontrol animasi secara interaktif setelah dimulai. Anda dapat menggunakan objek Clock untuk menganimasikan properti dependensi dari objek Animatable apa pun.

Anda tidak dapat menggunakan objek Clock langsung untuk menganimasikan dalam gaya, templat kontrol, atau templat data. (Sistem animasi dan pengaturan waktu sebenarnya menggunakan objek Clock untuk animasi dalam gaya, templat kontrol, dan templat data, tetapi harus membuat objek Clock tersebut untuk Anda dari Storyboard. Untuk informasi selengkapnya tentang hubungan antara objek Storyboard dan objek Clock, lihat Gambaran Umum Sistem Animasi dan Pengaturan Waktu di .)

Untuk menerapkan satu Clock ke properti, Anda ikuti langkah-langkah berikut.

Buat objek AnimationTimeline.
Gunakan metode CreateClock dari AnimationTimeline untuk membuat AnimationClock.
Gunakan metode ApplyAnimationClock objek yang ingin Anda animasikan untuk menerapkan AnimationClock ke properti yang Anda tentukan.

Contoh berikut menunjukkan cara membuat AnimationClock dan menerapkannya ke dua properti serupa.

/*
    This example shows how to create and apply
    an AnimationClock.
*/

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

namespace Microsoft.Samples.Animation.TimingBehaviors
{
    public class AnimationClockExample : Page
    {

        ScaleTransform myScaleTransform;

        public AnimationClockExample()
        {

            this.WindowTitle = "Opacity Animation Example";
            this.Background = Brushes.White;
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(20);

            // Create a button that with a ScaleTransform.
            // The ScaleTransform will animate when the
            // button is clicked.
            Button myButton = new Button();
            myButton.Margin = new Thickness(50);
            myButton.HorizontalAlignment = HorizontalAlignment.Left;
            myButton.Content = "Click Me";
            myScaleTransform = new ScaleTransform(1,1);
            myButton.RenderTransform = myScaleTransform;

            // Associate an event handler with the
            // button's Click event.
            myButton.Click += new RoutedEventHandler(myButton_Clicked);

            myStackPanel.Children.Add(myButton);
            this.Content = myStackPanel;
        }

        // Create and apply and animation when the button is clicked.
        private void myButton_Clicked(object sender, RoutedEventArgs e)
        {

            // Create a DoubleAnimation to animate the
            // ScaleTransform.
            DoubleAnimation myAnimation =
                new DoubleAnimation(
                    1, // "From" value
                    5, // "To" value
                    new Duration(TimeSpan.FromSeconds(5))
                );
            myAnimation.AutoReverse = true;

            // Create a clock the for the animation.
            AnimationClock myClock = myAnimation.CreateClock();

            // Associate the clock the ScaleX and
            // ScaleY properties of the button's
            // ScaleTransform.
            myScaleTransform.ApplyAnimationClock(
                ScaleTransform.ScaleXProperty, myClock);
            myScaleTransform.ApplyAnimationClock(
                ScaleTransform.ScaleYProperty, myClock);
        }
    }
}

'
'    This example shows how to create and apply
'    an AnimationClock.
'


Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Shapes
Imports System.Windows.Media.Animation


Namespace Microsoft.Samples.Animation.TimingBehaviors
    Public Class AnimationClockExample
        Inherits Page

        Private ReadOnly myScaleTransform As ScaleTransform

        Public Sub New()

            WindowTitle = "Opacity Animation Example"
            Background = Brushes.White
            Dim myStackPanel As New StackPanel With {
                .Margin = New Thickness(20)
            }

                ' Create a button that with a ScaleTransform.
                ' The ScaleTransform will animate when the
                ' button is clicked.
            Dim myButton As New Button With {
                .Margin = New Thickness(50),
                .HorizontalAlignment = HorizontalAlignment.Left,
                .Content = "Click Me"
            }
            myScaleTransform = New ScaleTransform(1,1)
            myButton.RenderTransform = myScaleTransform


            ' Associate an event handler with the
            ' button's Click event.
            AddHandler myButton.Click, AddressOf myButton_Clicked

            myStackPanel.Children.Add(myButton)
            Content = myStackPanel
        End Sub

        ' Create and apply and animation when the button is clicked.
        Private Sub myButton_Clicked(sender As Object, e As RoutedEventArgs)

            ' Create a DoubleAnimation to animate the
            ' ScaleTransform.
            Dim myAnimation As New DoubleAnimation(1, 5, New Duration(TimeSpan.FromSeconds(5))) With {
                .AutoReverse = True
            } ' "To" value -  "From" value

            ' Create a clock the for the animation.
            Dim myClock As AnimationClock = myAnimation.CreateClock()

            ' Associate the clock the ScaleX and
            ' ScaleY properties of the button's
            ' ScaleTransform.
            myScaleTransform.ApplyAnimationClock(ScaleTransform.ScaleXProperty, myClock)
            myScaleTransform.ApplyAnimationClock(ScaleTransform.ScaleYProperty, myClock)
        End Sub
    End Class
End Namespace

Untuk membuat pohon waktu dan menggunakannya untuk menganimasikan properti, Anda harus menyelesaikan langkah-langkah berikut.

Gunakan objek ParallelTimeline dan AnimationTimeline untuk membuat pohon waktu.
Gunakan CreateClock dari root ParallelTimeline untuk membuat ClockGroup.
Iterasi melalui Children dari ClockGroup dan terapkan objek-objek anaknya Clock. Untuk setiap elemen AnimationClock, gunakan metode ApplyAnimationClock dari objek yang ingin Anda animasikan untuk menerapkan AnimationClock pada properti yang Anda tentukan.

Untuk informasi selengkapnya tentang objek Jam, lihat Gambaran Umum Sistem Animasi dan Pengaturan Waktu .

Animasi Per-Frame: Melewati Animasi dan Sistem Pengaturan Waktu

Gunakan pendekatan ini ketika Anda perlu sepenuhnya melewati sistem animasi WPF. Salah satu skenario untuk pendekatan ini adalah animasi fisika, di mana setiap langkah dalam animasi mengharuskan objek dikomputasi ulang berdasarkan serangkaian interaksi objek terakhir.

Animasi per bingkai tidak dapat ditentukan di dalam gaya, templat kontrol, atau templat data.

Untuk menganimasikan frame-per-frame, Anda mendaftarkan diri untuk acara Rendering dari objek yang berisi objek-objek yang ingin Anda animasikan. Metode pengendali peristiwa ini dipanggil sekali per frame. Setiap kali WPF memarshalkan data rendering yang disimpan dari pohon visual ke pohon komposisi, metode penanganan acara Anda dipanggil.

Di penanganan aktivitas Anda, lakukan perhitungan apa pun yang diperlukan untuk efek animasi Anda dan atur properti objek yang ingin Anda animasikan dengan nilai-nilai ini.

Untuk mendapatkan waktu presentasi untuk bingkai saat ini, EventArgs yang terkait dengan peristiwa ini dapat dilemparkan sebagai RenderingEventArgs, yang menyediakan properti RenderingTime yang dapat Anda gunakan untuk mendapatkan waktu penyajian bingkai saat ini.

Untuk informasi selengkapnya, lihat halaman Rendering.

Lihat juga

Gambaran Umum Animasi
Gambaran Umum Storyboards
Gambaran Umum Animasi dan Pengaturan Waktu
Gambaran Umum Properti Dependensi

Bagikan melalui