[C#/WPF] MatrixAnimationUsingPath 엘리먼트 : IsOffsetCumulative 속성을 사용해 경로를 따라 객체에 애니메이션 효과 주기 (오프셋 누적)

■ MatrixAnimationUsingPath 엘리먼트의 IsOffsetCumulative 속성을 사용해 경로를 따라 객체에 애니메이션 효과을 주는 방법을 보여준다. (오프셋 누적)

▶ 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"
    xmlns:options="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Canvas
        Width="400"
        Height="400"
        Background="LightGray">
        <Button
            Width="100"
            Height="30"
            Content="테스트">
            <Button.RenderTransform>
                <MatrixTransform x:Name="matrixTransform">
                    <MatrixTransform.Matrix>
                        <Matrix />
                    </MatrixTransform.Matrix>
                </MatrixTransform>
            </Button.RenderTransform>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <MatrixAnimationUsingPath
                                Storyboard.TargetName="matrixTransform"
                                Storyboard.TargetProperty="Matrix"
                                IsOffsetCumulative="True"
                                Duration="00:00:05"
                                RepeatBehavior="2x">
                                <MatrixAnimationUsingPath.PathGeometry>
                                    <PathGeometry
                                        Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"
                                        options:Freeze="True" />
                                </MatrixAnimationUsingPath.PathGeometry>
                            </MatrixAnimationUsingPath>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Canvas>
</Window>

<Window x:Class="TestProject.MainWindow"

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

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

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

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Canvas

Width="400"

Height="400"

Background="LightGray">

<Button

Width="100"

Height="30"

Content="테스트">

<Button.RenderTransform>

<MatrixTransform.Matrix>

</MatrixTransform.Matrix>

</MatrixTransform>

</Button.RenderTransform>

<Button.Triggers>

<MatrixAnimationUsingPath

Storyboard.TargetName="matrixTransform"

Storyboard.TargetProperty="Matrix"

IsOffsetCumulative="True"

Duration="00:00:05"

RepeatBehavior="2x">

<MatrixAnimationUsingPath.PathGeometry>

<PathGeometry

Figures="M 10 100 C 35 0 135 0 160 100 180 190 285 200 310 100"

options:Freeze="True" />

</MatrixAnimationUsingPath.PathGeometry>

</MatrixAnimationUsingPath>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Button.Triggers>

</Button>

</Canvas>

</Window>

※ IsOffsetCumulative 속성으로 인해 오프셋 값이 반복적으로 누적되지만 회전 값은 누적되지 않는다.
※ 회전 값이 누적되도록 하려면 애니메이션의 DoesRotateWithTangent 및 IsAngleCumulative 속성을 true로 설정한다.

TestProject.zip