[C#/WPF] DoubleAnimationUsingKeyFrames 엘리먼트 : 스플라인 보간법을 사용해 상자 움직이기

■ DoubleAnimationUsingKeyFrames 엘리먼트에서 스플라인 보간법을 사용해 상자를 움직이는 애니메이션을 만드는 방법을 보여준다.

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Border
        Width="400"
        Height="400"
        Background="LightGray">
        <Rectangle
            HorizontalAlignment="Left"
            Width="50"
            Height="50"
            Fill="Blue">
            <Rectangle.RenderTransform>
                <TranslateTransform x:Name="translateTransform"
                    X="0"
                    Y="0" />
            </Rectangle.RenderTransform>
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Rectangle.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames
                                Storyboard.TargetName="translateTransform"
                                Storyboard.TargetProperty="X"
                                Duration="00:00:15"
                                RepeatBehavior="Forever">
                                <SplineDoubleKeyFrame KeyTime="00:00:07" KeySpline="0.0 1.0 1.0 0.0" Value="500" />
                                <SplineDoubleKeyFrame KeyTime="00:00:10" KeySpline="0.0 0.0 1.0 0.0" Value="200" />
                                <SplineDoubleKeyFrame KeyTime="00:00:15" KeySpline="0.25 0.5 0.75 1" Value="350" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Rectangle.Triggers>
        </Rectangle>
    </Border>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Border

Width="400"

Height="400"

Background="LightGray">

<Rectangle

HorizontalAlignment="Left"

Width="50"

Height="50"

Fill="Blue">

<Rectangle.RenderTransform>

<TranslateTransform x:Name="translateTransform"

X="0"

Y="0" />

</Rectangle.RenderTransform>

<Rectangle.Triggers>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="translateTransform"

Storyboard.TargetProperty="X"

Duration="00:00:15"

RepeatBehavior="Forever">

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Rectangle.Triggers>

</Rectangle>

</Border>

</Window>

TestProject.zip

.NETFRAMEWORK 2D ANIMATION C# GRAPHICS MICROSOFT WPF

icodebroker

[C#/WPF] DoubleAnimationUsingKeyFrames 엘리먼트 : 스플라인 보간법을 사용해 상자 움직이기