How to: Rotate an Object by Using a Geometric Path (Matrix Animation)
This example shows how to use a MatrixAnimationUsingPath and a MatrixTransform to rotate (pivot) an object along a geometric path defined by a PathGeometry object.
The following example uses the MatrixAnimationUsingPath object to animate the Matrix property of a MatrixTransform. The MatrixTransform is applied to a button and causes it to move along a curved path. Because the DoesRotateWithTangent property is set to true, the rectangle rotates along the tangent of the path.
<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); }; } } }
For the complete sample, see Path Animation Sample.
The code version of the preceding sample used a Storyboard to animate the EllipseGeometry, even though only one animation was applied. An easier way to apply a single animation to a property in code is to use the BeginAnimation method. For an example, see How to: Animate a Property Without Using a Storyboard.