이징 함수를 사용하면 애니메이션에 사용자 지정 수학 수식을 적용할 수 있습니다. 예를 들어, 개체가 현실적으로 튀어 오르거나 스프링에 있는 것처럼 동작하도록 할 수 있습니다. 키 프레임 또는 심지어 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는 시간을 나타냅니다.
BackEase 이징 모드 그래프. BackEase_그래프
BounceEase 이징모드 그래프.BounceEase_그래프
&
CubicEase 이징 모드 그래프. CubicEase 그래프.
ElasticEase는 다양한 보간 방식의 그래프와 함께 합니다.ElasticEase_Graph
다양한 easing modes에서의 ExponentialEase 그래프.ExponentialEase_Graph
다양한 이징 모드의 그래프로 나타낸 QuarticEase. QuarticEase_Graph
다양한 완화 모드의 그래프로 나타낸 QuarticEase, QuarticEase_그래프
다양한 이징 모드 그래프를 사용한 QuinticEase. QuinticEase_Graph
SineEase_Graph
비고
동일한 동작을 생성하려면 Power 속성을 사용하여 PowerEase, CubicEase, QuadraticEase, QuarticEase, 및 QuinticEase를 사용할 수 있습니다. 예를 들어, PowerEase를 CubicEase로 대체하려면, Power 값으로 3을 지정합니다.
런타임에 포함된 감속/가속 함수를 사용하는 것 외에도 EasingFunctionBase을(를) 상속하여 사용자 지정 감속/가속 함수를 만들 수 있습니다 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>
GitHub에서 Microsoft와 공동 작업
이 콘텐츠의 원본은 GitHub에서 찾을 수 있으며, 여기서 문제와 끌어오기 요청을 만들고 검토할 수도 있습니다. 자세한 내용은 참여자 가이드를 참조하세요.
.NET Desktop feedback