Анимация на основе пути

92

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

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

Создать такой пример довольно легко. Первый шаг — задать путь, который необходимо использовать. В данном примере он описан как ресурс. Хотя это и не обязательно, в данном примере путь отображается. Таким образом, можно удостовериться, что изображение следует по определенному маршруту. Чтобы показать маршрут, достаточно добавить элемент Path, использующий заданную геометрию.

Элемент Path помещается в Canvas наряду с элементом Image, который требуется перемещать по этому пути. Заключительный шаг — создание анимации, перемещающей картинку. Чтобы перемещать изображение, нужно изменять свойства Canvas.Left и Canvas.Тор. Этот трюк выполняет анимация DoubleAnimationUsingPath, но их понадобится две — одна работает со свойством Canvas.Left, а другая — с Canvas.Тор. Ниже показано полное описание разметки:

<Canvas>
                <Canvas.Resources>
                    <PathGeometry x:Key="my_path">
                        <PathFigure IsClosed="True" StartPoint="110,110">
                            <ArcSegment Point="110,310" Size="100,100"></ArcSegment>
                            <ArcSegment Point="310,310" Size="100,100"></ArcSegment>
                            <ArcSegment Point="310,110" Size="100,100" ></ArcSegment>
                            <ArcSegment Point="110,110" Size="100,100"></ArcSegment>
                        </PathFigure>
                    </PathGeometry>
                </Canvas.Resources>
                <Path Stroke="LightBlue" StrokeThickness="2" Data="{StaticResource my_path}"
                      Canvas.Left="20" Canvas.Top="20"></Path>
                <Image Name="my_img" Source="bee.png" Width="40">
                    <Image.Triggers>
                        <EventTrigger RoutedEvent="Window.Loaded">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimationUsingPath Storyboard.TargetProperty="(Canvas.Left)"
                                                                  PathGeometry="{StaticResource my_path}"
                                                                  Duration="0:0:10" RepeatBehavior="Forever"
                                                                  Source="X"></DoubleAnimationUsingPath>
                                        <DoubleAnimationUsingPath Storyboard.TargetProperty="(Canvas.Top)"
                                                                  PathGeometry="{StaticResource my_path}"
                                                                  Duration="0:0:10" RepeatBehavior="Forever"
                                                                  Source="Y"></DoubleAnimationUsingPath>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                    </Image.Triggers>
                </Image>
</Canvas>
Перемещение изображения по траектории

Как видите, при создании анимации на основе пути начальные и конечные значения не указываются. Вместо этого задается геометрия PathGeometry, которая должна использоваться в свойстве PathGeometry. Некоторые классы анимации на основе пути, такие как PointAnimationUsingPath, применяют к целевому свойству оба компонента — X и Y. Класс DoubleAnimationUsingPath лишен такой возможности, поскольку устанавливает единственное значение типа double. Вследствие этого также понадобится установить свойство Source в X и Y, чтобы указывать, когда вы используете координату пути X, а когда — Y.

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

Анимации на основе пути всегда выполняются с постоянной скоростью. Для вычисления скорости WPF берет общую длину маршрута и указанную длительность.

Пройди тесты
Лучший чат для C# программистов