Ugrás a tartalomhoz

.NET Programming Technologies

Gergely Kovásznai, Csaba Biró

Eszterházy Károly College

Path-based animation

Path-based animation

The values of target properties can be described by curves with the help of Path-based animations. It is worth to place PathGeometry between the resources.

Example XI.9 Path-based animation

XI.7. Path-based animation

<Window.Resources>

                <PathGeometry  x:Key="path1">

                    <PathGeometry.Figures>

                        <PathFigureCollection>

                            <PathFigure StartPoint="10,280">

                                <PathFigure.Segments>

                                    <PathSegmentCollection>

                                        <QuadraticBezierSegment Point1="120,380" Point2="80,100" />

                                        <QuadraticBezierSegment Point1="170,190" Point2="240,100" />

                                        <QuadraticBezierSegment Point1="200,380" Point2="320,280" />

                                    </PathSegmentCollection>

                                </PathFigure.Segments>

                            </PathFigure>

                        </PathFigureCollection>

                    </PathGeometry.Figures>

                </PathGeometry>

        <PathGeometry  x:Key="path2">

            <PathGeometry.Figures>

                <PathFigureCollection>

                    <PathFigure StartPoint="20,290">

                        <PathFigure.Segments>

                            <PathSegmentCollection>

                                <QuadraticBezierSegment Point1="130,390" Point2="90,100" />

                                <QuadraticBezierSegment Point1="180,200" Point2="250,100" />

                                <QuadraticBezierSegment Point1="210,390" Point2="330,290" />

                            </PathSegmentCollection>

                        </PathFigure.Segments>

                    </PathFigure>

                </PathFigureCollection>

            </PathGeometry.Figures>

        </PathGeometry>

    </Window.Resources>

    <Window.Triggers>

        <EventTrigger RoutedEvent="Window.Loaded">

            <BeginStoryboard>

                <Storyboard Storyboard.TargetName="feny">

                    <DoubleAnimationUsingPath Duration="0:0:10"

                                                   Storyboard.TargetProperty="(Canvas.Left)"

               Source="X"

                                    PathGeometry="{StaticResource ResourceKey=path1}"/>

                    <DoubleAnimationUsingPath Duration="0:0:10"

                                                      Storyboard.TargetProperty="(Canvas.Top)"

                                                      Source="Y"

                                                      PathGeometry="{StaticResource ResourceKey=path1}"/>

                </Storyboard>

            </BeginStoryboard>

        </EventTrigger>

    </Window.Triggers>

    <Canvas>

        <Path Stroke="Black" StrokeThickness="10" Data="{StaticResource ResourceKey=path2}" />

        <Ellipse x:Name="feny" Width="20" Height="20">

            <Ellipse.Fill>

                <RadialGradientBrush>

                    <GradientStop Offset="0.1" Color="Orange"/>

                    <GradientStop Offset="0.5" Color="Yellow"/>

                    <GradientStop Offset="1" Color="White"/>

                </RadialGradientBrush>

            </Ellipse.Fill>

        </Ellipse>

    </Canvas>