Gambaran Umum Animasi Dari/Ke/Berdasarkan
Topik ini menjelaskan cara menggunakan animasi Dari/Ke/Menurut untuk menganimasikan properti dependensi. Animasi Dari/Ke/Menurut membuat transisi di antara dua nilai.
Prasyarat
Untuk memahami topik ini, Anda harus terbiasa dengan fitur animasi WPF. Untuk pengenalan fitur animasi, lihat Gambaran Umum Animasi.
Apa itu Animasi Dari/Ke/Menurut?
Animasi Dari/Ke/Menurut adalah jenis AnimationTimeline yang membuat transisi antara nilai awal dan nilai akhir. Jumlah waktu yang diperlukan transisi untuk diselesaikan ditentukan oleh animasi tersebut Duration .
Anda dapat menerapkan animasi Dari/Ke/Menurut ke properti dengan menggunakan Storyboard dalam markup dan kode, atau dengan menggunakan BeginAnimation metode dalam kode. Anda juga dapat menggunakan Animasi Dari/Ke/Menurut 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.
Dari/Ke/Menurut animasi tidak boleh memiliki lebih dari dua nilai target. Jika Anda memerlukan animasi yang memiliki lebih dari dua nilai target, gunakan animasi bingkai kunci. Animasi bingkai kunci dijelaskan dalam Gambaran Umum Animasi Key-Frame.
Dari/Ke/Menurut Tipe Animasi
Karena animasi menghasilkan nilai properti, ada jenis animasi yang berbeda untuk jenis 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.
Dari/Ke/Menurut kelas animasi milik System.Windows.Media.Animation namespace layanan dan gunakan konvensi penamaan berikut:
<Jenis>Animation
Di mana <Jenis> adalah jenis nilai yang dianimasikan kelas.
WPF menyediakan kelas animasi Dari/Ke/Menurut berikut.
| Jenis properti | Kelas animasi Dari/Ke/Menurut yang Sesuai |
|---|---|
| Byte | ByteAnimation |
| Color | ColorAnimation |
| Decimal | DecimalAnimation |
| Double | DoubleAnimation |
| Int16 | Int16Animation |
| Int32 | Int32Animation |
| Int64 | Int64Animation |
| Point | PointAnimation |
| Quaternion | QuaternionAnimation |
| Rect | RectAnimation |
| Rotation3D | Rotation3DAnimation |
| Single | SingleAnimation |
| Size | SizeAnimation |
| Thickness | ThicknessAnimation |
| Vector3D | Vector3DAnimation |
| Vector | VectorAnimation |
Nilai Target
Animasi Dari/Ke/Menurut membuat transisi antara dua nilai target. Adalah umum untuk menentukan nilai awal (mengaturnya dengan menggunakan From properti) dan nilai akhir (atur dengan menggunakan To properti ). Namun, Anda juga hanya dapat menentukan nilai awal, nilai tujuan, atau nilai offset. Dalam kasus ini, animasi mendapatkan nilai target yang hilang dari properti yang sedang dianimasikan. Daftar berikut ini menjelaskan berbagai cara untuk menentukan nilai target animasi.
Nilai Awal
From Gunakan properti saat Anda ingin secara eksplisit menentukan nilai awal animasi. Anda dapat menggunakan properti dengan sendirinya FromTo , atau dengan properti atau By . Jika Anda hanya From menentukan properti , animasi beralih dari nilai tersebut ke nilai dasar properti animasi.
Nilai Akhir
Untuk menentukan nilai akhir animasi, gunakan propertinya To . Jika Anda menggunakan properti dengan To sendirinya, animasi mendapatkan nilai awal dari properti yang sedang dianimasikan atau dari output animasi lain yang diterapkan ke properti yang sama. Anda dapat menggunakan To properti bersama dengan From properti untuk secara eksplisit menentukan nilai awal dan akhir untuk animasi.
Nilai Offset
Properti By memungkinkan Anda menentukan offset alih-alih nilai awal atau akhir eksplisit untuk animasi. Properti By animasi ditentukan oleh berapa banyak animasi mengubah nilai selama durasinya. Anda dapat menggunakan properti dengan sendirinya ByFrom atau dengan properti . Jika Anda hanya By menentukan properti , animasi menambahkan nilai offset ke nilai dasar properti atau ke output animasi lain.
Menggunakan Dari/Ke/Menurut Nilai
Bagian berikut menjelaskan cara menggunakan Fromproperti , , Todan By secara bersamaan atau terpisah.
Contoh di bagian ini masing-masing menggunakan DoubleAnimation, yang merupakan jenis animasi Dari/Ke/Menurut, untuk menganimasikan Width properti Rectangle yang memiliki 10 piksel independen perangkat tinggi dan lebar 100 piksel independen perangkat.
Meskipun setiap contoh menggunakan DoubleAnimationproperti Dari, Ke, dan Menurut dari semua animasi Dari/Ke/Menurut berulah secara identik. Meskipun masing-masing contoh ini menggunakan Storyboard, Anda dapat menggunakan animasi Dari/Ke/Oleh dengan cara lain. Untuk informasi selengkapnya, lihat Gambaran Umum Teknik Animasi Properti.
Dari/Ke
Saat Anda mengatur From nilai dan To bersama-sama, animasi berlanjut dari nilai yang ditentukan oleh From properti , ke nilai yang ditentukan oleh To properti .
Contoh berikut mengatur From properti ke DoubleAnimation 50 dan propertinya To menjadi 300. Akibatnya, Width dianimasikan Rectangle dari 50 hingga 300.
// Demonstrates the From and To properties used together.
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
Rectangle myRectangle = new Rectangle();
// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"fromToAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Black;
// Demonstrates the From and To properties used together.
// Animates the rectangle's Width property from 50 to 300 over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.To = 300;
myDoubleAnimation.Duration =
new Duration(TimeSpan.FromSeconds(10));
Storyboard.SetTargetName(myDoubleAnimation, "fromToAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
{
myStoryboard.Begin(myRectangle);
};
' Demonstrates the From and To properties used together.
' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())
Dim myRectangle As New Rectangle()
' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("fromToAnimatedRectangle", myRectangle)
myRectangle.Height = 10
myRectangle.Width = 100
myRectangle.HorizontalAlignment = HorizontalAlignment.Left
myRectangle.Fill = Brushes.Black
' Demonstrates the From and To properties used together.
' Animates the rectangle's Width property from 50 to 300 over 10 seconds.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 50
myDoubleAnimation.To = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))
Storyboard.SetTargetName(myDoubleAnimation, "fromToAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)
' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)
Untuk
Saat Anda hanya To mengatur properti, animasi berlanjut dari nilai dasar properti animasi, atau dari output animasi pembuatan yang sebelumnya diterapkan ke properti yang sama, ke nilai yang ditentukan oleh To properti .
("Membuat animasi" mengacu pada Active animasi atau Filling yang sebelumnya diterapkan ke properti yang sama yang masih berlaku ketika animasi saat ini diterapkan dengan menggunakan Compose perilaku handoff.)
Contoh berikut hanya To menetapkan properti dari DoubleAnimation ke 300. Karena tidak ada nilai awal yang ditentukan, DoubleAnimation menggunakan nilai dasar (100) Width properti sebagai nilai awalnya. dianimasikan WidthRectangle dari 100 ke nilai target animasi 300.
// Demonstrates the use of the To property.
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
Rectangle myRectangle = new Rectangle();
// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"toAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Gray;
// Demonstrates the To property used by itself. Animates
// the Rectangle's Width property from its base value
// (100) to 300 over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.To = 300;
myDoubleAnimation.Duration =
new Duration(TimeSpan.FromSeconds(10));
Storyboard.SetTargetName(myDoubleAnimation, "toAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
{
myStoryboard.Begin(myRectangle);
};
' Demonstrates the use of the To property.
' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())
Dim myRectangle As New Rectangle()
' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("toAnimatedRectangle", myRectangle)
myRectangle.Height = 10
myRectangle.Width = 100
myRectangle.HorizontalAlignment = HorizontalAlignment.Left
myRectangle.Fill = Brushes.Gray
' Demonstrates the To property used by itself. Animates
' the Rectangle's Width property from its base value
' (100) to 300 over 10 seconds.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.To = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))
Storyboard.SetTargetName(myDoubleAnimation, "toAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)
' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)
Oleh
Saat Anda hanya By mengatur properti animasi, animasi berlanjut dari nilai dasar properti yang sedang dianimasikan, atau dari output animasi yang menyusun ke jumlah nilai tersebut dan nilai yang ditentukan oleh By properti .
Contoh berikut hanya By menetapkan properti dari DoubleAnimation ke 300. Karena contoh tidak menentukan nilai awal, DoubleAnimation menggunakan nilai Width dasar properti, 100, sebagai nilai awalnya. Nilai akhir ditentukan dengan menambahkan By nilai animasi, 300, ke nilai awalnya, 100: 400. Akibatnya, Width dianimasikan Rectangle dari 100 hingga 400.
// Demonstrates the use of the By property.
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
Rectangle myRectangle = new Rectangle();
// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"byAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.RoyalBlue;
// Demonstrates the By property used by itself.
// Increments the Rectangle's Width property by 300 over 10 seconds.
// As a result, the Width property is animated from its base value
// (100) to 400 (100 + 300) over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.By = 300;
myDoubleAnimation.Duration =
new Duration(TimeSpan.FromSeconds(10));
Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
{
myStoryboard.Begin(myRectangle);
};
' Demonstrates the use of the By property.
' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())
Dim myRectangle As New Rectangle()
' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("byAnimatedRectangle", myRectangle)
myRectangle.Height = 10
myRectangle.Width = 100
myRectangle.HorizontalAlignment = HorizontalAlignment.Left
myRectangle.Fill = Brushes.RoyalBlue
' Demonstrates the By property used by itself.
' Increments the Rectangle's Width property by 300 over 10 seconds.
' As a result, the Width property is animated from its base value
' (100) to 400 (100 + 300) over 10 seconds.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.By = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))
Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)
' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)
Dari/Menurut
Saat Anda mengatur From properti dan By animasi, animasi berlanjut dari nilai yang ditentukan oleh From properti , ke nilai yang ditentukan oleh jumlah From properti dan By .
Contoh berikut mengatur From properti ke DoubleAnimation 50 dan propertinya By menjadi 300. Nilai akhir ditentukan dengan menambahkan By nilai animasi, 300, ke nilai awalnya, 50: 350. Akibatnya, Width dianimasikan Rectangle dari 50 hingga 350.
// Demonstrates the use of the From and By properties.
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
Rectangle myRectangle = new Rectangle();
// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"byAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.BlueViolet;
// Demonstrates the From and By properties used together.
// Increments the Rectangle's Width property by 300 over 10 seconds.
// As a result, the Width property is animated from 50
// to 350 (50 + 300) over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.By = 300;
myDoubleAnimation.Duration =
new Duration(TimeSpan.FromSeconds(10));
Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
{
myStoryboard.Begin(myRectangle);
};
' Demonstrates the use of the From and By properties.
' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())
Dim myRectangle As New Rectangle()
' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("byAnimatedRectangle", myRectangle)
myRectangle.Height = 10
myRectangle.Width = 100
myRectangle.HorizontalAlignment = HorizontalAlignment.Left
myRectangle.Fill = Brushes.BlueViolet
' Demonstrates the From and By properties used together.
' Increments the Rectangle's Width property by 300 over 10 seconds.
' As a result, the Width property is animated from 50
' to 350 (50 + 300) over 10 seconds.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 50
myDoubleAnimation.By = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))
Storyboard.SetTargetName(myDoubleAnimation, "byAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)
' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)
Dari
Saat Anda hanya From menentukan nilai animasi, animasi berlanjut dari nilai yang ditentukan oleh From properti, ke nilai dasar properti yang sedang dianimasikan atau ke output animasi pembuatan.
Contoh berikut hanya From mengatur properti dari ke DoubleAnimation 50. Karena tidak ada nilai akhir yang ditentukan, DoubleAnimation menggunakan nilai Width dasar properti, 100, sebagai nilai akhirnya. Width dari Rectangle dianimasikan dari 50 ke nilai Width dasar properti, 100.
// Demonstrates the use of the From property.
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
Rectangle myRectangle = new Rectangle();
// Assign the Rectangle a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"fromAnimatedRectangle", myRectangle);
myRectangle.Height = 10;
myRectangle.Width = 100;
myRectangle.HorizontalAlignment = HorizontalAlignment.Left;
myRectangle.Fill = Brushes.Purple;
// Demonstrates the From property used by itself. Animates the
// rectangle's Width property from 50 to its base value (100)
// over 10 seconds.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 50;
myDoubleAnimation.Duration =
new Duration(TimeSpan.FromSeconds(10));
Storyboard.SetTargetName(myDoubleAnimation, "fromAnimatedRectangle");
Storyboard.SetTargetProperty(myDoubleAnimation,
new PropertyPath(Rectangle.WidthProperty));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
// Use an anonymous event handler to begin the animation
// when the rectangle is clicked.
myRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs args)
{
myStoryboard.Begin(myRectangle);
};
' Demonstrates the use of the From property.
' Create a NameScope for this page so that
' Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())
Dim myRectangle As New Rectangle()
' Assign the Rectangle a name so that
' it can be targeted by a Storyboard.
Me.RegisterName("fromAnimatedRectangle", myRectangle)
myRectangle.Height = 10
myRectangle.Width = 100
myRectangle.HorizontalAlignment = HorizontalAlignment.Left
myRectangle.Fill = Brushes.Purple
' Demonstrates the From property used by itself. Animates the
' rectangle's Width property from 50 to its base value (100)
' over 10 seconds.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 50
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(10))
Storyboard.SetTargetName(myDoubleAnimation, "fromAnimatedRectangle")
Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.WidthProperty))
Dim myStoryboard As New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)
' Use an anonymous event handler to begin the animation
' when the rectangle is clicked.
AddHandler myRectangle.MouseLeftButtonDown, Sub(sender As Object, args As MouseButtonEventArgs) myStoryboard.Begin(myRectangle)
Ke/Oleh
Jika Anda mengatur To properti dan By animasi, By properti diabaikan.
Tipe Animasi Lainnya
Dari/Ke/Oleh animasi bukan satu-satunya jenis animasi yang disediakan WPF: ini juga menyediakan animasi bingkai kunci dan animasi jalur.
Animasi bingkai kunci menganimasikan di sepanjang sejumlah nilai tujuan, yang dijelaskan menggunakan bingkai kunci. Untuk informasi selengkapnya, lihat Gambaran Umum Animasi Key-Frame.
Animasi jalur menghasilkan nilai output dari PathGeometry. Untuk informasi selengkapnya, lihat Gambaran Umum Animasi Jalur.
WPF juga memungkinkan Anda membuat jenis animasi kustom Anda sendiri. Untuk informasi selengkapnya, lihat Gambaran Umum Animasi Kustom.
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