Общие сведения об анимация с использованием пути
Обновлен: Ноябрь 2007
В этом разделе рассмотрена анимация с использованием пути, которая дают возможность использовать геометрический путь для формирования выходных значений. Анимация с использованием пути полезна для перемещения и вращения объектов по сложному пути.
В этом разделе содержатся следующие подразделы.
Необходимые компоненты
Для понимания этого раздела требуется знакомство с возможностями анимаций WPF. Вводные сведения о функциональных возможностях анимации см. в разделе Общие сведения об эффектах анимации.
Поскольку объект PathGeometry используется для определения анимации с использованием пути, необходимо ознакомиться с PathGeometry и различными типами объектов PathSegment. Дополнительные сведения см. в разделе Общие сведения о классе Geometry.
Понятие анимации с использованием пути
Анимация с использованием пути представляет собой тип AnimationTimeline, который использует PathGeometry в качестве входного значения. Вместо задания свойства From, To или By (как для анимации From/To/By) или использования полных кадров (как для анимации с полными кадрами) определяется геометрическая траектория, которая используется для задания свойства PathGeometry анимации с использованием пути. По мере выполнения анимации с использованием пути из пути считываются значения координат x и y и угла, которые используются для создания выходных значений.
Анимация с использованием пути очень полезна для анимации объекта по сложной траектории. Одним из способов перемещения объекта вдоль пути является использование MatrixTransform и MatrixAnimationUsingPath для преобразования объекта по сложному пути. В следующем примере этот метод демонстрируется с использованием объекта MatrixAnimationUsingPath для анимации свойства Matrix для MatrixTransform. MatrixTransform применяется к кнопке и приводит к перемещению кнопки вдоль криволинейного пути. Поскольку для свойства DoesRotateWithTangent задано значение true, прямоугольник поворачивается по касательной к пути.
<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" 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
<Тип> ― тип значения, для которого класс выполняет анимацию.
WPF предоставляет следующие классы анимации с использованием пути.
Тип свойства |
Соответствующий класс анимации с использованием пути |
Пример |
|---|---|---|
Практическое руководство. Анимация объекта вдоль пути (двойная анимация) |
||
Практическое руководство. Анимация объекта вдоль пути (точечная анимация) |
||
Практическое руководство. Анимация объекта вдоль пути (матричная анимация) |
MatrixAnimationUsingPath создает значения Matrix из его PathGeometry. При использовании с MatrixTransform, MatrixAnimationUsingPath может переместить объект вдоль пути. Если задать свойство DoesRotateWithTangent для MatrixAnimationUsingPath значением true, объект также поворачивается вдоль кривых пути.
PointAnimationUsingPath создает значения Point из x- и y-координат его PathGeometry. При использовании PointAnimationUsingPath для анимации свойства, которое принимает значения Point, можно переместить объект вдоль пути. PointAnimationUsingPath не может поворачивать объекты.
DoubleAnimationUsingPath создает значения Double из его PathGeometry. Установив свойство Source, можно указать, использует ли DoubleAnimationUsingPath координаты по осям x и y или угол пути в качестве выходных данных. Можно использовать DoubleAnimationUsingPath, чтобы повернуть объект или переместить его вдоль оси х или оси y.
Входные данные анимации с использованием пути
Каждый класс анимации с использованием пути предоставляет свойство PathGeometry для указания его входных данных. Анимация с использованием пути использует PathGeometry для создания выходных значений. Класс PathGeometry позволяет описать нескольких сложных фигур, состоящих из дуг, кривых и линий.
В сердце PathGeometry находится коллекция объектов PathFigure; эти объекты названы таким образом, так как каждая фигура описывает дискретную форму в PathGeometry. Каждый PathFigure состоит из одного или нескольких объектов PathSegment, каждый из которых описывает сегмент фигуры.
Существует много типов сегментов.
Тип сегмента |
Свойство |
|---|---|
Создает эллиптическую дугу между двумя точками. |
|
Создает кривую Безье третьего порядка между двумя точками. |
|
Создает линию между двумя точками. |
|
Создает набор кривых Безье третьего порядка. |
|
Создает набор линий. |
|
Создает набор кривых Безье второго порядка. |
|
Создает кривую Безье второго порядка. |
Сегменты в PathFigure объединяются в одну геометрическую форму, причем конечная точка каждого сегмента совпадает с начальной точкой следующего сегмента. Свойство StartPoint класса PathFigure задает точку, из которой рисуется первый сегмент. Каждый последующий сегмент начинается в конечной точке предыдущего сегмента. Например, вертикальную линию из точки с координатами 10,50 в точку с координатами 10,150 можно определить, задав для свойства StartPoint значение 10,50 и создав объект LineSegment со свойством Point, имеющим значение 10,150.
Дополнительные сведения об объектах PathGeometry см. в разделе Общие сведения о классе Geometry.
В XAML можно также использовать специальный сокращенный синтаксис для задания свойства Figures для PathGeometry. Дополнительные сведения см. в разделе Синтаксис разметки пути.
Дополнительные сведения о синтаксисе пути, который используется в приведенном примере XAML, см. в обзоре Синтаксис разметки пути.
См. также
Задачи
Пример анимации с использованием пути
Основные понятия
Общие сведения об эффектах анимации
Общие сведения о методах анимации свойств