如何:沿着路径针对对象进行动画处理(点动画)

更新:2007 年 11 月

下面的示例演示如何使用 PointAnimationUsingPath 对象来沿着曲线路径针对 Point 进行动画处理。

示例

下面的示例沿着由 PathGeometry 定义的路径来移动 EllipseGeometry。椭圆几何形状的位置由值为 PointCenter 属性来指定;若要移动椭圆几何形状,请对它的 Center 属性进行动画处理。此示例使用 PointAnimationUsingPath 来针对 EllipseGeometry 对象的 Center 属性进行动画处理。

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  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">

    <Path Fill="Blue" Margin="15,15,15,15">
      <Path.Data>

        <!-- The EllipseGemetry specifies the shape and position of the Ellipse. The
        Center property is animated, causing the Ellipse to animate across the screen-->
        <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
          Center="10,100" RadiusX="15" RadiusY="15" />
      </Path.Data>
      <Path.Triggers>
        <EventTrigger RoutedEvent="Path.Loaded">
          <BeginStoryboard Name="MyBeginStoryboard">
            <Storyboard>

              <!-- Animates the ellipse along the path. -->
              <PointAnimationUsingPath
                Storyboard.TargetName="MyAnimatedEllipseGeometry"
                Storyboard.TargetProperty="Center"
                Duration="0:0:5" 
                RepeatBehavior="Forever" >
                <PointAnimationUsingPath.PathGeometry>
                  <PathGeometry 
                    Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"
                    PresentationOptions:Freeze="True" />
                </PointAnimationUsingPath.PathGeometry>
              </PointAnimationUsingPath>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Path.Triggers>
    </Path>
  </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
{


    public class PointAnimationUsingPathExample : Page
    {

        public PointAnimationUsingPathExample()
        {

            // Create a NameScope for the page so that
            // we can use Storyboards.
            NameScope.SetNameScope(this, new NameScope());

            // Create the EllipseGeometry to animate.
            EllipseGeometry animatedEllipseGeometry =
                new EllipseGeometry(new Point(10, 100), 15, 15);

            // Register the EllipseGeometry's name with
            // the page so that it can be targeted by a
            // storyboard.
            this.RegisterName("AnimatedEllipseGeometry", animatedEllipseGeometry);

            // Create a Path element to display the geometry.
            Path ellipsePath = new Path();
            ellipsePath.Data = animatedEllipseGeometry;
            ellipsePath.Fill = Brushes.Blue;
            ellipsePath.Margin = new Thickness(15);

            // Create a Canvas to contain ellipsePath
            // and add it to the page.
            Canvas mainPanel = new Canvas();
            mainPanel.Width = 400;
            mainPanel.Height = 400;
            mainPanel.Children.Add(ellipsePath);
            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 PointAnimationgUsingPath to move
            // the EllipseGeometry along the animation path.
            PointAnimationUsingPath centerPointAnimation = 
                new PointAnimationUsingPath();
            centerPointAnimation.PathGeometry = animationPath;
            centerPointAnimation.Duration = TimeSpan.FromSeconds(5);
            centerPointAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Set the animation to target the Center property
            // of the EllipseGeometry named "AnimatedEllipseGeometry".
            Storyboard.SetTargetName(centerPointAnimation, "AnimatedEllipseGeometry");
            Storyboard.SetTargetProperty(centerPointAnimation, 
                new PropertyPath(EllipseGeometry.CenterProperty));

            // Create a Storyboard to contain and apply the animation.
            Storyboard pathAnimationStoryboard = new Storyboard();
            pathAnimationStoryboard.RepeatBehavior = RepeatBehavior.Forever;
            pathAnimationStoryboard.AutoReverse = true;
            pathAnimationStoryboard.Children.Add(centerPointAnimation);

            // Start the Storyboard when ellipsePath is loaded.
            ellipsePath.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                // Start the storyboard.
                pathAnimationStoryboard.Begin(this);
            };
        }

    }

}

有关完整示例,请参见 路径动画示例

上一个示例的代码版本使用 Storyboard 来对 EllipseGeometry 进行动画处理,即使仅应用了一个动画也是如此。通常,Storyboard 是应用多个动画的最简便方法,因为这些动画可以由同一个 Storyboard 来控制。但是,在使用代码时,向属性应用单个动画的最简便方法就是使用 BeginAnimation 方法。有关示例,请参见如何:在不使用演示图板的情况下对属性进行动画处理

请参见

任务

路径动画示例

概念

动画概述

其他资源

路径动画帮助主题