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

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

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

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

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

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

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

Подход к анимации	Сценарии	Поддерживает XAML	Интерактивное управление
Раскадровка	Для каждого экземпляра, Style, ControlTemplate, DataTemplate	Да	Да
Локальная анимация	Применение к конкретным экземплярам	Нет	Нет
Часы	Применение к конкретным экземплярам	Нет	Да
Покадровая анимация	Применение к конкретным экземплярам	Нет	Н/Д

Раскадровка

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

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

1. Объявите Storyboard и одну или несколько анимаций.

2. Используйте TargetName и TargetProperty присоединенного свойства для указания целевого объекта и свойства каждой анимации.

3. (Только код) Определение NameScope для FrameworkElement или FrameworkContentElement. Зарегистрируйте имена объектов для анимации с помощью FrameworkElement или FrameworkContentElement.

4. Начать Storyboard.

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

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

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

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

Локальная анимация

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

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

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

1. Создание AnimationTimeline объекта.

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

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

/*

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

Часы

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

Нельзя использовать Clock объекты непосредственно для анимации в стилях, управлять шаблонами и шаблонах данных. (Анимации и системы времени фактически используют Clock объектов для анимации в стили, шаблоны элементов управления и шаблонах данных, но необходимо создать эти Clock объекты из Storyboard. Дополнительные сведения о связи между Storyboard объектов и Clock объектов, см. в разделе анимации и общие сведения о характере системы.)

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

1. Создание AnimationTimeline объекта.

2. Используйте CreateClock метод AnimationTimeline для создания AnimationClock.

3. Используйте 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);
        }
    }
}

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

1. Используйте ParallelTimeline и AnimationTimeline объекты для создания дерева времени.

2. Используйте CreateClock корневого ParallelTimeline для создания ClockGroup.

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

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

Покадровая анимация: Обход анимации и системы управления временем

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

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

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

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

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

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

См. также

• Общие сведения об эффектах анимации
• Общие сведения о Storyboard
• Общие сведения об анимации и системе управления временем
• Общие сведения о свойствах зависимости