감속/가속 함수
감속/가속 함수를 사용하여 사용자 지정 수식을 애니메이션에 적용할 수 있습니다. 예를 들어 마치 스프링 위에 있는 것처럼 개체가 사실적으로 바운스되거나 동작하도록 하고 싶을 수 있습니다. 키 프레임 또는 심지어 From/To/By 애니메이션을 사용하여 이러한 효과를 대략적으로 나타낼 수 있지만 상당히 복잡한 작업이 필요하며 수식을 사용할 때보다 애니메이션이 덜 정확해집니다.
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 애니메이션에 적용했습니다. 이러한 감속/가속 함수를 키 프레임 애니메이션에 적용할 수도 있습니다. 다음 예제에서는 키 프레임과 연결된 감속/가속 함수를 사용하여 위로 수축했다가 느려진 다음 아래로 늘어난 후(떨어지는 것처럼) 바운스되었다가 정지되는 사각형의 애니메이션을 만드는 방법을 보여 줍니다.
<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에 대해 다음과 같은 3가지 값을 지정할 수 있습니다.
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