Animation along a path


   
     

<Window x:Class="Animation.PathBasedAnimation"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="PathBasedAnimation" Height="400" Width="550">

    <Window.Resources>
        <PathGeometry x:Key="path">
            <PathFigure IsClosed="True">
                <ArcSegment Point="100,200" Size="15,10" SweepDirection="Clockwise"></ArcSegment>
                <ArcSegment Point="400,50" Size="5,5" ></ArcSegment>
                <ArcSegment Point="40,50" Size="5,5" ></ArcSegment>
            </PathFigure>
        </PathGeometry>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimationUsingPath Storyboard.TargetName="image"
                                      Storyboard.TargetProperty="(Canvas.Left)"
                                     PathGeometry="{StaticResource path}"
                                      Duration="0:0:5" RepeatBehavior="Forever" Source="X" />
                        <DoubleAnimationUsingPath Storyboard.TargetName="image"
                                      Storyboard.TargetProperty="(Canvas.Top)"
                                     PathGeometry="{StaticResource path}"
                                      Duration="0:0:5" RepeatBehavior="Forever" Source="Y" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Window.Triggers>
    <Canvas Margin="10">
        <Path Stroke="Red" StrokeThickness="1" Data="{StaticResource path}" Canvas.Top="10" Canvas.Left="10">
        </Path>
        <Rectangle Name="image" Width="10" Height="20" Stroke="Red">
        </Rectangle>
    </Canvas>
</Window>






     


Bouncing Ball


   
     

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:s="clr-namespace:System;assembly=mscorlib">


    <Ellipse Name="elips" Width="20" Height="20" Fill="Red" Canvas.Left="96">

        <Ellipse.Triggers>
            <EventTrigger RoutedEvent="Ellipse.Loaded">
                <BeginStoryboard>
                    <Storyboard TargetName="elips" 
                                TargetProperty="(Canvas.Top)"
                                RepeatBehavior="Forever">
                        <DoubleAnimationUsingKeyFrames>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="96" />
                            <SplineDoubleKeyFrame KeyTime="0:0:1" Value="480" 
                                                  KeySpline="0.25 0, 0.6 0.2" />
                            <SplineDoubleKeyFrame KeyTime="0:0:2" Value="96"
                                                  KeySpline="0.75 1, 0.4 0.8" />
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Ellipse.Triggers>
    </Ellipse>
</Canvas>






     


Two Animations

     

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

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


    <Ellipse Width="48" Height="48" Fill="Red"

             Canvas.Left="0" Canvas.Top="0">


        <Ellipse.Triggers>

            <EventTrigger RoutedEvent="Ellipse.MouseDown">

                <BeginStoryboard>

                    <Storyboard>


                        <DoubleAnimation 

                            Storyboard.TargetProperty="(Canvas.Left)"

                            From="0" To="288" Duration="0:0:1"

                            AutoReverse="True" />


                        <DoubleAnimation 

                            Storyboard.TargetProperty="(Canvas.Top)"

                            From="0" To="480" Duration="0:0:5"

                            AutoReverse="True" />


                    </Storyboard>

                </BeginStoryboard>

            </EventTrigger>

        </Ellipse.Triggers>

    </Ellipse>

</Canvas>