Плавность анимации

Для создания плавности анимации используется различные функции плавности или эластичности (Easing functions). Их основная задача - сделать ход анимации более плавным, более естественным.

Рассмотрим самую простейшую функцию анимации - ElasticEase. С помощью ее свойства Oscillations можно определить количество колебательных движений во время анимации, в итоге анимируемый элемент как бы пружинится.

Свойство Springiness позволяет установить жесткость, и чем больше это значение, тем быстрее затухают колебания.

Еще одно свойство EasingMode указывает на режим эластичности и может принимать одно из трех значений:

• EaseIn: функция плавности применяется в начале анимации

• EaseOut: функция плавности применяется в конце анимации

• EaseInOut: функция плавности применяется в начале и в конце анимации

Например,

<Button Width="70" Height="25" Content="Кнопка">
    <Button.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Width" 
   To="150"
   Duration="0:0:5">

                            <DoubleAnimation.EasingFunction>
                                <ElasticEase EasingMode="EaseOut" Oscillations="5" Springiness="4" />
                            </DoubleAnimation.EasingFunction>

                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Button.Triggers>
</Button>

Настройка функции анимации Oscillations="5" указывает, что будет пять колебаний. А свойсто EasingMode="EaseOut" устанавливает, что эти колебания будут в конце анимации. Если бы мы захотели увидить колебания в начале, то соответственно надо было бы использовать настройку EasingMode="EaseIn"

В WPF определено всего 11 функций плавности анимации:

• BackEase возвращает анимацию назад, а ее свойство Amplitute задает амплитуду возврата

• BounceEase создает эффект отскока, а свойство Bounces устанавливает количество отскоков.

• ElasticEase создает анимацию осцилляций пружины назад и вперед до момента ее полной остановки

• SineEase создает анимацию с помощью формулы синуса

• ExponentialEase создает анимацию с помощью экспоненциальной формулы.

• CircleEase создает анимацию с помощью цикличной функции.

• QuadraticEase функция плавности на основе квадратичной функции f(t) = t²

• CubicEase функция плавности на основе кубической функции f(t) = t³

• QuarticEase создает анимацию с помощью формулы f(t) = t⁴

• QuinticEase создает анимацию с помощью формулы f(t) = t⁵

• PowerEase ускоряет анимацию вначале и замедляет в конце, используя функцию f(t) = t^p. В зависимости от значения экспоненты p посредством этой функции мы можем замещать функции QuadraticEase, QuarticEase и QuinticEase

Например, применение функции PowerEase:

<DoubleAnimation.EasingFunction>
    <PowerEase Power="6" />
</DoubleAnimation.EasingFunction>

Или функция BounceEase:

<DoubleAnimation.EasingFunction>
    <BounceEase EasingMode="EaseOut" Bounces="3" />
</DoubleAnimation.EasingFunction>

Создание своей функции анимации

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

Например, определим функцию, которая использует для выисления значений функцию f(t) = t⁶. Для этого добавим в проект следующий класс:

public class SexticEase : EasingFunctionBase
{
    protected override double EaseInCore(double normalizedTime)
    {
        return normalizedTime * normalizedTime * normalizedTime
                 * normalizedTime * normalizedTime * normalizedTime;
    }

        
    protected override Freezable CreateInstanceCore()
    {
        return new SexticEase();
    }
}

Метод EaseInCore() выполняет всю работу функции плавности. Он получает текущее значение анимируемого свойства в виде параметра normalizedTime. Здесь мы просто возводит его в шестую степень. А метод CreateInstanceCore() должен возвращать объект функции анимации.

Применение функции в XAML:

<DoubleAnimation Storyboard.TargetProperty="Width" 
                To="150"
                Duration="0:0:5">

    <DoubleAnimation.EasingFunction>
        <local:SexticEase EasingMode="EaseOut" />
    </DoubleAnimation.EasingFunction>
</DoubleAnimation>