[C#/WPF] DoubleAnimationUsingKeyFrames 엘리먼트 : 뉴턴의 요람(Newton's Cradle) 만들기

■ DoubleAnimationUsingKeyFrames 엘리먼트을 사용해 뉴턴의 요람(Newton's Cradle) 애니메이션을 만드는 방법을 보여준다.

TestProject.zip

다운로드

▶ 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="DoubleAnimationUsingKeyFrames 엘리먼트 : 뉴턴의 요람(Newton's Cradle) 만들기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Canvas>
        <Canvas.Resources>
            <Style TargetType="{x:Type Path}">
                <Setter Property="Fill"            Value="Silver" />
                <Setter Property="Stroke"          Value="Black"  />
                <Setter Property="StrokeThickness" Value="3"      />
                <Setter
                    Property="Data"
                    Value="M 0 0 V 300 A 25 25 0 1 1 0 350 A 25 25 0 1 1 0 300" />
            </Style>
        </Canvas.Resources>
        <Path>
            <Path.RenderTransform>
                <TransformGroup>
                    <RotateTransform x:Name="rotateTransform1"
                        Angle="30" />
                    <TranslateTransform X="200" />
                </TransformGroup>
            </Path.RenderTransform>
        </Path>
        <Path>
            <Path.RenderTransform>
                <TransformGroup>
                    <RotateTransform x:Name="rotateTransform2"
                        Angle="30" />
                    <TranslateTransform X="252" />
                </TransformGroup>
            </Path.RenderTransform>
        </Path>
        <Path>
            <Path.RenderTransform>
                <TransformGroup>
                    <RotateTransform x:Name="rotateTransform3"
                        Angle="30" />
                    <TranslateTransform X="304" />
                </TransformGroup>
            </Path.RenderTransform>
        </Path>
        <Path>
            <Path.RenderTransform>
                <TransformGroup>
                    <RotateTransform x:Name="rotateTransform4" />
                    <TranslateTransform X="356" />
                </TransformGroup>
            </Path.RenderTransform>
        </Path>
        <Path>
            <Path.RenderTransform>
                <TransformGroup>
                    <RotateTransform x:Name="rotateTransform5" />
                    <TranslateTransform X="408" />
                </TransformGroup>
            </Path.RenderTransform>
        </Path>
        <Canvas.Triggers>
            <EventTrigger
                RoutedEvent="Page.Loaded">
                <BeginStoryboard>
                    <Storyboard
                        TargetProperty="Angle"
                        RepeatBehavior="Forever">
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rotateTransform1">
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="30"                            />
                            <SplineDoubleKeyFrame   KeyTime="0:0:1" Value="0"  KeySpline="0.25 0 0.6 0.2" />
                            <DiscreteDoubleKeyFrame KeyTime="0:0:3" Value="0"                             />
                            <SplineDoubleKeyFrame   KeyTime="0:0:4" Value="30" KeySpline="0.75 1 0.4 0.8" />
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rotateTransform2">
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="30"                            />
                            <SplineDoubleKeyFrame   KeyTime="0:0:1" Value="0"  KeySpline="0.25 0 0.6 0.2" />
                            <DiscreteDoubleKeyFrame KeyTime="0:0:3" Value="0"                             />
                            <SplineDoubleKeyFrame   KeyTime="0:0:4" Value="30" KeySpline="0.75 1 0.4 0.8" />
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rotateTransform3">
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="30"                             />
                            <SplineDoubleKeyFrame   KeyTime="0:0:1" Value="0"   KeySpline="0.25 0 0.6 0.2" />
                            <SplineDoubleKeyFrame   KeyTime="0:0:2" Value="-30" KeySpline="0.75 1 0.4 0.8" />
                            <SplineDoubleKeyFrame   KeyTime="0:0:3" Value="0"   KeySpline="0.25 0 0.6 0.2" />
                            <SplineDoubleKeyFrame   KeyTime="0:0:4" Value="30"  KeySpline="0.75 1 0.4 0.8" />
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rotateTransform4">
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0"                              />
                            <DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="0"                              />
                            <SplineDoubleKeyFrame   KeyTime="0:0:2" Value="-30" KeySpline="0.75 1 0.4 0.8" />
                            <SplineDoubleKeyFrame   KeyTime="0:0:3" Value="0"   KeySpline="0.25 0 0.6 0.2" />
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rotateTransform5">
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0"                              />
                            <DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="0"                              />
                            <SplineDoubleKeyFrame   KeyTime="0:0:2" Value="-30" KeySpline="0.75 1 0.4 0.8" />
                            <SplineDoubleKeyFrame   KeyTime="0:0:3" Value="0"   KeySpline="0.25 0 0.6 0.2" />
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Canvas.Triggers>
    </Canvas>
</Window>