다음을 통해 공유


감속/가속 함수

감속/가속 함수를 사용하여 사용자 지정 수식을 애니메이션에 적용할 수 있습니다. 예를 들어 마치 스프링 위에 있는 것처럼 개체가 사실적으로 바운스되거나 동작하도록 하고 싶을 수 있습니다. 키 프레임 또는 심지어 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 EasingMode 그래프.

BounceEase

BounceEase EasingMode 그래프.

CircleEase

CircleEase EasingMode 그래프.

CubicEase

CubicEase EasingMode 그래프.

ElasticEase

다양한 easingmodes 그래프로 나타낸 ElasticEase.

ExponentialEase

다양한 easingmodes 그래프로 나타낸 ExponentialEase.

PowerEase

다양한 easingmodes 그래프로 나타낸 QuarticEase.

QuadraticEase

다양한 easingmodes 그래프로 나타낸 QuadraticEase

QuarticEase

다양한 easingmodes 그래프로 나타낸 QuarticEase.

QuinticEase

다양한 easingmodes 그래프로 나타낸 QuinticEase.

SineEase

다양한 EasingMode 값의 SineEase

참고

사용할 수 있습니다 PowerEase 와 같은 동작을 만들려면 CubicEaseQuadraticEase, 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>