Анимации по ключевым кадрам

Все вышеприведенные типы анимаций, такие как ColorAnimation или DoubleAnimation, основывались на плавном смене значения. Есть еще второй род анимаций - анимации по ключевым кадрам, которые анимирует те же свойства, что и обычные анимации. Например, ColorAnimationUsingKeyFrames анимирует цвет, а DoubleAnimationUsingKeyFrames - свойства, представляющие тип double.

Анимации по ключевым кадрам имеет практически все те же свойства, что и обычные анимации. Основное отличие - покадровые анимации имеют свойство KeyFrames, которое позволяет установить коллекцию кадров. Каждый кадр (KeyFrame) определяет значение для анимируемого свойства с помощью свойства Value и продолжительность кадра с помощью свойства KeyTime

<Window x:Class="AnimationApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:AnimationApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="250" Width="300">
    <Canvas Background="Black">
        <Ellipse Width="20" Height="20" Canvas.Bottom="0" Canvas.Left="120">
            <Ellipse.Fill>
                <RadialGradientBrush RadiusX="1" RadiusY="1" GradientOrigin="0.3, 0.3">
                    <GradientStop Color="White" Offset="0" />
                    <GradientStop Color="Black" Offset="1" />
                </RadialGradientBrush>
            </Ellipse.Fill>
            <Ellipse.Triggers>
                <EventTrigger RoutedEvent="Window.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames 
                                Storyboard.TargetProperty="(Canvas.Bottom)"
                                Duration="0:0:3" AutoReverse="True" 
                                RepeatBehavior="Forever" DecelerationRatio="1" >
                                <LinearDoubleKeyFrame KeyTime="0%" Value="0" />
                                <LinearDoubleKeyFrame KeyTime="33%" Value="60" />
                                <LinearDoubleKeyFrame KeyTime="66%" Value="120" />
                                <LinearDoubleKeyFrame KeyTime="99%" Value="180" />
                            </DoubleAnimationUsingKeyFrames>

                            <ColorAnimationUsingKeyFrames 
								Storyboard.TargetProperty="Fill.GradientStops[1].Color"
                                Duration="0:0:3" RepeatBehavior="Forever" AutoReverse="True">
								
                                <ColorAnimationUsingKeyFrames.KeyFrames>
                                    <LinearColorKeyFrame KeyTime="0:0:1" Value="Green" />
                                    <LinearColorKeyFrame KeyTime="0:0:2" Value="Red" />
                                </ColorAnimationUsingKeyFrames.KeyFrames>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Ellipse.Triggers>
        </Ellipse>
    </Canvas>
</Window>

Тип кадра анимации определяется следующим образом: тип анимации задает тип изменяемого значения, например, ColorAnimationUsingKeyFrames изменяемое значение типа Color. Тип кадра состоит из трех частей: вид кадра, например, линейный (Linear), тип изменяемого значения, и ключевого слова KeyFrame. То есть выше тип кадра был LinearColorKeyFrame - линейный кадр, изменяющий значение Color.

Свойство KeyTime позволяет задать время, с которого начинается кадр. Например, KeyTime="66%" - действие кадра начинается, когда будет пройдено 66% времени анимации. Или KeyTime="0:0:2" - кадр начинается со 2 секунды.

Кроме линейных есть еще несколько видов кадров анимации:

• Дискретные кадры, например, DiscreteColorKeyFrame, они обеспечивают резкую смену кадров.

• Кадры, на основе сплайнов, например, SplineDoubleKeyFrame. В этом случае анимация строиться на основе кривой Безье. Свойство KeySpline определяет начальную и конечную точки участка сплайна. При чем начальная точка сплайна находится в начале координат (0,0), а конечная - в конце (1,1). Получаемый сплайн является отношением между временем (координата X) и анимируемым значением (координата Y).

Например, используем сплайновую анимацию:

<DoubleAnimationUsingKeyFrames 
		Storyboard.TargetProperty="(Canvas.Bottom)"
		Duration="0:0:3" AutoReverse="True" 
		RepeatBehavior="Forever" DecelerationRatio="1" >
    <SplineDoubleKeyFrame KeySpline="0,1 1,0" KeyTime="0%" Value="0" />
    <SplineDoubleKeyFrame KeySpline="0,1 1,0" KeyTime="33%" Value="60" />
    <SplineDoubleKeyFrame KeySpline="0,1 1,0" KeyTime="66%" Value="120" />
    <SplineDoubleKeyFrame KeySpline="0,1 1,0" KeyTime="100%" Value="180" />
</DoubleAnimationUsingKeyFrames>