Gambaran Umum Teknik Animasi Properti
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 Instans" mengacu pada teknik menerapkan animasi atau papan cerita langsung ke instans objek, bukan dalam gaya, templat kontrol, atau templat data.
| Teknik animasi | Skenario | Mendukung XAML | Dapat dikontrol secara interaktif |
|---|---|---|---|
| Animasi papan cerita | Per instans, Style, ControlTemplate, DataTemplate | Ya | Ya |
| Animasi lokal | Per instans | Tidak | Tidak |
| Animasi jam | Per instans | Tidak | Ya |
| Animasi per bingkai | Per instans | Tidak | T/A |
Animasi Papan Cerita
Storyboard Gunakan 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, harus berupa FrameworkElement atau FrameworkContentElement, atau harus digunakan untuk mengatur FrameworkElement atau FrameworkContentElement. Untuk detail selengkapnya, lihat Gambaran Umum Papan Cerita.
adalah Storyboard jenis kontainer Timeline khusus 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 dari setiap animasi.
(Kode saja) NameScope Tentukan untuk FrameworkElement atau FrameworkContentElement. Daftarkan nama objek untuk dianimasikan dengan atau FrameworkElementFrameworkContentElement.
Mulai .Storyboard
Memulai menerapkan Storyboard animasi ke properti yang mereka animasikan dan memulainya. Ada dua cara untuk memulai Storyboard: Anda dapat menggunakan Begin metode yang disediakan oleh Storyboard kelas, atau Anda dapat menggunakan BeginStoryboard tindakan. Satu-satunya cara untuk menganimasikan di XAML adalah dengan menggunakan tindakan BeginStoryboard . Tindakan BeginStoryboard dapat digunakan dalam EventTriggerproperti Trigger, , atau DataTrigger.
Tabel berikut menunjukkan berbagai tempat di mana setiap Storyboard teknik pemula didukung: per instans, gaya, templat kontrol, dan templat data.
| Papan cerita dimulai menggunakan... | Per instans | Gaya | Templat kontrol | Templat data | Contoh |
|---|---|---|---|---|---|
| BeginStoryboard dan EventTrigger | Ya | Ya | Ya | Ya | Menganimasikan Properti dengan Menggunakan Storyboard |
| BeginStoryboard dan properti Trigger | Tidak | Ya | Ya | Ya | Memicu Animasi Saat Nilai Properti Berubah |
| BeginStoryboard dan a DataTrigger | Tidak | Ya | Ya | Ya | Cara: Memicu Animasi Saat Data Berubah |
| metode Begin | Ya | No | No | Tidak | Menganimasikan Properti dengan Menggunakan Storyboard |
Untuk informasi selengkapnya tentang Storyboard objek, lihat Gambaran Umum Papan Cerita.
Animasi Lokal
Animasi lokal menyediakan cara mudah untuk menganimasikan properti dependensi dari objek apa pun Animatable . Gunakan animasi lokal saat Anda ingin menerapkan satu animasi ke properti dan Anda tidak perlu mengontrol animasi secara interaktif setelah dimulai. Storyboard Tidak seperti animasi, 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.
Membuat objek AnimationTimeline.
BeginAnimation Gunakan metode objek yang ingin Anda animasikan untuk menerapkan ke AnimationTimeline properti yang Anda tentukan.
Contoh berikut menunjukkan cara menganimasikan lebar dan warna latar belakang dari 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 Clock objek 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 apa pun Animatable .
Anda tidak dapat menggunakan Clock objek secara langsung untuk menganimasikan dalam gaya, templat kontrol, atau templat data. (Sistem animasi dan waktu sebenarnya menggunakan Clock objek untuk menganimasikan dalam gaya, templat kontrol, dan templat data, tetapi harus membuat objek tersebut Clock untuk Anda dari Storyboard. Untuk informasi selengkapnya tentang hubungan antara Storyboard objek dan Clock objek, lihat Gambaran Umum Animasi dan Sistem Pengaturan Waktu.)
Untuk menerapkan satu Clock ke properti, Anda menyelesaikan langkah-langkah berikut.
Membuat objek AnimationTimeline.
CreateClock Gunakan metode AnimationTimeline untuk membuat AnimationClock.
ApplyAnimationClock Gunakan metode objek yang ingin Anda animasikan untuk menerapkan ke AnimationClock 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 menganimasikan properti, Anda menyelesaikan langkah-langkah berikut.
Gunakan ParallelTimeline objek dan AnimationTimeline untuk membuat pohon waktu.
CreateClock Gunakan akar ParallelTimeline untuk membuat ClockGroup.
Iterasi melalui Children dan terapkan ClockGroup objek anaknya Clock . Untuk setiap AnimationClock anak, gunakan ApplyAnimationClock metode objek yang ingin Anda animasikan untuk menerapkan ke AnimationClock properti yang Anda tentukan
Untuk informasi selengkapnya tentang objek Jam, lihat Gambaran Umum Animasi dan Sistem Pengaturan Waktu.
Animasi Per Bingkai: 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-by-frame, Anda mendaftar untuk Rendering peristiwa objek yang berisi objek yang ingin Anda animasikan. Metode penanganan aktivitas ini dipanggil sekali per bingkai. Setiap kali WPF melakukan marsekal data penyajian yang bertahan di pohon visual di seberang pohon komposisi, metode penanganan aktivitas 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 ditransmisikan sebagai RenderingEventArgs, yang menyediakan RenderingTime properti yang dapat Anda gunakan untuk mendapatkan waktu penyajian bingkai saat ini.
Untuk informasi selengkapnya, lihat Rendering halaman.
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