Общие сведения о методах анимации свойств

Статья
12/19/2024

В этом разделе описаны различные подходы к анимации свойств: сториборды, локальные анимации, таймеры и покадровая анимация.

Необходимые условия

Чтобы понять эту тему, вы должны ознакомиться с основными функциями анимации, описанными в обзоре анимации.

Различные способы анимации

Так как существует множество различных сценариев для анимации свойств, WPF предоставляет несколько подходов для анимации свойств.

Для каждого подхода в следующей таблице указывается, можно ли использовать его для каждого экземпляра в стилях, в шаблонах элементов управления или в шаблонах данных; можно ли использовать его в XAML; и позволяет ли подход интерактивно управлять анимацией. "Per-Instance" относится к технике применения анимации или раскадровки непосредственно к конкретным экземплярам объекта, а не через стиль, шаблон элементов управления или шаблон данных.

Метод анимации	Сценарии	Поддержка XAML	Интерактивный управляемый
Анимация раскадровки	На экземпляр, Style, ControlTemplate, DataTemplate	Да	Да
Локальная анимация	Для каждого экземпляра	Нет	Нет
Анимация часов	На экземпляр	Нет	Да
Анимация для каждого кадра	Для каждого экземпляра	Нет	N/A

Анимация раскадровок

Используйте Storyboard, если вы хотите определить и применить анимацию в XAML, интерактивно управлять анимациями после их запуска, создавать сложное дерево анимаций или анимировать в Style, ControlTemplate или DataTemplate. Чтобы объект был анимирован Storyboard, он должен быть FrameworkElement или FrameworkContentElement, или он должен использоваться для задания FrameworkElement или FrameworkContentElement. Более подробную информацию см. в разделе Обзор раскадровки.

Storyboard — это особый тип контейнера Timeline, который предоставляет информацию для целевой настройки анимации, содержащейся в нем. Чтобы анимировать с помощью Storyboard, выполните следующие три шага.

Объявите Storyboard и одну или несколько анимаций.
Используйте свойства TargetName и TargetProperty, которые присоединяются, чтобы указать целевой объект и свойство для каждой анимации.
(Только код) Определите NameScope для FrameworkElement или FrameworkContentElement. Зарегистрируйте имена объектов для анимации с помощью FrameworkElement или FrameworkContentElement.
Начните с Storyboard.

Storyboard начинает применять анимацию к свойствам, которые оно анимирует, и запускает их. Существует два способа начать Storyboard: можно использовать метод Begin, предоставляемый классом Storyboard, или использовать действие BeginStoryboard. Единственным способом анимации в XAML является использование действия BeginStoryboard. Действие BeginStoryboard можно использовать в EventTrigger, свойстве Triggerили DataTrigger.

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

Работу над раскадровкой начинают с помощью…	На экземпляр	Стиль	Шаблон элемента управления	Шаблон данных	Пример
BeginStoryboard и EventTrigger	Да	Да	Да	Да	Анимировать свойство с помощью Storyboard
BeginStoryboard и свойство Trigger	Нет	Да	Да	Да	активировать анимацию при изменении значения свойства
BeginStoryboard и DataTrigger	Нет	Да	Да	Да	Практическое руководство. Активация анимации при изменении данных
метод Begin	Да	Нет	Нет	Нет	Анимировать свойство с помощью Storyboard

Дополнительные сведения о объектах Storyboard см. в разделе Storyboards Overview.

Локальные анимации

Локальные анимации предоставляют удобный способ анимации свойства зависимостей любого объекта Animatable. Используйте локальные анимации, если вы хотите применить одну анимацию к свойству, и вам не нужно интерактивно управлять анимацией после его запуска. В отличие от анимации Storyboard, локальная анимация может анимировать объект, который не связан с FrameworkElement или FrameworkContentElement. Кроме того, вам не нужно определять NameScope для этого типа анимации.

Локальные анимации могут использоваться только в коде и не могут быть определены в стилях, шаблонах элементов управления или шаблонах данных. Локальная анимация не может быть интерактивно контролироваться после запуска.

Чтобы анимировать с помощью локальной анимации, выполните следующие действия.

Создайте объект AnimationTimeline.
Используйте метод BeginAnimation объекта, который вы хотите анимировать, чтобы применить AnimationTimeline к свойству, которое вы указали.

В следующем примере показано, как анимировать ширину и цвет фона Button.

/*

   This sample demonstrates how to apply non-storyboard animations to a property.
   To animate in markup, you must use storyboards.

*/

using namespace System;
using namespace System::Windows;
using namespace System::Windows::Navigation;
using namespace System::Windows::Media;
using namespace System::Windows::Media::Animation;
using namespace System::Windows::Shapes;
using namespace System::Windows::Controls;


namespace Microsoft {
   namespace Samples {
      namespace Animation {
         namespace LocalAnimations {
            // Create the demonstration.
            public ref class LocalAnimationExample : Page {

            public: 
               LocalAnimationExample ()
               {
                  WindowTitle = "Local Animation Example";
                  StackPanel^ myStackPanel = gcnew StackPanel();
                  myStackPanel->Margin = Thickness(20);

                  // Create and set the Button.
                  Button^ aButton = gcnew Button();
                  aButton->Content = "A Button";

                  // Animate the Button's Width.
                  DoubleAnimation^ myDoubleAnimation = gcnew DoubleAnimation();
                  myDoubleAnimation->From = 75;
                  myDoubleAnimation->To = 300;
                  myDoubleAnimation->Duration = Duration(TimeSpan::FromSeconds(5));
                  myDoubleAnimation->AutoReverse = true;
                  myDoubleAnimation->RepeatBehavior = RepeatBehavior::Forever;

                  // Apply the animation to the button's Width property.
                  aButton->BeginAnimation(Button::WidthProperty, myDoubleAnimation);

                  // Create and animate a Brush to set the button's Background.
                  SolidColorBrush^ myBrush = gcnew SolidColorBrush();
                  myBrush->Color = Colors::Blue;

                  ColorAnimation^ myColorAnimation = gcnew ColorAnimation();
                  myColorAnimation->From = Colors::Blue;
                  myColorAnimation->To = Colors::Red;
                  myColorAnimation->Duration = Duration(TimeSpan::FromMilliseconds(7000));
                  myColorAnimation->AutoReverse = true;
                  myColorAnimation->RepeatBehavior = RepeatBehavior::Forever;

                  // Apply the animation to the brush's Color property.
                  myBrush->BeginAnimation(SolidColorBrush::ColorProperty, myColorAnimation);
                  aButton->Background = myBrush;

                  // Add the Button to the panel.
                  myStackPanel->Children->Add(aButton);
                  this->Content = myStackPanel;
               };
            };
         }
      }
   }
}

/*

   This sample demonstrates how to apply non-storyboard animations to a property.
   To animate in markup, you must use storyboards.

*/

using System;
using System.Windows;
using System.Windows.Navigation;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Controls;

namespace Microsoft.Samples.Animation.LocalAnimations
{

    // Create the demonstration.
    public class LocalAnimationExample : Page
    {

        public LocalAnimationExample()
        {

            WindowTitle = "Local Animation Example";
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(20);

            // Create and set the Button.
            Button aButton = new Button();
            aButton.Content = "A Button";

            // Animate the Button's Width.
            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 75;
            myDoubleAnimation.To = 300;
            myDoubleAnimation.Duration =  new Duration(TimeSpan.FromSeconds(5));
            myDoubleAnimation.AutoReverse = true;
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Apply the animation to the button's Width property.
            aButton.BeginAnimation(Button.WidthProperty, myDoubleAnimation);

            // Create and animate a Brush to set the button's Background.
            SolidColorBrush myBrush = new SolidColorBrush();
            myBrush.Color = Colors.Blue;

            ColorAnimation myColorAnimation = new ColorAnimation();
            myColorAnimation.From = Colors.Blue;
            myColorAnimation.To = Colors.Red;
            myColorAnimation.Duration =  new Duration(TimeSpan.FromMilliseconds(7000));
            myColorAnimation.AutoReverse = true;
            myColorAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Apply the animation to the brush's Color property.
            myBrush.BeginAnimation(SolidColorBrush.ColorProperty, myColorAnimation);
            aButton.Background = myBrush;

            // Add the Button to the panel.
            myStackPanel.Children.Add(aButton);
            this.Content = myStackPanel;
        }
    }
}

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
'''This sample demonstrates how to apply non-storyboard animations to a property.
'''To animate in markup, you must use storyboards.
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''

Imports System.Windows
Imports System.Windows.Navigation
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes
Imports System.Windows.Controls

Namespace Microsoft.Samples.Animation.LocalAnimations

    ' Create the demonstration.
    Public Class LocalAnimationExample
        Inherits Page

        Public Sub New()

            WindowTitle = "Animate Property Example"
            Dim myStackPanel As New StackPanel()
            myStackPanel.Margin = New Thickness(20)

            ' Create and set the Button.
            Dim aButton As New Button()
            aButton.Content = "A Button"

            ' Animate the Button's Width.
            Dim myDoubleAnimation As New DoubleAnimation()
            myDoubleAnimation.From = 75
            myDoubleAnimation.To = 300
            myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
            myDoubleAnimation.AutoReverse = True
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

            ' Apply the animation to the button's Width property.
            aButton.BeginAnimation(Button.WidthProperty, myDoubleAnimation)

            ' Create and animate a Brush to set the button's Background.
            Dim myBrush As New SolidColorBrush()
            myBrush.Color = Colors.Blue

            Dim myColorAnimation As New ColorAnimation()
            myColorAnimation.From = Colors.Blue
            myColorAnimation.To = Colors.Red
            myColorAnimation.Duration = New Duration(TimeSpan.FromMilliseconds(7000))
            myColorAnimation.AutoReverse = True
            myColorAnimation.RepeatBehavior = RepeatBehavior.Forever

            ' Apply the animation to the brush's Color property.
            myBrush.BeginAnimation(SolidColorBrush.ColorProperty, myColorAnimation)
            aButton.Background = myBrush

            ' Add the Button to the panel.
            myStackPanel.Children.Add(aButton)
            Me.Content = myStackPanel
        End Sub
    End Class
End Namespace

Анимации часов

Используйте объекты Clock, если вы хотите анимировать без использования Storyboard, и вы хотите создать сложные деревья времени или интерактивно управлять анимациями после их запуска. Объекты Clock можно использовать для анимации свойства зависимостей любого объекта Animatable.

Нельзя непосредственно использовать объекты Clock для анимации в стилях, шаблонах элементов управления или шаблонах данных. (На самом деле система анимации и времени использует объекты Clock для анимации стилей, шаблонов элементов управления и шаблонов данных, но эти объекты Clock создаются для вас из Storyboard. Дополнительные сведения о связи между объектами Storyboard и объектами Clock см. в статье Animation and Timing System Overview.)

Чтобы применить один Clock к свойству, выполните следующие действия.

Создайте объект AnimationTimeline.
Используйте метод CreateClock из AnimationTimeline для создания AnimationClock.
Используйте метод ApplyAnimationClock объекта, который необходимо анимировать, чтобы применить AnimationClock к указанному свойству.

В следующем примере показано, как создать AnimationClock и применить его к двум аналогичным свойствам.

/*
    This example shows how to create and apply
    an AnimationClock.
*/

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;
using System.Windows.Media.Animation;

namespace Microsoft.Samples.Animation.TimingBehaviors
{
    public class AnimationClockExample : Page
    {

        ScaleTransform myScaleTransform;

        public AnimationClockExample()
        {

            this.WindowTitle = "Opacity Animation Example";
            this.Background = Brushes.White;
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(20);

            // Create a button that with a ScaleTransform.
            // The ScaleTransform will animate when the
            // button is clicked.
            Button myButton = new Button();
            myButton.Margin = new Thickness(50);
            myButton.HorizontalAlignment = HorizontalAlignment.Left;
            myButton.Content = "Click Me";
            myScaleTransform = new ScaleTransform(1,1);
            myButton.RenderTransform = myScaleTransform;

            // Associate an event handler with the
            // button's Click event.
            myButton.Click += new RoutedEventHandler(myButton_Clicked);

            myStackPanel.Children.Add(myButton);
            this.Content = myStackPanel;
        }

        // Create and apply and animation when the button is clicked.
        private void myButton_Clicked(object sender, RoutedEventArgs e)
        {

            // Create a DoubleAnimation to animate the
            // ScaleTransform.
            DoubleAnimation myAnimation =
                new DoubleAnimation(
                    1, // "From" value
                    5, // "To" value
                    new Duration(TimeSpan.FromSeconds(5))
                );
            myAnimation.AutoReverse = true;

            // Create a clock the for the animation.
            AnimationClock myClock = myAnimation.CreateClock();

            // Associate the clock the ScaleX and
            // ScaleY properties of the button's
            // ScaleTransform.
            myScaleTransform.ApplyAnimationClock(
                ScaleTransform.ScaleXProperty, myClock);
            myScaleTransform.ApplyAnimationClock(
                ScaleTransform.ScaleYProperty, myClock);
        }
    }
}

'
'    This example shows how to create and apply
'    an AnimationClock.
'


Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Shapes
Imports System.Windows.Media.Animation


Namespace Microsoft.Samples.Animation.TimingBehaviors
    Public Class AnimationClockExample
        Inherits Page

        Private ReadOnly myScaleTransform As ScaleTransform

        Public Sub New()

            WindowTitle = "Opacity Animation Example"
            Background = Brushes.White
            Dim myStackPanel As New StackPanel With {
                .Margin = New Thickness(20)
            }

                ' Create a button that with a ScaleTransform.
                ' The ScaleTransform will animate when the
                ' button is clicked.
            Dim myButton As New Button With {
                .Margin = New Thickness(50),
                .HorizontalAlignment = HorizontalAlignment.Left,
                .Content = "Click Me"
            }
            myScaleTransform = New ScaleTransform(1,1)
            myButton.RenderTransform = myScaleTransform


            ' Associate an event handler with the
            ' button's Click event.
            AddHandler myButton.Click, AddressOf myButton_Clicked

            myStackPanel.Children.Add(myButton)
            Content = myStackPanel
        End Sub

        ' Create and apply and animation when the button is clicked.
        Private Sub myButton_Clicked(sender As Object, e As RoutedEventArgs)

            ' Create a DoubleAnimation to animate the
            ' ScaleTransform.
            Dim myAnimation As New DoubleAnimation(1, 5, New Duration(TimeSpan.FromSeconds(5))) With {
                .AutoReverse = True
            } ' "To" value -  "From" value

            ' Create a clock the for the animation.
            Dim myClock As AnimationClock = myAnimation.CreateClock()

            ' Associate the clock the ScaleX and
            ' ScaleY properties of the button's
            ' ScaleTransform.
            myScaleTransform.ApplyAnimationClock(ScaleTransform.ScaleXProperty, myClock)
            myScaleTransform.ApplyAnimationClock(ScaleTransform.ScaleYProperty, myClock)
        End Sub
    End Class
End Namespace

Чтобы создать дерево времени и использовать его анимировать свойства, выполните следующие действия.

Используйте объекты ParallelTimeline и AnimationTimeline для создания дерева времени.
Используйте CreateClock корневого ParallelTimeline для создания ClockGroup.
Выполните итерацию по Children в ClockGroup и примените его дочерние объекты Clock. Для каждого дочернего элемента AnimationClock используйте метод ApplyAnimationClock объекта, который вы хотите анимировать, чтобы применить AnimationClock к указанному вами свойству.

Дополнительные сведения об объектах Clock см. в обзоре анимации и системы времени .

Per-Frame Анимация: обход системы анимации и синхронизации

Используйте этот подход, когда необходимо полностью обойти систему анимации WPF. Одним из сценариев этого подхода является анимация физики, где каждый шаг в анимации требует повторной компиляции объектов на основе последнего набора взаимодействий объектов.

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

Чтобы анимировать кадр по кадру, зарегистрируйтесь для события Rendering объекта, содержащего объекты, которые нужно анимировать. Этот метод обработчика событий вызывается один раз на кадр. Каждый раз, когда WPF обрабатывает сохраненные данные отрисовки из визуального дерева в дерево композиции, вызывается метод обработчика событий.

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

Чтобы получить время презентации для текущего кадра, EventArgs, связанный с этим событием, можно преобразовать в RenderingEventArgs, предоставляющее свойство RenderingTime для получения времени отрисовки текущего кадра.

Дополнительные сведения см. на странице Rendering.

См. также

Обзор анимации
Обзор раскадровки
Обзор системы анимации и синхронизации времени
Обзор свойств зависимостей

Поделиться через