Общие сведения об анимация с использованием пути

В этом разделе представлены общие сведения об анимациях по контуру, которые позволяют использовать геометрические контуры для формирования выходных значений. Анимации по контуру можно использовать для перемещения или вращения объектов по сложным траекториям.

Предварительные требования

Для понимания этого раздела необходимо ознакомиться с WPF средствах анимации. Общие сведения о возможностях анимации, см. в разделе Общие сведения об анимации.

Так как используется PathGeometry объект для определения контура анимации, вы также должны быть знакомы с PathGeometry и различные типы PathSegment объектов. Дополнительные сведения см. в разделе Общие сведения о геометрии.

Что такое анимация по контуру?

Анимацию по контуру — это разновидность AnimationTimeline , использующий PathGeometry в качестве входных данных. В параметры From, или по свойству (как это делается для From/To/By анимации) или с помощью ключевых кадров (как для анимации по ключевым кадрам), определяется геометрическая траектория и использовать его для задания PathGeometry свойство анимации пути. При выполнении анимации по контуру текущие данные о координатах X, Y и угле наклона используются для расчета выходных данных.

Метод анимации по контуру очень удобен при выполнении анимации объекта по сложной траектории. Один из способов для перемещения объекта вдоль пути является использование MatrixTransform и MatrixAnimationUsingPath для преобразования объекта по сложной траектории. В следующем примере демонстрируется этот способ, с помощью MatrixAnimationUsingPath анимируемого объекта Matrix свойство MatrixTransform. MatrixTransform Применяется к кнопке и приводит к перемещению вдоль изогнутого пути. Так как DoesRotateWithTangent свойству true, прямоугольник поворачивается по касательной к пути.

<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);
            };
        }
    }
}

Дополнительные сведения о синтаксисе пути, который используется в XAML пример, см. в разделе синтаксис разметки пути Обзор. Полный пример см. в разделе Пример анимации вдоль пути.

Можно применить анимацию к свойству с помощью Storyboard в XAML и коде или с помощью BeginAnimation метод в коде. Анимацию по контуру можно также использовать для создания AnimationClock и применить его к одному или нескольким свойствам. Дополнительные сведения о различных способах применения анимации см. в разделе Общие сведения о методах анимации свойств.

Типы анимаций по контуру

Так как при анимации создаются значения свойств, существуют различные типы анимаций для различных типов свойств. Для анимации свойства, которое принимает Double (такие как X свойство TranslateTransform), используйте анимацию, создающую Double значения. Для анимации свойства, которое принимает Point, используйте анимацию, создающую Point значений и т. д.

Классы анимации по контуру принадлежат System.Windows.Media.Animation пространства имен и используется следующее соглашение об именовании:

<Тип > AnimationUsingPath

Где <Type> — тип значения, которое выполняет анимацию класса.

WPF предоставляет классы анимации по следующему пути.

Тип свойства Соответствующий класс анимации по контуру Пример
Double DoubleAnimationUsingPath Анимация объекта вдоль контура (двойная анимация)
Matrix MatrixAnimationUsingPath Анимация объекта вдоль контура (матричная анимация)
Point PointAnimationUsingPath Анимация объекта вдоль контура (точечная анимация)

Объект MatrixAnimationUsingPath приводит к возникновению ошибки Matrix значения из его PathGeometry. При использовании с MatrixTransform, MatrixAnimationUsingPath можно перемещать объект вдоль пути. Если задать DoesRotateWithTangent свойство MatrixAnimationUsingPath для true, будет также выполняться поворот объекта вдоль изгибов траектории.

Объект PointAnimationUsingPath приводит к возникновению ошибки Point значения из x-y координаты и его PathGeometry. С помощью PointAnimationUsingPath для анимации свойства, которое принимает Point значения, можно перемещать объект вдоль пути. Объект PointAnimationUsingPath не может поворачивать объекты.

Объект DoubleAnimationUsingPath приводит к возникновению ошибки Double значения из его PathGeometry. Установив Source свойство, можно указать ли DoubleAnimationUsingPath использует координаты x, координату по оси y или угол траектории в качестве результата. Можно использовать DoubleAnimationUsingPath для поворота объекта или перемещения его вдоль оси x или y.

Входные данные для анимации по контуру

Каждого класса анимации по контуру PathGeometry свойство для указания его входных данных. В анимации пути PathGeometry для создания выходных значений. PathGeometry Класс позволяет описывать сложные фигуры, состоящие из дуг, кривых и линий.

В сердце PathGeometry — это коллекция PathFigure объектов; эти объекты названы так, потому что каждая фигура описывает дискретную форму в PathGeometry. Каждый PathFigure состоит из одного или нескольких PathSegment объектов, каждый из которых описывает сегмент фигуры.

Существует несколько типов сегментов.

Тип сегмента Описание
ArcSegment Создает эллиптическую дугу между двумя точками.
BezierSegment Создает кривую Безье третьего порядка между двумя точками.
LineSegment Создает линию между двумя точками.
PolyBezierSegment Создает набор кривых Безье третьего порядка.
PolyLineSegment Создает набор линий.
PolyQuadraticBezierSegment Создает набор кривых Безье второго порядка.
QuadraticBezierSegment Создает кривую Безье второго порядка.

Сегменты в PathFigure объединяются в одну геометрическую форму, которая использует конечную точку сегмента как начальную точку следующего сегмента. StartPoint Свойство PathFigure указывает точку, от которой рисуется первый сегмент. Каждый последующий сегмент начинается в конечной точке предыдущего сегмента. Например, вертикальная линия от 10,50 для 10,150 может быть определена путем задания StartPoint свойства 10,50 и создание LineSegment с Point значение свойства 10,150.

Дополнительные сведения о PathGeometry объектов, см. в разделе Общие сведения о геометрии.

В XAML, также можно использовать специальный сокращенный синтаксис для задания Figures свойство PathGeometry. Дополнительные сведения см. в разделе синтаксис разметки пути Обзор.

Дополнительные сведения о синтаксисе пути, который используется в XAML пример, см. в разделе синтаксис разметки пути Обзор.

См. также