애니메이션

    <Window.Resources>
        <Storyboard x:Key="rectAnimation">
            <DoubleAnimation    
                Storyboard.TargetName="rect"
                Storyboard.TargetProperty="(Canvas.Left)"
                From="10"
                To="300"
                Duration="0:0:5"
                RepeatBehavior="0:0:13"
                AutoReverse="True"/>
        </Storyboard>
    </Window.Resources>
    <Canvas>
        <Button Canvas.Left="10" Canvas.Top="10" Content="Start">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{StaticResource rectAnimation}" />
                </EventTrigger>
            </Button.Triggers>
        </Button>
        <Rectangle
            x:Name="rect"
            Canvas.Left="10"
            Canvas.Top="50"
            Width="50"
            Height="50"
            Fill="Red" />
    </Canvas>

 

위 코드는 WPF 에서의 애니메이션을 작동시키는 코드이다.

 

From 10 에서 To 300 까지 이동시킨다.

 

To 대신 By 를 쓸 수도 있는데, 다만, By 를 쓰게되면 From+By(크기)만큼 이동되어 310 에서 멈추게 된다.

( To의 경우엔 300에서 멈춘다. )

 

Duration 과 RepeatBehavior 은 (시간):(분):(초) 단위로 위의 코드로 예를 들면 0:0:5 는 5초간 움직이는 것을 의미한다.

 

    <Window.Resources>
        <Storyboard x:Key="rectAnimation">
            <DoubleAnimationUsingKeyFrames 
                Storyboard.TargetName="rect"
                Storyboard.TargetProperty="(Canvas.Left)"
                Duration="0:0:10">
                <!--
                <LinearDoubleKeyFrame KeyTime="0:0:2" Value="300" />
                <LinearDoubleKeyFrame KeyTime="0:0:4" Value="200" />
                <LinearDoubleKeyFrame KeyTime="0:0:6" Value="250" />
                <LinearDoubleKeyFrame KeyTime="0:0:8" Value="50" />
                <LinearDoubleKeyFrame KeyTime="0:0:10" Value="300" />
                -->
                <DiscreteDoubleKeyFrame KeyTime="0:0:2" Value="300" />
                <DiscreteDoubleKeyFrame KeyTime="0:0:4" Value="200" />
                <DiscreteDoubleKeyFrame KeyTime="0:0:6" Value="250" />
                <DiscreteDoubleKeyFrame KeyTime="0:0:8" Value="50" />
                <DiscreteDoubleKeyFrame KeyTime="0:0:10" Value="300" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Canvas>
        <Button Canvas.Left="10" Canvas.Top="10" Content="Start">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{StaticResource rectAnimation}" />
                </EventTrigger>
            </Button.Triggers>
        </Button>
        <Rectangle
            x:Name="rect"
            Canvas.Left="10"
            Canvas.Top="50"
            Width="50"
            Height="50"
            Fill="Red" />
    </Canvas>

 

위 소스는 키 프레임을 지정하여 애니메이션을 주는 소스이다.

 

LinearDoubleKeyFrame 은 이전 소스와 마찬가지로 부드럽게 rect 이 이동하고

 

DiscreteDoublekeyFrame 은 해당 키타임에 맞춰서 해당되는 value 로 바로 이동한다.

 

 

    <Window.Resources>
        <Storyboard x:Key="rectAnimation">
            <DoubleAnimation    
                Storyboard.TargetName="rect"
                Storyboard.TargetProperty="(Canvas.Left)"
                From="10"
                To="300"
                Duration="0:0:2">
                <DoubleAnimation.EasingFunction>
                    <BounceEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </Window.Resources>
    <Canvas>
        <Button Canvas.Left="10" Canvas.Top="10" Content="Start">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{StaticResource rectAnimation}" />
                </EventTrigger>
            </Button.Triggers>
        </Button>
        <Rectangle
            x:Name="rect"
            Canvas.Left="10"
            Canvas.Top="50"
            Width="50"
            Height="50"
            Fill="Red" />
    </Canvas>

 

위 코드에서는 Easing 을 추가해보았다.

 

Easing 을 추가하면 rect 은 300 지점에 도달하면서 튕기는 듯이 움직이면서 멈춘다.

 

 

그 외 Blend for visual studio 를 이용하면

 

위와 같이 과거 어도비 플래시 마냥 애니메이션을 키프레임 단위 등으로 조작을 할 수 있다.

 

 

그 외 참고할만한 링크

 

https://docs.microsoft.com/ko-kr/dotnet/desktop/wpf/graphics-multimedia/from-to-by-animations-overview?redirectedfrom=MSDN&view=netframeworkdesktop-4.8

From 애니메이션 개요 - WPF .NET Framework