Анимации WPF: линейные, покадровые и путевые — DoubleAnimation, KeyFrames, MatrixAnimationUsingPath

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

В каждую из этих групп входит огромное количество классов, которые позволят анимировать различные свойства. Каждый из них строится по шаблону, где первое слово — тип данных анимированного свойства. Например, для ширины стоит использовать DoubleAnimation, так как ширина представляется дробным числом, а для флагов у CheckBox и RadioButton стоит использовать ByteAnimation, так как флаг может быть только отмеченным (true) или неотмеченным (false).

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

Линейные — <type>Animation #

• ByteAnimation
• ColorAnimation
• DecimalAnimation
• DoubleAnimation
• Int16Animation
• Int32Animation
• Int64Animation
• PointAnimation
• Point3DAnimation
• QuarternionAnimation
• RectAnimation
• Rotation3DAnimation
• SingleAnimation
• SizeAnimation
• ThicknessAnimation
• VectorAnimation
• Vector3DAnimation

Покадровые — <type>AnimationUsingKeyFrames #

• BooleanAnimationUsingKeyFrames
• ByteAnimationUsingKeyFrames
• CharAnimationUsingKeyFrames
• ColorAnimationUsingKeyFrames
• DecimalAnimationUsingKeyFrames
• DoubleAnimationUsingKeyFrames
• Int16AnimationUsingKeyFrames
• Int32AnimationUsingKeyFrames
• Int64AnimationUsingKeyFrames
• MatrixAnimationUsingKeyFrames
• ObjectAnimationUsingKeyFrames
• PointAnimationUsingKeyFrames
• Point3DAnimationUsingKeyFrames
• QuarternionAnimationUsingKeyFrames
• RectAnimationUsingKeyFrames
• Rotation3DAnimationUsingKeyFrames
• SingleAnimationUsingKeyFrames
• SizeAnimationUsingKeyFrames
• StringAnimationUsingKeyFrames
• ThicknessAnimationUsingKeyFrames
• VectorAnimationUsingKeyFrames
• Vector3DAnimationUsingKeyFrames

Геометрические — <type>AnimationUsingPath #

• DoubleAnimationUsingPath
• MatrixAnimationUsingPath
• PointAnimationUsingPath

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

Начнем сразу же с примера. У меня есть большая цветная кнопка.

Я хочу, чтобы после нажатия на эту кнопку её высота начала постепенно увеличиваться. За это будет отвечать следующий код.

1
private void AnimBtn_Click(object sender, RoutedEventArgs e)
2
{
3
    DoubleAnimation heightAnim = new DoubleAnimation();
4
    heightAnim.From = AnimBtn.ActualHeight;
5
    heightAnim.To = 300;
6
    heightAnim.Duration = TimeSpan.FromSeconds(3);
7
    AnimBtn.BeginAnimation(Button.HeightProperty, heightAnim);
8
}

Так как мы хотим менять высоту, то мы возьмём DoubleAnimation. Создадим переменную и укажем ей 3 основных свойства — начальное значение (From), конечное значение (To) и длительность анимации (Duration, указывается при помощи типа данных TimeSpan).

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

Запустим код и увидим, как после нажатия на кнопку она начинает увеличиваться.

Кроме этих трёх основных свойств есть ещё несколько:

• RepeatBehavior — позволяет установить, как анимация будет повторяться.
• AccelerationRatio — задает ускорение анимации.
• DecelerationRatio — устанавливает замедление анимации.
• SpeedRatio — устанавливает скорость анимации. По умолчанию значение 1.0.
• AutoReverse — при значении true анимация выполняется в противоположную сторону.
• FillBehavior — определяет поведение после окончания анимации. Если оно имеет значение Stop, то после окончания анимации объект возвращает прежние значения: AnimBtn.FillBehavior = FillBehavior.Stop. Если же оно имеет значение HoldEnd, то анимация присваивает анимируемому свойству новое значение.

Например, поставив AutoReverse = true, кнопка начнет становится меньше после конца анимации, также в течении 3 секунд.

Несколько анимаций одновременно и клонирование brush #

Если я хочу добавить ещё одну анимацию, я просто пропишу её вместе с анимацией высоты. Например, поменять цвет на салатовый. Для этого я использую ColorAnimation.

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

В таких случаях нам нужно клонировать это свойство. Для нас, нам нужно клонировать фон. И если значение клонировано, нам можно даже не использовать свойство From, он автоматом возьмет значение из фона.

И у нас получится вот такая анимация!

Покадровая анимация #

Покадровая анимация позволяет настроить каждый кадр какой-либо анимации, между которыми будет происходить каждая анимация, а также в какой промежуток времени она должна выполнится. Создается примерно как и линейная анимация, но вместо From и To здесь будут кадры — KeyFrames.

Для примера, анимируем ширину окна. Так как это ширина, то и анимация будет Double. Скажу, что она должна длиться 6 секунд.

1
public MainWindow()
2
{
3
    InitializeComponent();
4

5
    DoubleAnimationUsingKeyFrames widthFrameAnim = new DoubleAnimationUsingKeyFrames();
6
    widthFrameAnim.Duration = TimeSpan.FromSeconds(6);
7
}

Из ширины в 500 пикселей она должна перейти в ширину 100. Где-то на 200 пикселей она должна немного замедлиться, а затем, как только анимация достигнет конца, быстро, но плавно, вернуться в первоначальное положение. Для такой анимации мне понадобится 3 фрейма — 500, 200 и 100 пикселей, а также бесконечный повтор.

Фреймы мы добавим в лист KeyFrames. Внутри для линейной и простой анимации добавим LinearDoubleKeyFrame, которая состоит из значения для анимации (500, 200 и 100), а также в какой момент времени из всей анимации кадр должен закончится (2, 4 и 6. Всего анимация идет 6 секунд, на каждый фрейм по 2 секунды).

Кроме LinearDoubleKeyFrame у KeyFrame есть ещё много различных вариантов, так же как и у других анимация (Double, Point и прочее), так что здесь просто нужно подобрать тот самый.

1
widthFrameAnim.KeyFrames.Add(new LinearDoubleKeyFrame(500, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2))));
2
widthFrameAnim.KeyFrames.Add(new LinearDoubleKeyFrame(200, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4))));
3
widthFrameAnim.KeyFrames.Add(new LinearDoubleKeyFrame(100, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(6))));

А бесконечный повтор мы можем сделать при помощи RepeatBehavior.

1
widthFrameAnim.RepeatBehavior = RepeatBehavior.Forever;

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

1
this.BeginAnimation(WidthProperty, widthFrameAnim);

И по итогу мы увидим следующее!

Путевая анимация #

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

Старую анимацию я закомментирую.

1
public MainWindow()
2
{
3
    InitializeComponent();
4

5
    /* DoubleAnimationUsingKeyFrames widthFrameAnim = new DoubleAnimationUsingKeyFrames();
6
    widthFrameAnim.Duration = TimeSpan.FromSeconds(6);
7

8
    widthFrameAnim.KeyFrames.Add(new LinearDoubleKeyFrame(500, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2))));
9
    widthFrameAnim.KeyFrames.Add(new LinearDoubleKeyFrame(200, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4))));
10
    widthFrameAnim.KeyFrames.Add(new LinearDoubleKeyFrame(100, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(6))));
11

12
    widthFrameAnim.RepeatBehavior = RepeatBehavior.Forever;
13
    this.BeginAnimation(WidthProperty, widthFrameAnim); */
14
}

Далее для анимации мне нужно будет сделать геометрический путь. Так как я хочу, чтобы она каталась по прямоугольнику, создам RectangleGeometry. Подгоню его под размеры кнопки.

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

1
RectangleGeometry myRectangleGeometry = new RectangleGeometry();
2
myRectangleGeometry.Rect = new Rect(-160, -18, 320, 36);
3

4
PathGeometry animationPath = new PathGeometry();
5
animationPath.AddGeometry(myRectangleGeometry);

А затем, так как гугл мне сказал что я не могу использовать точки для перемещения объектов, а double для позиции не очень подходит, я буду использовать анимацию с матрицами — MatrixAnimationUsingPath.

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

1
MatrixAnimationUsingPath pointPathAnim = new MatrixAnimationUsingPath();
2
pointPathAnim.Duration = TimeSpan.FromSeconds(3);     // Анимация идёт 3 секунды
3
StarImg.RenderTransform = new MatrixTransform();      // Клонируем текущую позицию
4
pointPathAnim.PathGeometry = animationPath;           // Путь для позиции равен пути чуть выше
5
pointPathAnim.RepeatBehavior = RepeatBehavior.Forever; // Анимация повторяется всегда
6

7
// Для позиции (RenderTransform) начинаем анимацию по передвижению
8
StarImg.RenderTransform.BeginAnimation(MatrixTransform.MatrixProperty, pointPathAnim);

Анимация будет выглядеть вот так.

На этом разбор трёх видов анимаций закончен.

Анимации через триггеры в XAML #

Все эти же анимации можно реализовать и при помощи триггеров в XAML. Разберём те же примеры.

Линейные анимации — высота и цвет кнопки:

Покадровые анимации — ширина окна:

Путевые анимации — звёздочка бегает вокруг кнопки:

Полный код примера #

MainWindow.xaml с кнопкой и звёздочкой, готовый к подключению C#-анимаций:

1
<Window x:Class="WpfApp1.MainWindow"
2
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4
        Title="MainWindow" Height="222" Width="366">
5
    <Grid>
6
        <Button x:Name="AnimBtn" Margin="20,0" VerticalAlignment="Center"
7
                Background="Teal" Content="гипер кнопка" Click="AnimBtn_Click"/>
8
        <Image Source="/star.png" Height="20" Width="20" x:Name="StarImg"/>
9
    </Grid>
10
</Window>

MainWindow.xaml.cs — линейная анимация по клику и путевая на загрузке окна:

1
using System;
2
using System.Windows;
3
using System.Windows.Media;
4
using System.Windows.Media.Animation;
5

6
namespace WpfApp1
7
{
8
    public partial class MainWindow : Window
9
    {
10
        public MainWindow()
11
        {
12
            InitializeComponent();
13

14
            RectangleGeometry myRectangleGeometry = new RectangleGeometry();
15
            myRectangleGeometry.Rect = new Rect(-160, -18, 320, 36);
16

17
            PathGeometry animationPath = new PathGeometry();
18
            animationPath.AddGeometry(myRectangleGeometry);
19

20
            MatrixAnimationUsingPath pointPathAnim = new MatrixAnimationUsingPath();
21
            pointPathAnim.Duration = TimeSpan.FromSeconds(3);
22
            StarImg.RenderTransform = new MatrixTransform();
23
            pointPathAnim.PathGeometry = animationPath;
24
            pointPathAnim.RepeatBehavior = RepeatBehavior.Forever;
25

26
            StarImg.RenderTransform.BeginAnimation(MatrixTransform.MatrixProperty, pointPathAnim);
27
        }
28

29
        private void AnimBtn_Click(object sender, RoutedEventArgs e)
30
        {
31
            DoubleAnimation heightAnim = new DoubleAnimation();
32
            heightAnim.From = AnimBtn.ActualHeight;
33
            heightAnim.To = 300;
34
            heightAnim.Duration = TimeSpan.FromSeconds(3);
35
            heightAnim.AutoReverse = true;
36
            AnimBtn.BeginAnimation(Button.HeightProperty, heightAnim);
37

38
            AnimBtn.Background = ((SolidColorBrush)AnimBtn.Background).Clone();
39
            ColorAnimation backgroundAnim = new ColorAnimation();
40
            backgroundAnim.To = Colors.GreenYellow;
41
            backgroundAnim.Duration = TimeSpan.FromSeconds(3);
42
            AnimBtn.Background.BeginAnimation(SolidColorBrush.ColorProperty, backgroundAnim);
43
        }
44
    }
45
}