[C#/WPF] LinearDoubleKeyFrame 엘리먼트 : KeyTime 속성에서 시간 비율을 사용해 키 프레임 애니메이션 타이밍 제어하기

■ LinearDoubleKeyFrame 엘리먼트의 KeyTime 속성에서 시간 비율을 사용해 키 프레임 애니메이션의 타이밍을 제어하는 방법을 보여준다.

▶ 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">
    <Rectangle
        Width="50"
        Height="50"
        Stroke="Black"
        StrokeThickness="5"
        Fill="Purple">
        <Rectangle.RenderTransform>
            <TranslateTransform x:Name="translateTransform" />
        </Rectangle.RenderTransform>
        <Rectangle.Triggers>
            <EventTrigger RoutedEvent="Rectangle.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames
                            Storyboard.TargetName="translateTransform"
                            Storyboard.TargetProperty="X"
                            Duration="00:00:10">
                            <LinearDoubleKeyFrame KeyTime="30%"  Value="100" />
                            <LinearDoubleKeyFrame KeyTime="40%"  Value="300" />
                            <LinearDoubleKeyFrame KeyTime="100%" Value="500" />
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Rectangle.Triggers>
    </Rectangle>
</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">

<Rectangle

Width="50"

Height="50"

Stroke="Black"

StrokeThickness="5"

Fill="Purple">

<Rectangle.RenderTransform>

</Rectangle.RenderTransform>

<Rectangle.Triggers>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="translateTransform"

Storyboard.TargetProperty="X"

Duration="00:00:10">

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Rectangle.Triggers>

</Rectangle>

</Window>

TestProject.zip