Gambaran Umum Animasi Jalur
Topik ini memperkenalkan animasi jalur, yang memungkinkan Anda menggunakan jalur geometris untuk menghasilkan nilai output. Animasi jalur berguna untuk memindahkan dan memutar objek di sepanjang jalur kompleks.
Prasyarat
Untuk memahami topik ini, Anda harus terbiasa dengan fitur animasi WPF. Untuk pengenalan fitur animasi, lihat Gambaran Umum Animasi.
Karena Anda menggunakan PathGeometry objek untuk menentukan animasi jalur, Anda juga harus terbiasa dengan PathGeometry dan berbagai jenis PathSegment objek. Untuk informasi selengkapnya, lihat Gambaran Umum Geometri.
Apa itu Animasi Jalur?
Animasi jalur adalah jenis AnimationTimeline yang menggunakan PathGeometry sebagai inputnya. Alih-alih mengatur properti Dari, Ke, atau Menurut (seperti yang Anda lakukan untuk animasi Dari/Ke/Menurut) atau menggunakan bingkai kunci (seperti yang Anda gunakan untuk animasi bingkai kunci), Anda menentukan jalur geometrik dan menggunakannya untuk mengatur PathGeometry properti animasi jalur. Saat animasi jalur berlangsung, ia membaca informasi x, y, dan sudut dari jalur dan menggunakan informasi tersebut untuk menghasilkan outputnya.
Animasi jalur sangat berguna untuk menganimasikan objek di sepanjang jalur yang kompleks. Salah satu cara untuk memindahkan objek di sepanjang jalur adalah dengan menggunakan MatrixTransform dan MatrixAnimationUsingPath untuk mengubah objek di sepanjang jalur yang kompleks. Contoh berikut menunjukkan teknik ini dengan menggunakan MatrixAnimationUsingPath objek untuk menganimasikan Matrix properti dari MatrixTransform. MatrixTransform diterapkan ke tombol dan menyebabkannya bergerak di sepanjang jalur melengkung. DoesRotateWithTangent Karena properti diatur ke true, persegi panjang berputar di sepanjang tangen jalur.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="PresentationOptions" Margin="20">
<Canvas Width="400" Height="400">
<!-- The Button that is animated across the screen by animating
the MatrixTransform applied to the button. -->
<Button MinWidth="100" Content="A Button">
<Button.RenderTransform>
<MatrixTransform x:Name="ButtonMatrixTransform">
<MatrixTransform.Matrix >
<Matrix />
</MatrixTransform.Matrix>
</MatrixTransform>
</Button.RenderTransform>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Loaded">
<BeginStoryboard>
<Storyboard>
<MatrixAnimationUsingPath
Storyboard.TargetName="ButtonMatrixTransform"
Storyboard.TargetProperty="Matrix"
DoesRotateWithTangent="True"
Duration="0:0:5"
RepeatBehavior="Forever" >
<MatrixAnimationUsingPath.PathGeometry>
<PathGeometry
Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"
PresentationOptions:Freeze="True" />
</MatrixAnimationUsingPath.PathGeometry>
</MatrixAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Canvas>
</Page>
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace SDKSample
{
/// <summary>
/// Shows how to animate an object along
/// a geometric path.
/// </summary>
public class MatrixAnimationUsingPathDoesRotateWithTangentExample : Page
{
public MatrixAnimationUsingPathDoesRotateWithTangentExample()
{
this.Margin = new Thickness(20);
// Create a NameScope for the page so that
// we can use Storyboards.
NameScope.SetNameScope(this, new NameScope());
// Create a button.
Button aButton = new Button();
aButton.MinWidth = 100;
aButton.Content = "A Button";
// Create a MatrixTransform. This transform
// will be used to move the button.
MatrixTransform buttonMatrixTransform = new MatrixTransform();
aButton.RenderTransform = buttonMatrixTransform;
// Register the transform's name with the page
// so that it can be targeted by a Storyboard.
this.RegisterName("ButtonMatrixTransform", buttonMatrixTransform);
// Create a Canvas to contain the button
// and add it to the page.
// Although this example uses a Canvas,
// any type of panel will work.
Canvas mainPanel = new Canvas();
mainPanel.Width = 400;
mainPanel.Height = 400;
mainPanel.Children.Add(aButton);
this.Content = mainPanel;
// Create the animation path.
PathGeometry animationPath = new PathGeometry();
PathFigure pFigure = new PathFigure();
pFigure.StartPoint = new Point(10, 100);
PolyBezierSegment pBezierSegment = new PolyBezierSegment();
pBezierSegment.Points.Add(new Point(35, 0));
pBezierSegment.Points.Add(new Point(135, 0));
pBezierSegment.Points.Add(new Point(160, 100));
pBezierSegment.Points.Add(new Point(180, 190));
pBezierSegment.Points.Add(new Point(285, 200));
pBezierSegment.Points.Add(new Point(310, 100));
pFigure.Segments.Add(pBezierSegment);
animationPath.Figures.Add(pFigure);
// Freeze the PathGeometry for performance benefits.
animationPath.Freeze();
// Create a MatrixAnimationUsingPath to move the
// button along the path by animating
// its MatrixTransform.
MatrixAnimationUsingPath matrixAnimation =
new MatrixAnimationUsingPath();
matrixAnimation.PathGeometry = animationPath;
matrixAnimation.Duration = TimeSpan.FromSeconds(5);
matrixAnimation.RepeatBehavior = RepeatBehavior.Forever;
// Set the animation's DoesRotateWithTangent property
// to true so that rotates the rectangle in addition
// to moving it.
matrixAnimation.DoesRotateWithTangent = true;
// Set the animation to target the Matrix property
// of the MatrixTransform named "ButtonMatrixTransform".
Storyboard.SetTargetName(matrixAnimation, "ButtonMatrixTransform");
Storyboard.SetTargetProperty(matrixAnimation,
new PropertyPath(MatrixTransform.MatrixProperty));
// Create a Storyboard to contain and apply the animation.
Storyboard pathAnimationStoryboard = new Storyboard();
pathAnimationStoryboard.Children.Add(matrixAnimation);
// Start the storyboard when the button is loaded.
aButton.Loaded += delegate(object sender, RoutedEventArgs e)
{
// Start the storyboard.
pathAnimationStoryboard.Begin(this);
};
}
}
}
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Navigation
Imports System.Windows.Shapes
Namespace SDKSample
''' <summary>
''' Shows how to animate an object along
''' a geometric path.
''' </summary>
Public Class MatrixAnimationUsingPathDoesRotateWithTangentExample
Inherits Page
Public Sub New()
Me.Margin = New Thickness(20)
' Create a NameScope for the page so that
' we can use Storyboards.
NameScope.SetNameScope(Me, New NameScope())
' Create a button.
Dim aButton As New Button()
aButton.MinWidth = 100
aButton.Content = "A Button"
' Create a MatrixTransform. This transform
' will be used to move the button.
Dim buttonMatrixTransform As New MatrixTransform()
aButton.RenderTransform = buttonMatrixTransform
' Register the transform's name with the page
' so that it can be targeted by a Storyboard.
Me.RegisterName("ButtonMatrixTransform", buttonMatrixTransform)
' Create a Canvas to contain the button
' and add it to the page.
' Although this example uses a Canvas,
' any type of panel will work.
Dim mainPanel As New Canvas()
mainPanel.Width = 400
mainPanel.Height = 400
mainPanel.Children.Add(aButton)
Me.Content = mainPanel
' Create the animation path.
Dim animationPath As New PathGeometry()
Dim pFigure As New PathFigure()
pFigure.StartPoint = New Point(10, 100)
Dim pBezierSegment As New PolyBezierSegment()
pBezierSegment.Points.Add(New Point(35, 0))
pBezierSegment.Points.Add(New Point(135, 0))
pBezierSegment.Points.Add(New Point(160, 100))
pBezierSegment.Points.Add(New Point(180, 190))
pBezierSegment.Points.Add(New Point(285, 200))
pBezierSegment.Points.Add(New Point(310, 100))
pFigure.Segments.Add(pBezierSegment)
animationPath.Figures.Add(pFigure)
' Freeze the PathGeometry for performance benefits.
animationPath.Freeze()
' Create a MatrixAnimationUsingPath to move the
' button along the path by animating
' its MatrixTransform.
Dim matrixAnimation As New MatrixAnimationUsingPath()
matrixAnimation.PathGeometry = animationPath
matrixAnimation.Duration = TimeSpan.FromSeconds(5)
matrixAnimation.RepeatBehavior = RepeatBehavior.Forever
' Set the animation's DoesRotateWithTangent property
' to true so that rotates the rectangle in addition
' to moving it.
matrixAnimation.DoesRotateWithTangent = True
' Set the animation to target the Matrix property
' of the MatrixTransform named "ButtonMatrixTransform".
Storyboard.SetTargetName(matrixAnimation, "ButtonMatrixTransform")
Storyboard.SetTargetProperty(matrixAnimation, New PropertyPath(MatrixTransform.MatrixProperty))
' Create a Storyboard to contain and apply the animation.
Dim pathAnimationStoryboard As New Storyboard()
pathAnimationStoryboard.Children.Add(matrixAnimation)
' Start the storyboard when the button is loaded.
AddHandler aButton.Loaded, Sub(sender As Object, e As RoutedEventArgs) pathAnimationStoryboard.Begin(Me)
End Sub
End Class
End Namespace
Untuk informasi selengkapnya tentang sintaks jalur yang digunakan dalam contoh XAML, lihat Gambaran umum Sintaks Markup Jalur. Untuk sampel lengkapnya, lihat Sampel Animasi Jalur.
Anda dapat menerapkan animasi jalur ke properti dengan menggunakan Storyboard di XAML dan kode, atau dengan menggunakan BeginAnimation metode dalam kode. Anda juga dapat menggunakan animasi jalur 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 Jalur
Karena animasi menghasilkan nilai properti, ada jenis animasi yang berbeda untuk jenis properti yang berbeda. Untuk menganimasikan properti yang mengambil Double (seperti X properti ), TranslateTransformAnda menggunakan animasi yang menghasilkan Double nilai. Untuk menganimasikan properti yang mengambil Point, Anda menggunakan animasi yang menghasilkan Point nilai, dan sebagainya.
Kelas animasi jalur milik System.Windows.Media.Animation namespace layanan dan gunakan konvensi penamaan berikut:
<Jenis>AnimationUsingPath
Di mana <Jenis> adalah jenis nilai yang dianimasikan kelas.
WPF menyediakan kelas animasi jalur berikut.
menghasilkan MatrixAnimationUsingPathMatrix nilai dari PathGeometry. Saat digunakan dengan MatrixTransform, dapat MatrixAnimationUsingPath memindahkan objek di sepanjang jalur. Jika Anda mengatur DoesRotateWithTangent properti ke MatrixAnimationUsingPathtrue, properti juga memutar objek di sepanjang kurva jalur.
PointAnimationUsingPath menghasilkan Point nilai dari koordinat x dan y dari koordinat PathGeometry. Dengan menggunakan PointAnimationUsingPath untuk menganimasikan properti yang mengambil Point nilai, Anda dapat memindahkan objek di sepanjang jalur. Tidak PointAnimationUsingPath dapat memutar objek.
menghasilkan DoubleAnimationUsingPathDouble nilai dari PathGeometry. Dengan mengatur Source properti, Anda dapat menentukan apakah DoubleAnimationUsingPath menggunakan koordinat x, koordinat y, atau sudut jalur sebagai outputnya. Anda dapat menggunakan DoubleAnimationUsingPath untuk memutar objek atau memindahkannya di sepanjang sumbu x atau sumbu y.
Input Animasi Jalur
Setiap kelas animasi jalur menyediakan PathGeometry properti untuk menentukan inputnya. Animasi jalur menggunakan PathGeometry untuk menghasilkan nilai outputnya. Kelas ini PathGeometry memungkinkan Anda menggambarkan beberapa figur kompleks yang terdiri dari busur, kurva, dan garis.
Intinya PathGeometry adalah kumpulan PathFigure objek; objek ini dinamai demikian karena setiap gambar menggambarkan bentuk diskrit dalam PathGeometry. Masing-masing PathFigure terdiri dari satu atau beberapa PathSegment objek, yang masing-masing menggambarkan segmen gambar.
Ada banyak jenis segmen.
| Jenis Segmen | Deskripsi |
|---|---|
| ArcSegment | Membuat busur elips di antara dua titik. |
| BezierSegment | Membuat kurva Bezier kubik di antara dua titik. |
| LineSegment | Membuat garis di antara dua titik. |
| PolyBezierSegment | Membuat serangkaian kurva Bezier kubik. |
| PolyLineSegment | Membuat serangkaian garis. |
| PolyQuadraticBezierSegment | Membuat serangkaian kurva Bezier kuadrat. |
| QuadraticBezierSegment | Membuat kurva Bezier kuadrat. |
Segmen dalam digabungkan PathFigure menjadi satu bentuk geometris, yang menggunakan titik akhir segmen sebagai titik awal segmen berikutnya. Properti StartPoint menentukan PathFigure titik dari mana segmen pertama digambar. Setiap segmen berikutnya dimulai di titik akhir segmen sebelumnya. Misalnya, garis vertikal dari 10,50 ke 10,150 dapat didefinisikan dengan mengatur StartPoint properti ke 10,50 dan membuat LineSegment dengan Point pengaturan properti .10,150
Untuk informasi selengkapnya tentang PathGeometry objek, lihat Gambaran Umum Geometri.
Di XAML, Anda juga dapat menggunakan sintaksis singkatan khusus untuk mengatur Figures properti .PathGeometry Untuk informasi selengkapnya, lihat Gambaran umum Sintaks Markup Jalur.
Untuk informasi selengkapnya tentang sintaks jalur yang digunakan dalam contoh XAML, lihat Gambaran umum Sintaks Markup Jalur.
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