■ MatrixAnimationUsingPath 엘리먼트 사용하기

----------------------------------------------------------------------------------------------------

 

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

    Title="MatrixAnimationUsingPath 엘리먼트 사용하기">

    <Canvas>

        <Canvas.Resources>

            <PathGeometry x:Key="PathGeometryKey"

                Figures="M 200 200 C 300 0, 500 400, 700 200 C 900 0, 1000 200, 900 300

                         C 100 1100, 1200 800, 400 500 C 100  400,  100 400, 200 200" />

            <Style TargetType="{x:Type Path}">

                <Setter Property="Stroke" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" />

            </Style>

        </Canvas.Resources>

        <Path Data="{StaticResource PathGeometryKey}" />

        <!-- 외발 자전거맨 -->

        <Path>

            <Path.Data>

                <GeometryGroup>

                    <!-- 바퀴 -->

                    <EllipseGeometry

                        Center="0 -25"

                        RadiusX="25"

                        RadiusY="25" />

                    <!-- 바퀴살 -->

                    <GeometryGroup>

                        <LineGeometry StartPoint="0 0" EndPoint="0 -50" />

                        <LineGeometry StartPoint="-25 -25" EndPoint="25 -25" />

                        <LineGeometry StartPoint="-18 -7" EndPoint="18 -43" />

                        <LineGeometry StartPoint="18 -7"   EndPoint="-18 -43" />

                        <GeometryGroup.Transform>

                            <RotateTransform x:Name="spokesRotateTransform"

                                CenterX="0"

                                CenterY="-25" />

                        </GeometryGroup.Transform>

                    </GeometryGroup>

                    <!-- 몸통 -->

                    <LineGeometry StartPoint="0 -25" EndPoint="0 -80" />

                    <!-- 머리 -->

                    <EllipseGeometry

                        Center="0 -90"

                        RadiusX="10"

                        RadiusY="10" />

                    <LineGeometry StartPoint="9 -85" EndPoint="0 -90" />

                    <!-- 팔 -->

                    <LineGeometry StartPoint="-35 -70" EndPoint="35 -70">

                        <LineGeometry.Transform>

                            <RotateTransform x:Name="armsRotateTransform"

                                CenterX="0"

                                CenterY="-70" />

                        </LineGeometry.Transform>

                    </LineGeometry>

                </GeometryGroup>

            </Path.Data>

            <Path.RenderTransform>

                <MatrixTransform x:Name="unicycleManMatrixTransform" />

            </Path.RenderTransform>

        </Path>

        <Canvas.Triggers>

            <EventTrigger RoutedEvent="Canvas.Loaded">

                <BeginStoryboard>

                    <Storyboard SpeedRatio="0.5">

                        <!-- 외발 자전가맨을 패스에 따라 움직인다. -->

                        <MatrixAnimationUsingPath

                            Storyboard.TargetName="unicycleManMatrixTransform"

                            Storyboard.TargetProperty="Matrix"

                            RepeatBehavior="Forever"

                            Duration="0:0:12"

                            DoesRotateWithTangent="True"

                            PathGeometry="{StaticResource PathGeometryKey}" />

                        <!-- 바퀴살을 회전시킨다. -->

                        <DoubleAnimation

                            Storyboard.TargetName="spokesRotateTransform"

                            Storyboard.TargetProperty="Angle"

                            RepeatBehavior="Forever"

                            Duration="0:0:1"

                            From="0"

                            To="360" />

                        <!-- 팔을 흔든다. -->

                        <DoubleAnimation

                            Storyboard.TargetName="armsRotateTransform"

                            Storyboard.TargetProperty="Angle"

                            RepeatBehavior="Forever"

                            AutoReverse="True"

                            Duration="0:0:0.2"

                            From="-20"

                            To="20" />

                    </Storyboard>

                </BeginStoryboard>

            </EventTrigger>

        </Canvas.Triggers>

    </Canvas>

</Window>

----------------------------------------------------------------------------------------------------

Posted by 사용자 icodebroker

댓글을 달아 주세요