Упрощение функций
Функции упрощения позволяют применять пользовательские математические формулы к анимациям. Например, может потребоваться, чтобы объект реалистично отскакивал или вел себя так, как будто он находится на пружине. Вы можете использовать Key-Frame или даже анимации От/До/По, чтобы примерно воспроизвести эти эффекты, но это потребует значительных усилий, и анимация будет менее точной по сравнению с использованием математической формулы.
Помимо создания собственной пользовательской функции упрощения, наследуя от EasingFunctionBase, можно использовать одну из нескольких функций упрощения, предоставляемых средой выполнения для создания общих эффектов.
BackEase: немного отводит анимацию назад, прежде чем она начинает двигаться по указанному пути.
BounceEase: создает пружинящий эффект.
CircleEase. Создает анимацию, которая ускоряется и/или замедляется с помощью круговой функции.
CubicEase: создает анимацию, которая ускоряет и(или) уменьшается с помощью формулы f(t) = t3.
ElasticEase: создает анимацию, которая напоминает пружину, колеблющуюся назад и вперед, пока не остановится.
ExponentialEase. Создает анимацию, которая ускоряется и/или замедляется по экспоненциальной формуле.
PowerEase: создает анимацию, которая ускоряет и/или уменьшается с помощью формулы f(t) = tp, где p равно свойству Power.
QuadraticEase: создает анимацию, которая ускоряет и /или уменьшается с помощью формулы f(t) = t2.
QuarticEase: создает анимацию, которая ускоряет и/или уменьшается с помощью формулы f(t) = t4.
QuinticEase. Создайте анимацию, которая ускоряется и/или замедляется с использованием формулы f(t) = t5.
SineEase: Создает анимацию, которая ускоряется и/или замедляется с использованием синусоидальной формулы.
Чтобы применить функцию упрощения к анимации, используйте свойство EasingFunction анимации, указав функцию упрощения для применения к анимации. В следующем примере применяется функция интерполяции BounceEase к DoubleAnimation для создания эффекта отскока.
<Rectangle Name="myRectangle" Width="200" Height="30" Fill="Blue">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseDown">
<BeginStoryboard>
<Storyboard>
<Storyboard x:Name="myStoryboard">
<DoubleAnimation From="30" To="200" Duration="00:00:3"
Storyboard.TargetName="myRectangle"
Storyboard.TargetProperty="Height">
<DoubleAnimation.EasingFunction>
<BounceEase Bounces="2" EasingMode="EaseOut"
Bounciness="2" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
В предыдущем примере функция упрощения была применена к анимации from/To/By. Вы также можете применить эти функции плавности к анимации Key-Frame. В следующем примере показано, как использовать ключевые кадры с функциями упрощения, связанными с ними, для создания анимации прямоугольника, который сжимается вверх, замедляется, а затем расширяется вниз (как будто падает), а затем отскакивает до остановки.
<Rectangle Name="myRectangle" Width="200" Height="200" Fill="Blue">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="Height"
Storyboard.TargetName="myRectangle">
<!-- This keyframe animates the ellipse up to the crest
where it slows down and stops. -->
<EasingDoubleKeyFrame Value="30" KeyTime="00:00:02">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<!-- This keyframe animates the ellipse back down and makes
it bounce. -->
<EasingDoubleKeyFrame Value="200" KeyTime="00:00:06">
<EasingDoubleKeyFrame.EasingFunction>
<BounceEase Bounces="5" EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Свойство EasingMode можно использовать для изменения поведения функции упрощения, то есть изменения интерполяции анимации. Существует три возможных значения, которые можно указать для EasingMode:
EaseIn: Интерполяция следует математической формуле, связанной с функцией упрощения.
EaseOut: Интерполяция следует 100% интерполяции минус выходные данные формулы, связанной с функцией упрощения.
EaseInOut: Интерполяция использует EaseIn для первой половины анимации и EaseOut во второй половине.
На рисунках ниже показаны различные значения EasingMode, где f(x) представляет ход анимации и t представляет время.
Заметка
Вы можете использовать PowerEase для создания того же поведения, что и CubicEase, QuadraticEase, QuarticEase, QuinticEase с помощью свойства Power. Например, если вы хотите использовать PowerEase для замены CubicEase, укажите значение Power 3.
Помимо использования функций упрощения, включенных во время выполнения, можно создать собственные пользовательские функции упрощения, наследуя от EasingFunctionBase. В следующем примере показано, как создать простую пользовательскую функцию упрощения. Вы можете добавить собственную математическую логику для того, как работает функция упрощения, переопределив метод EaseInCore.
namespace CustomEasingFunction
{
public class CustomSeventhPowerEasingFunction : EasingFunctionBase
{
public CustomSeventhPowerEasingFunction()
: base()
{
}
// Specify your own logic for the easing function by overriding
// the EaseInCore method. Note that this logic applies to the "EaseIn"
// mode of interpolation.
protected override double EaseInCore(double normalizedTime)
{
// applies the formula of time to the seventh power.
return Math.Pow(normalizedTime, 7);
}
// Typical implementation of CreateInstanceCore
protected override Freezable CreateInstanceCore()
{
return new CustomSeventhPowerEasingFunction();
}
}
}
Namespace CustomEasingFunction
Public Class CustomSeventhPowerEasingFunction
Inherits EasingFunctionBase
Public Sub New()
MyBase.New()
End Sub
' Specify your own logic for the easing function by overriding
' the EaseInCore method. Note that this logic applies to the "EaseIn"
' mode of interpolation.
Protected Overrides Function EaseInCore(ByVal normalizedTime As Double) As Double
' applies the formula of time to the seventh power.
Return Math.Pow(normalizedTime, 7)
End Function
' Typical implementation of CreateInstanceCore
Protected Overrides Function CreateInstanceCore() As Freezable
Return New CustomSeventhPowerEasingFunction()
End Function
End Class
End Namespace
<Window x:Class="CustomEasingFunction.Window1"
xmlns:CustomEase="clr-namespace:CustomEasingFunction"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="500" Width="300">
<StackPanel>
<TextBlock Margin="10" TextWrapping="Wrap">Click on the rectangle to start the animation</TextBlock>
<StackPanel x:Name="LayoutRoot" Background="White">
<Rectangle Name="myRectangle" Width="200" Height="30" Fill="Blue">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="30" To="300" Duration="00:00:3"
Storyboard.TargetName="myRectangle"
Storyboard.TargetProperty="Height">
<DoubleAnimation.EasingFunction>
<!-- You get the EasingMode property for free on your custom
easing function.-->
<CustomEase:CustomSeventhPowerEasingFunction EasingMode="EaseIn"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</StackPanel>
</StackPanel>
</Window>
.NET Desktop feedback