감속/가속 함수
감속/가속 함수를 사용하면 애니메이션에 사용자 지정 수식을 적용할 수 있습니다. 예를 들어 개체가 스프링 위에 있는 것처럼 사실적으로 바운스하거나 동작하도록 만들 수 있습니다. 키 프레임 또는 시작/끝/기준 애니메이션을 사용하여 이러한 효과를 모방할 수 있지만 많은 작업이 필요하며 수식을 사용하는 것보다 애니메이션이 덜 정확합니다.
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 속성을 사용하여 애니메이션에 적용할 감속/가속 함수를 지정합니다. 다음 예제에서는 DoubleAnimation에 BounceEase 감속/가속 함수를 적용하여 바운스 효과를 만듭니다.
<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>
앞의 예제에서는 시작/끝/기준 애니메이션에 감속/가속 함수를 적용했습니다. 이러한 감속/가속 함수를 키 프레임 애니메이션에 적용할 수도 있습니다. 다음 예제에서는 키 프레임과 연결된 감속/가속 함수와 함께 키 프레임을 사용하여 위쪽으로 수축되고 속도가 느려진 후 떨어지는 것처럼 아래쪽으로 확장되고 바운스하여 정지하는 사각형의 애니메이션을 만드는 방법을 보여 줍니다.
<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는 시간을 나타냅니다.
.png "BackEase EasingMode 그래프")
.png "BounceEase EasingMode 그래프")
.png "CircleEase EasingMode 그래프")
.png "CubicEase EasingMode 그래프")
.png "다양한 easingmode 그래프로 나타낸 ElasticEase")
.png "다양한 easingmode 그래프로 나타낸 ExponentialEase")
.png "다양한 easingmode 그래프로 나타낸 QuarticEase")
.png "다양한 easingmode 그래프로 나타낸 QuadraticEase")
.png "다양한 EasingMode 값의 SineEase")
.gif "참고") 참고 |
|---|
PowerEase의 Power 속성을 사용하여 CubicEase, QuadraticEase, QuarticEase 및 QuinticEase와 동일한 동작을 만들 수 있습니다.예를 들어 PowerEase를 사용하여 CubicEase를 대체하려는 경우 Power 값을 3으로 지정합니다. |
런타임에 포함된 감속/가속 함수를 사용하는 것 외에도 EasingFunctionBase에서 상속하여 사용자 지정 감속/가속 함수를 만들 수 있습니다. 다음 예제에서는 간단한 사용자 지정 감속/가속 함수를 만드는 방법을 보여 줍니다. EaseInCore 메서드를 재정의하여 감속/가속 함수의 작동 방식에 대한 고유한 수학적 논리를 추가할 수 있습니다.
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
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();
}
}
}
<Window x:Class="CustomEasingFunction.Window1"
xmlns:CustomEase="clr-namespace:CustomEasingFunction"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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>