DoubleAnimation анимирует свойства типа Double

Анимации в WPF

Приветствую вас, дорогие хабраюзеры! Сегодня я хочу вам рассказать об анимации в WPF. О ней, конечно, писали ранее на хабре, однако я постараюсь рассказать подробнее. Мой пост будет скорее больше теоретический, однако, я надеюсь, вы извлечете из него выгоду.
Анимация в WPF отличается от всего, что вы видели раньше своей наглядностью и простотой. Раньше вам приходилось вручную перерисовывать сцену по таймеру, разумеется, написав довольно большой объем кода. Теперь вы можете создать анимацию в XAML файле, не написав ни единой строчки кода на C# (или любой другой .Net язык). Разумеется, осталась возможность создавать анимацию в коде, но об этом поговорим позднее. Анимация в WPF не перерисовывает элемент, а изменяет его свойства через определенные интервалы времени (по умолчанию около 60 раз в секунду, если вы не измените в Storyboard). Это позволяет ей оставаться самой собой, например, если анимировать кнопку, то во время анимации она будет оставаться «кнопкой», т.е. на неё можно будет нажать, и производить разнообразные манипуляции над ней.
Много кода, примеров и картинок под катом…
Архитектура
Все анимации в WPF находятся в пространстве имен System.Windows.Media.Animation. Все классы анимаций начинаются с имени анимируемого типа, например DoubleAnimation анимирует свойства типа Double.

Анимации делятся на три категории:

1. Анимации с использованием линейной интерполяции (ТипСвойстваAnimation)
2. Анимации с использованием ключевых кадров (ТипСвойстваUsingKeyFrames)
3. Анимации с использованием пути (ТипСвойстваUsingPath)

Все анимации наследуются от ТипСвойстваAnimationBase. В данном пространстве имен присутствуют классы анимации для большинства BCL типов.

Для начала давайте рассмотрим простейшую анимацию в XAML:







From="0"
To="200"
Duration="0:0:5"
Storyboard.TargetProperty
="Margin"/>






* This source code was highlighted with Source Code Highlighter.

Рассмотрим каждый класс подробнее:

• ThicknessAnimation – сама анимация.
• Storyboard – «временная шкала». О ней поговорим позднее.
• BeginStoryboard – «обертка» для Storyboard, запускающая анимацию.
• EventTrigger – триггер на событие.

После нажатия на кнопку, мы видим, что она уменьшилась:

Слева до нажатия, справа после.

Аналогичный пример на MSDN. Тег object, к сожалению, хабрапарсер не пропускает.

Анимацию можно запускать и при изменении свойства зависимости:

* This source code was highlighted with Source Code Highlighter.

Впрочем, в данном случае это даст тот же результат.

Более тонкая настройка

Свойство Storyboard.TargetProperty
Это прикрепляемое свойство задает целевое свойство для анимации. В данном случае мы применяем анимацию к свойству Margin.

Свойство Storyboard.TargetName

Это прикрепляемое свойство задает название целевого элемента в пределах видимости XAML. Используется, если мы хотим применить анимацию к другому элементу в XAML.

Свойство Storyboard.Target

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

Свойство From

Это свойство задает начальное значение, т.е. при старте будет использоваться именно это значение. Однако это свойство можно опустить, и тогда в качестве начального значения будет использоваться текущее. Это позволяет, не дожидаясь окончания одной анимации, запустить другую, и при этом не будет «рывка». Если вы анимируете свойства Width и Height, то проверьте, чтобы значение свойства не было равно Double.NaN.

Свойство To

Это свойство задает конечное значение. Его также можно опустить, при этом будет использоваться значение, которое принимало свойство до анимаций. Например, можно сделать анимацию расширения при наведении курсора на кнопку, а при уходе курсора сделать анимацию без свойства To, то тогда при уходе кнопка «сузится» до первоначальных размеров.

Свойство By

Это свойство задает значение, на которое изменяется конечное свойство. Проще говоря, при присваивании значения свойству By, свойство To принимает значение From + By. Это сделано для облегчения использования анимаций в XAML.

Свойство By реализуется не всеми классами. В основном это свойство присутствует в числовых анимациях.

Свойство IsAdditive

Это свойство позволяет сделать значения From и To относительными. Грубо говоря, если данное свойство имеет значение True, то начальное значение будет равно «текущему значению + From», а конечное «текущему значению + To».

Свойство Duration

Это свойство задает длительность анимации. Заметьте – тип данного свойства не TimeSpan, а Duration. Почему оно тогда принимает время? Потому что есть неявное приведение к TimeSpan. “Но зачем тогда нужен Duration?” — скажите вы. Затем, что Duration также может принимать значение Duration.Automatic (эквивалентно 1 секунде) и Duration.Forever (анимация ничего не делает).

Свойство BeginTime

Это свойство задает задержку перед запуском анимации. Здесь думаю все очевидно. Пример на MSDN.

Свойство SpeedRatio

Это свойство задает скорость анимации. Его начальное значение равно 1D. При его увеличении, скорость будет соответственно увеличиваться, а при его уменьшении замедляться. Например если этому свойству присвоить 2D, то скорость увеличиться вдвое.

Свойства AccelerationRatio и DecelerationRatio

Эти свойства задают промежуток ускорения или замедления. Его значение указывается в процентном соотношении. Например, если свойству AccelerationRatio присвоить 0.5, то половину своего времени анимация будет ускоряться. Или если присвоить свойствам AccelerationRatio и DecelerationRatio 0.25, при общей длительности 4 секунды, то все произойдет так:

1. Ускорение анимации на 1 секунду
2. Постоянная скорость на 2 секунды
3. Замедление анимации на 1 секунду

Значение данных свойств не может быть больше 1 или меньше 0.

Свойство AutoReverse

Если это свойство будет равно True, то в конце анимации она будет перезапущена в обратном направлении. Т.е. если кнопка увеличивалась, то она уменьшится.

BeginTime применяется только в самом начале анимации, в обратном направлении задержки уже не будет.

Виды анимаций

Теперь рассмотрим каждый вид подробнее:

Линейная анимация

Здесь все просто – анимирует свойство из одного значения в другое, с использованием функции линейной интерполяции. Всё что мы рассматривали ранее, являлось линейной анимацией.

Анимация с использованием ключевых кадров

Эта анимация анимирует свойство по ключевым кадрам. Если вы имели дело с 3D-анимацией, то вы меня поймете.
Анимация ключевых кадров похожа на обычную анимацию, лишь с одним условием — конечных значений может быть больше 1.
Рассмотрим данный фрагмент XAML:








Storyboard.TargetProperty
="(Border.Background).
(SolidColorBrush.Color)">
KeyTime="0:0:2"
Value="Blue"/>
KeyTime="0:0:4"
Value="Red"/>
KeyTime="0:0:6"
Value="Green"/>








* This source code was highlighted with Source Code Highlighter.