如何:沿着路径针对对象进行动画处理(偏移量进行累积的矩阵动画)

更新:2007 年 11 月

此示例演示如何使用 MatrixAnimationUsingPath 类沿着路径对对象进行动画处理,并在该动画重复时累积其偏移量值。

示例

下面的示例使用 MatrixAnimationUsingPath 对象对应用于某个按钮的 MatrixTransformMatrix 属性进行动画处理。因此,按钮会沿着曲线路径移动。

另外,该示例将 IsOffsetCumulative 属性设置为 true,这会导致在该动画重复时累积动画矩阵的偏移量。由于偏移量会进行累积,因此,当该动画重复时,该按钮会移到屏幕上的更远处,而不是复位到起始位置。

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" Margin="20"
  xmlns:PresentationOptions="https://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
  xmlns:mc="https://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);
            };

        }  
    }
}

请注意,尽管 IsOffsetCumulative 属性会使偏移量值在动画重复时累积,但它不会导致对旋转值进行累积。若要累积旋转值,请将该动画的 DoesRotateWithTangentIsAngleCumulative 属性设置为 true。

有关完整示例,请参见 路径动画示例。有关演示如何沿着路径对 Matrix 值进行动画处理而不累积偏移量的示例,请参见如何:沿着路径针对对象进行动画处理(矩阵动画)

请参见

任务

路径动画示例

概念

动画概述

其他资源

路径动画帮助主题