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

icodebroker MICROSOFT 2024-06-18

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

▶ 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="Orange">
        <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="Paced" Value="100" />
                            <LinearDoubleKeyFrame KeyTime="Paced" Value="200" />
                            <LinearDoubleKeyFrame KeyTime="Paced" Value="300" />
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Rectangle.Triggers>
    </Rectangle>
</Window>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<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="Orange">

<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

.NETFRAMEWORK 2D ANIMATION C# GRAPHICS MICROSOFT WPF