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

В Windows Presentation Foundation (WPF) представлен полный набор функций для работы с графикой и макетом, позволяющих создавать привлекательные пользовательские интерфейсы и документы. Применение анимации позволяет сделать пользовательский интерфейс еще более наглядным и удобным в использовании. Просто анимировать цвет фона или применить анимацию Transform , вы можете создавать значительные переходы экрана или предоставлять полезные визуальные подсказки.

В этом обзоре содержатся общие сведения о WPF анимации и системе управления временем. Он посвящен анимации WPF объектов с помощью раскадровок.

Введение в анимацию

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

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

  • В программе создается таймер.

  • Через заданные временные интервалы проверяется значение таймера для определения истекшего времени.

  • При каждой проверке значения таймера вычисляется текущее значение непрозрачности для прямоугольника в зависимости от прошедшего времени.

  • Затем программа обновляет прямоугольник с использованием нового значения и перерисовывает его.

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

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

Система анимации свойств WPF

Если вы понимаете несколько важных концепций системы управления временем, WPF анимация может быть проще в использовании. Самое важное состоит в том, что в WPF можно анимировать объекты, применяя анимацию к отдельным свойствам. Например, чтобы увеличить элемент платформы, необходимо анимировать его Width Height Свойства и. Чтобы сделать объект эффектным от представления, необходимо анимировать его Opacity свойство.

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

WPF содержит множество объектов, имеющих IAnimatable Свойства. Элементы управления, такие как Button и TabControl , а также и Panel объекты, Shape наследуются от DependencyObject . Большинство их свойств являются свойствами зависимостей.

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

Пример. Реализация исчезновения и появления элемента

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

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

Ниже показано, как создать Rectangle элемент в StackPanel в XAML.

<StackPanel Margin="10">
    <Rectangle
        Name="MyRectangle"
        Width="100" 
        Height="100"
        Fill="Blue">
    </Rectangle>
</StackPanel>

Ниже показано, как создать Rectangle элемент в StackPanel коде.

var myPanel = new StackPanel();
myPanel.Margin = new Thickness(10);

var myRectangle = new Rectangle();
myRectangle.Name = "myRectangle";
this.RegisterName(myRectangle.Name, myRectangle);
myRectangle.Width = 100;
myRectangle.Height = 100;
myRectangle.Fill = Brushes.Blue;
myPanel.Children.Add(myRectangle);
this.Content = myPanel;
Dim myPanel As New StackPanel()
myPanel.Margin = New Thickness(10)

Dim myRectangle As New Rectangle()
myRectangle.Name = "myRectangle"
Me.RegisterName(myRectangle.Name, myRectangle)
myRectangle.Width = 100
myRectangle.Height = 100
myRectangle.Fill = Brushes.Blue

myPanel.Children.Add(myRectangle)
Me.Content = myPanel

Часть 1. Создание объекта DoubleAnimation

Один из способов сделать элемент недоступным для просмотра — анимировать его Opacity свойство. Поскольку Opacity свойство имеет тип, требуется Double анимация, создающая значения типа Double. Это DoubleAnimation одна из таких анимаций. DoubleAnimationСоздает переход между двумя значениями типа Double. Чтобы указать его начальное значение, необходимо задать его From свойство. Чтобы указать конечное значение, необходимо задать его To свойство.

  1. Значение Opacity объекта 1.0 делает объект полностью непрозрачным, а значение непрозрачности 0.0 делает его полностью невидимым. Чтобы сделать переход анимации с 1.0 на, 0.0 Задайте для свойства значение From 1.0 , а для To свойства 0.0 — значение. Ниже показано, как создать DoubleAnimation в XAML.

    <DoubleAnimation From="1.0" To="0.0" />
    

    Ниже показано, как создать DoubleAnimation в коде.

    var myDoubleAnimation = new DoubleAnimation();
    myDoubleAnimation.From = 1.0;
    myDoubleAnimation.To = 0.0;
    
    Dim myDoubleAnimation As New DoubleAnimation()
    myDoubleAnimation.From = 1.0
    myDoubleAnimation.To = 0.0
    
  2. Далее необходимо указать Duration . Объект Duration анимации указывает, как долго уходит от его начального значения к целевому значению. Ниже показано, как установить значение Duration 5 секунд в XAML.

    <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />
    

    Ниже показано, как установить значение Duration 5 секунд в коде.

    myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
    
    myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
    
  3. Предыдущий код показал анимацию, которая переводится с 1.0 на 0.0 , что приводит к тому, что целевой элемент постепенно переводится из абсолютного непрозрачного в невидимый. Чтобы вернуть элемент в представление после исчезновения, установите AutoReverse для свойства анимации значение true . Чтобы сделать анимацию неопределенной, задайте RepeatBehavior для свойства значение Forever . Ниже показано, как задать AutoReverse RepeatBehavior Свойства и в XAML.

    <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>
    

    Ниже показано, как задать AutoReverse RepeatBehavior Свойства и в коде.

    myDoubleAnimation.AutoReverse = true;
    myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
    
    myDoubleAnimation.AutoReverse = True
    myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever
    

Часть 2. Создание раскадровки

Чтобы применить анимацию к объекту, создайте Storyboard и используйте TargetName TargetProperty вложенные свойства и, чтобы указать объект и свойство для анимации.

  1. Создайте Storyboard и добавьте анимацию в качестве дочернего элемента. Ниже показано, как создать Storyboard в XAML.

    <Storyboard>
        <DoubleAnimation
            From="1.0" To="0.0" Duration="0:0:1" 
            AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
    

    Чтобы создать Storyboard в коде, объявите Storyboard переменную на уровне класса.

    public partial class MainWindow : Window
    {
        private Storyboard myStoryboard;
    
    Class MainWindow
    
        Private myStoryboard As Storyboard
    

    Затем инициализируйте Storyboard и добавьте анимацию в качестве дочернего элемента.

    myStoryboard = new Storyboard();
    myStoryboard.Children.Add(myDoubleAnimation);
    
    myStoryboard = New Storyboard()
    myStoryboard.Children.Add(myDoubleAnimation)
    
  2. Объект Storyboard должен быть в курсе, где применяется анимация. Используйте Storyboard.TargetName присоединенное свойство, чтобы указать объект для анимации. Ниже показано, как задать целевое имя DoubleAnimation для в MyRectangle XAML.

    <Storyboard>
        <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            From="1.0" To="0.0" Duration="0:0:1" 
            AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
    

    Ниже показано, как задать целевое имя объекта в DoubleAnimation MyRectangle в коде.

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
    
    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
    
  3. Используйте TargetProperty присоединенное свойство, чтобы указать свойство для анимации. Ниже показано, как настроить анимацию для Opacity свойства объекта Rectangle в XAML.

    <Storyboard>
        <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0.0" Duration="0:0:5" 
            AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
    

    Ниже показано, как настроить анимацию для Opacity свойства Rectangle в коде.

    Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));
    
    Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))
    

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

Часть 3 (XAML). Связывание раскадровки с триггером

Самый простой способ применить и запустить Storyboard в XAML — использовать триггер события. В этом разделе показано, как связать Storyboard с триггером в XAML.

  1. Создайте BeginStoryboard объект и свяжите с ним раскадровку. BeginStoryboard— Это тип TriggerAction , который применяет и запускает Storyboard .

    <BeginStoryboard>
      <Storyboard>
        <DoubleAnimation
          Storyboard.TargetName="MyRectangle" 
          Storyboard.TargetProperty="Opacity"
          From="1.0" To="0.0" Duration="0:0:5" 
          AutoReverse="True" RepeatBehavior="Forever" />
      </Storyboard>
    </BeginStoryboard>
    
  2. Создайте объект EventTrigger и добавьте в BeginStoryboard его Actions коллекцию. Задайте RoutedEvent для свойства объекта EventTrigger перенаправленное событие, которое необходимо запустить Storyboard . (Дополнительные сведения о перенаправленных событиях см. в разделе Общие сведения о перенаправленных событиях.)

    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0.0" Duration="0:0:5" 
            AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
    
  3. Добавьте в EventTrigger Triggers коллекцию прямоугольника.

    <Rectangle
      Name="MyRectangle"
      Width="100" 
      Height="100"
      Fill="Blue">
      <Rectangle.Triggers>
        <!-- Animates the rectangle's opacity. -->
        <EventTrigger RoutedEvent="Rectangle.Loaded">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation
                Storyboard.TargetName="MyRectangle" 
                Storyboard.TargetProperty="Opacity"
                From="1.0" To="0.0" Duration="0:0:5" 
                AutoReverse="True" RepeatBehavior="Forever" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle>
    

Часть 3 (код). Связывание раскадровки с обработчиком событий

Самый простой способ применить и запустить Storyboard в коде — использовать обработчик событий. В этом разделе показано, как связать Storyboard с обработчиком событий в коде.

  1. Зарегистрируйте Loaded событие прямоугольника.

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
    
    AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded
    
  2. Объявите обработчик событий. В обработчике событий используйте метод, Begin чтобы применить раскадровку.

    private void myRectangleLoaded(object sender, RoutedEventArgs e)
    {
        myStoryboard.Begin(this);
    }
    
    Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
        myStoryboard.Begin(Me)
    End Sub
    

Полный пример

Ниже показано, как создать прямоугольник, который исчезает и выходит из представления в XAML.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel Margin="10">
            <Rectangle
                Name="MyRectangle"
                Width="100" 
                Height="100"
                Fill="Blue">
                <Rectangle.Triggers>
                    <!-- Animates the rectangle's opacity. -->
                    <EventTrigger RoutedEvent="Rectangle.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetName="MyRectangle" 
                                    Storyboard.TargetProperty="Opacity"
                                    From="1.0" To="0.0" Duration="0:0:5" 
                                    AutoReverse="True" RepeatBehavior="Forever" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Rectangle.Triggers>
            </Rectangle>
        </StackPanel>
    </Grid>
</Window>

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

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

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        private Storyboard myStoryboard;

        public MainWindow()
        {
            InitializeComponent();

            StackPanel myPanel = new StackPanel();
            myPanel.Margin = new Thickness(10);

            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "myRectangle";
            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            myRectangle.Fill = Brushes.Blue;

            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 1.0;
            myDoubleAnimation.To = 0.0;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
            myDoubleAnimation.AutoReverse = true;
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

            myStoryboard = new Storyboard();
            myStoryboard.Children.Add(myDoubleAnimation);
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
            Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

            // Use the Loaded event to start the Storyboard.
            myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
            myPanel.Children.Add(myRectangle);
            this.Content = myPanel;
        }

        private void myRectangleLoaded(object sender, RoutedEventArgs e)
        {
            myStoryboard.Begin(this);
        }
    }
}
Imports System.Windows.Media.Animation

Class MainWindow

    Private myStoryboard As Storyboard

    Public Sub New()
        InitializeComponent()

        Dim myPanel As New StackPanel()
        myPanel.Margin = New Thickness(10)

        Dim myRectangle As New Rectangle()
        myRectangle.Name = "myRectangle"
        Me.RegisterName(myRectangle.Name, myRectangle)
        myRectangle.Width = 100
        myRectangle.Height = 100
        myRectangle.Fill = Brushes.Blue

        Dim myDoubleAnimation As New DoubleAnimation()
        myDoubleAnimation.From = 1.0
        myDoubleAnimation.To = 0.0
        myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
        myDoubleAnimation.AutoReverse = True
        myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

        myStoryboard = New Storyboard()
        myStoryboard.Children.Add(myDoubleAnimation)
        Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
        Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))

        ' Use the Loaded event to start the Storyboard.
        AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

        myPanel.Children.Add(myRectangle)
        Me.Content = myPanel
    End Sub

    Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
        myStoryboard.Begin(Me)
    End Sub

End Class

Типы анимации

Поскольку анимация создает значения свойств, для различных типов свойств существуют различные типы анимации. Чтобы анимировать свойство, которое принимает Double , например Width свойство элемента, используйте анимацию, создающую Double значения. Чтобы анимировать свойство, которое принимает Point , используйте анимацию, создающую Point значения и т. д. Из-за количества различных типов свойств в пространстве имен существует несколько классов анимации System.Windows.Media.Animation . Имена классов следуют строгому соглашению, благодаря чему их легко различать.

  • <Type>Анимация

    Такая анимация называется "базовой" (или From/To/By) и производится либо от начального до конечного значения, либо посредством добавления значения смещения к начальному значению.

    • Чтобы установить начальное значение, присвойте значение свойству From анимации.

    • Чтобы установить конечное значение, присвойте значение свойству To анимации.

    • Чтобы установить значение смещения, присвойте значение свойству By анимации.

    В примерах этого раздела используются анимации этого класса, поскольку они являются наиболее простыми в использовании. Сведения об анимации From/To/By подробно описаны в обзоре анимации From/To/By.

  • <Type>AnimationUsingKeyFrames

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

  • <Type>аниматионусингпас

    Анимация с использованием пути позволяет использовать геометрический путь для создания анимации значений.

  • <Type>AnimationBase

    Абстрактный класс, который при реализации реализует анимацию <Type> значения. Этот класс выступает в качестве базового класса для <Type> классов Animation и <Type> AnimationUsingKeyFrames. Эти классы используются непосредственно только для создания пользовательской анимации. В противном случае используйте анимацию анимации <Type> или опорный кадр <Type> .

В большинстве случаев потребуется использовать <Type> классы анимации, такие как DoubleAnimation и ColorAnimation .

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

Тип свойства Соответствующая базовая (From/To/By) анимация Соответствующая анимация с ключевыми кадрами Соответствующая анимация с использованием пути Пример использования
Color ColorAnimation ColorAnimationUsingKeyFrames None Анимация Color объекта SolidColorBrush или GradientStop .
Double DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath Анимация Width объекта или объекта DockPanel Height Button .
Point PointAnimation PointAnimationUsingKeyFrames PointAnimationUsingPath Анимация Center расположения объекта EllipseGeometry .
String None StringAnimationUsingKeyFrames None Анимация Text объекта или объекта TextBlock Content Button .

Анимации представляет собой шкалу времени

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

Так как анимация представляет собой Timeline , она также представляет сегмент времени. Анимация также вычисляет выходные значения по мере продвижения по заданному сегменту времени (или Duration ). По мере выполнения (воспроизведения) анимации обновляется свойство, с которым она связана.

Три часто используемых свойства времени: Duration , AutoReverse и RepeatBehavior .

Свойство Duration

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

DurationДля определения текущего значения анимации используется ее свойство. Если для анимации не задано Duration значение, используется по умолчанию 1 секунда.

Следующий синтаксис демонстрирует упрощенную версию Язык XAML синтаксиса атрибута для Duration Свойства.

количество часов : минут : с

В следующей таблице показано несколько Duration параметров и их результирующие значения.

Параметр Возвращаемое значение
0:0:5.5 5,5 секунды.
0:30:5.5 30 минут и 5,5 секунды.
1:30:5.5 1 час, 30 минут и 5,5 секунды.

Одним из способов указания Duration в коде является использование FromSeconds метода для создания TimeSpan , а затем объявление новой Duration структуры с помощью TimeSpan .

Дополнительные сведения о Duration значениях и полный Язык XAML Синтаксис см. в разделе Duration структура.

Свойство AutoReverse

AutoReverseСвойство указывает, будет ли временная шкала воспроизводиться назад после достижения конца Duration . Если задать для этого свойства анимации значение, анимация будет отменяться true после достижения конца Duration , начиная с конечного значения и заканчивая начальным значением. По умолчанию это свойство имеет значение false .

RepeatBehavior

RepeatBehaviorСвойство указывает, сколько раз будет воспроизводиться временная шкала. По умолчанию временные шкалы имеют число итераций 1.0 , что означает, что они воспроизводятся один раз и не повторяются.

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

Применение анимации к свойству

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

Целевые объекты и свойства

StoryboardКласс предоставляет TargetName TargetProperty вложенные свойства и. Эти свойства определяют анимируемые объекты. Чтобы использовать объект в качестве целевого объекта анимации, обычно следует присвоить ему имя.

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

  • Чтобы создать FrameworkElement цель анимации, присвойте ей имя, задав его Name свойство. В коде также необходимо использовать RegisterName метод для регистрации имени элемента со страницей, к которой он принадлежит.

  • Чтобы сделать Freezable объект целевым объектом анимации в XAML , используйте директиву x:Name , чтобы присвоить ей имя. В коде вы просто используете метод, RegisterName чтобы зарегистрировать объект со страницей, к которой он принадлежит.

В следующих разделах приводится пример именования элемента в XAML коде и. Более подробные сведения об именовании и нацеливании см. в разделе Общие сведения о раскадровках.

Применение и запуск раскадровки

Чтобы запустить раскадровку в XAML , свяжите ее с EventTrigger . EventTriggerОбъект является объектом, который описывает действия, выполняемые при наступлении указанного события. Одно из этих действий может быть BeginStoryboard действием, которое используется для запуска раскадровки. Триггеры событий по концепции аналогичны обработчикам событий, так как они позволяют задать реакцию приложения на конкретное событие. В отличие от обработчиков событий, триггеры событий могут быть полностью описаны в разделе XAML ; никакой другой код не требуется.

Чтобы запустить Storyboard в коде, можно использовать EventTrigger или Begin метод Storyboard класса.

Интерактивное управление раскадровкой

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

Что происходит по завершении анимации?

FillBehaviorСвойство определяет, как ведет себя временная шкала при ее завершении. По умолчанию временная шкала начинается по Filling завершении. Анимация, которая Filling содержит конечное выходное значение.

DoubleAnimationВ предыдущем примере не заканчивается, так как его RepeatBehavior свойство имеет значение Forever . В следующем примере прямоугольник анимируется с помощью аналогичной анимации. В отличие от предыдущего примера, RepeatBehavior Свойства и AutoReverse этой анимации остаются в значениях по умолчанию. Таким образом, анимация выполняется от 1 до 0 в течение пяти секунд, а затем останавливается.

<Rectangle
  Name="MyRectangle"
  Width="100" 
  Height="100"
  Fill="Blue">
  <Rectangle.Triggers>

    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0" Duration="0:0:5" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 1.0
myDoubleAnimation.To = 0.0
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))

Так как FillBehavior значение по умолчанию не изменилось, то есть HoldEnd анимация сохраняет свое окончательное значение 0 при завершении. Таким образом, Opacity прямоугольник остается в 0 после окончания анимации. Если задать Opacity для прямоугольника другое значение, код не будет оказывать никакого влияния, так как анимация по-прежнему влияет на Opacity свойство.

Одним из способов восстановить управление анимированным свойством в коде является использование BeginAnimation метода и указание значения NULL для AnimationTimeline параметра. Дополнительные сведения и пример см. в разделе Задание свойства после его анимации с помощью раскадровки.

Обратите внимание, что, хотя установка значения свойства, имеющего Active Filling анимацию или, не оказывает никакого влияния, значение свойства изменяется. Дополнительные сведения см. в разделе Обзор анимации и системы управления временем.

Привязка данных и анимирование анимации

Большинство свойств анимации могут быть привязанными к данным или анимированными. Например, можно анимировать Duration свойство объекта DoubleAnimation . Однако в связи с особенностями работы системы времени поведение привязки данных или анимированных анимаций отличается от других случаев привязки данных и анимирования объектов. Чтобы понять их поведение, следует понять значение применения анимации к свойству.

См. пример в предыдущем разделе, в котором показано, как анимировать Opacity прямоугольник. При загрузке прямоугольника в предыдущем примере его триггер события применяет Storyboard . Система времени создает копию Storyboard и ее анимацию. Эти копии заморожены (доступны только для чтения), а Clock объекты создаются из них. Эти объекты используются для выполнения фактических действий по анимации целевых свойств.

Система управления временем создает часы для DoubleAnimation и применяет ее к объекту и свойству, заданному TargetName и TargetProperty DoubleAnimation . В этом случае система времени применяет часы к Opacity свойству объекта с именем «миректангле».

Несмотря на то, что для используется также время Storyboard , часы не применяются к свойствам. Его целью является управление дочерними часами, а также часов, создаваемых для DoubleAnimation .

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

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

Другие способы анимации

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

Примеры анимации

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

Заголовок Описание
Общие сведения об анимации и системе управления временем Описывает, как система управления временем использует Timeline Clock классы и, которые позволяют создавать анимации.
Советы и рекомендации по анимации Список полезных советов по устранению проблем с анимацией, например проблем производительности.
Общие сведения о пользовательской анимации Описание способов расширения системы анимации полными кадрами, классами анимации и покадровым обратным вызовом.
Общие сведения об анимациях From/To/By Описание способов создания анимации, которая переходит между двумя значениями.
Общие сведения об анимации по ключевым кадрам Описание способов создания анимации с несколькими целевыми значениями, включая возможность управления методом интерполяции.
Функции плавности Описание способов применения математических формул к анимациям для получения реалистичного поведения, такого как подскок.
Общие сведения об анимация с использованием пути Описание способов перемещения или поворота объекта по сложному пути.
Общие сведения о методах анимации свойств Описание анимации свойств с помощью раскадровок, локальных анимаций, часов и покадровой анимации.
Общие сведения о Storyboard Описание способов использования раскадровок с несколькими временными шкалами для создания сложных анимаций.
Общие сведения о характере поведения во времени Описывает Timeline типы и свойства, используемые в анимации.
Общие сведения о временных событиях Описание событий, доступных для Timeline объектов и Clock для выполнения кода в точках временной шкалы, таких как begin, пауза, возобновление, пропуск или остановка.
Инструкции Примеры кода для использования анимаций и временных шкал в приложении.
Разделы руководства, посвященные часам Содержит примеры кода для использования Clock объекта в приложении.
Практические руководства, посвященные анимации по ключевым кадрам Примеры кода для использования покадровой анимации в приложении.
Практические руководства, посвященные анимации пути Примеры кода для применения анимации с использованием пути в приложении.

Справочник