방법: 경로를 따라 개체에 애니메이션 효과 주기(오프셋이 누적된 매트릭스 애니메이션)
이 예제에서는 MatrixAnimationUsingPath 클래스를 사용하여 경로를 따라 개체에 애니메이션 효과를 주고 해당 애니메이션이 반복될 때 오프셋 값을 누적하도록 하는 방법을 보여 줍니다.
예제
다음 예제에서는 MatrixAnimationUsingPath 개체를 사용하여 단추에 적용된 MatrixTransform의 Matrix 속성에 애니메이션 효과를 줍니다. 그 결과 단추가 곡선 경로를 따라 움직입니다.
또한 이 예제에서는 IsOffsetCumulative 속성을 true로 설정하여 애니메이션이 반복될 때 애니메이션 행렬의 오프셋이 누적되도록 합니다. 오프셋이 누적되므로 애니메이션이 반복되면 단추는 시작 위치로 재설정되는 것이 아니라 화면을 가로질러 더 크게 움직입니다.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Margin="20"
xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="PresentationOptions">
<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="myMatrixTransform">
<MatrixTransform.Matrix >
<Matrix />
</MatrixTransform.Matrix>
</MatrixTransform>
</Button.RenderTransform>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<MatrixAnimationUsingPath
Storyboard.TargetName="myMatrixTransform"
Storyboard.TargetProperty="Matrix"
IsOffsetCumulative="True"
Duration="0:0:5"
RepeatBehavior="2x">
<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 use the MatrixAnimationUsingPath.IsOffsetCumulative
/// property to make a MatrixAnimatioinUsingPath accumulate
/// its values when it repeats.
/// </summary>
public class MatrixAnimationUsingPathExampleOffsetCumulative : Page
{
public MatrixAnimationUsingPathExampleOffsetCumulative()
{
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;
// Set IsOffsetCumulative to true so that the animation
// values accumulate when its repeats.
matrixAnimation.IsOffsetCumulative = true;
matrixAnimation.Duration = TimeSpan.FromSeconds(5);
matrixAnimation.RepeatBehavior = new RepeatBehavior(2);
// 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 animation when the button is clicked.
aButton.Click += 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 use the MatrixAnimationUsingPath.IsOffsetCumulative
''' property to make a MatrixAnimatioinUsingPath accumulate
''' its values when it repeats.
''' </summary>
Public Class MatrixAnimationUsingPathExampleOffsetCumulative
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
' Set IsOffsetCumulative to true so that the animation
' values accumulate when its repeats.
matrixAnimation.IsOffsetCumulative = True
matrixAnimation.Duration = TimeSpan.FromSeconds(5)
matrixAnimation.RepeatBehavior = New RepeatBehavior(2)
' 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 animation when the button is clicked.
AddHandler aButton.Click, Sub(sender As Object, e As RoutedEventArgs) pathAnimationStoryboard.Begin(Me)
End Sub
End Class
End Namespace
IsOffsetCumulative 속성으로 인해 오프셋 값이 반복에 걸쳐 누적되지만 회전 값이 누적되지는 않습니다. 회전 값을 누적하려면 애니메이션의 DoesRotateWithTangent 및 IsAngleCumulative 속성을 true로 설정합니다.
전체 샘플을 보려면 경로 애니메이션 샘플을 참조하세요. 오프셋 누적 없이 경로를 따라 Matrix 값에 애니메이션 효과를 주는 방법을 보여 주는 예제에 대해서는 경로를 따라 개체에 애니메이션 효과 주기(Matrix 애니메이션)를 참조하세요.
참고 항목
GitHub에서 Microsoft와 공동 작업
이 콘텐츠의 원본은 GitHub에서 찾을 수 있으며, 여기서 문제와 끌어오기 요청을 만들고 검토할 수도 있습니다. 자세한 내용은 참여자 가이드를 참조하세요.
.NET Desktop feedback
피드백
출시 예정: 2024년 내내 콘텐츠에 대한 피드백 메커니즘으로 GitHub 문제를 단계적으로 폐지하고 이를 새로운 피드백 시스템으로 바꿀 예정입니다. 자세한 내용은 다음을 참조하세요. https://aka.ms/ContentUserFeedback
다음에 대한 사용자 의견 제출 및 보기