Keyspline Animation of Images in WPF Using the XAML

Introduction

This article describes Keyspline animation of images in WPF using XAML. Keyspline is used to show how the animation property changes between the previous key-frame and next selected key-frame. Formally it shows a transition among its targeted values over its given duration.

In this article we are using two overlapped images. When we click on an image we will get two images that are separated followed by a curve path.

Step 1

First we create a WPF application using the following procedure:

• Open the Visual Studio.
• Select the C# language and "WPF" application.
• Name the project as "Animation".
• Click on the "OK" button.

Step 2

• Go to the "View" -> "Toolbox".
• The toolbox opens in the left corner of the window.
• Then drag and drop a rectangle onto the design view.

• Now go to the MainWindow.xaml and write the following code between the rectangle1 tags:

       <Rectangle

  Name="SplineElement"

  Height="200"

  Width="200" Grid.Row="3"

  HorizontalAlignment="Left"

            >

            <Rectangle.Fill>

                <ImageBrush ImageSource="C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg"/>

            </Rectangle.Fill>

         

            <Rectangle.RenderTransform>

                <TranslateTransform x:Name="SplineTrans" X="0" Y="0" />

            </Rectangle.RenderTransform>

            <Rectangle.Triggers>

                <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">

                    <EventTrigger.Actions>

                        <BeginStoryboard>

                            <Storyboard>

                                <DoubleAnimationUsingKeyFrames

          Storyboard.TargetName="SplineTrans"

          Storyboard.TargetProperty="X"

          Duration="0:0:20">

                                    <SplineDoubleKeyFrame Value="390"

            KeyTime="0:0:7"            

            KeySpline="0.0,1.0, 1.0,0.0" />

                                    <SplineDoubleKeyFrame

            Value="0"

            KeyTime="0:0:8"            

            KeySpline="0.25,0.5, 0.5,0.75" />

                                </DoubleAnimationUsingKeyFrames>

                                <DoubleAnimationUsingKeyFrames

          Storyboard.TargetName="SplineTrans"

          Storyboard.TargetProperty="Y"

          Duration="0:0:20">

                                    <SplineDoubleKeyFrame

            Value="390"

            KeyTime="0:0:7"            

            KeySpline="0.0,1.0, 1.0,0.0" />

                                    <SplineDoubleKeyFrame

            Value="0"

            KeyTime="0:0:8"            

            KeySpline="0.25,0.5, 0.5,0.75" />

                                </DoubleAnimationUsingKeyFrames>

                            </Storyboard>

                        </BeginStoryboard>

                    </EventTrigger.Actions>

                </EventTrigger>

            </Rectangle.Triggers>

        </Rectangle>

 Step 3

• Now again go to the View-> "Toolbox" and Drag and Drop the rectangle on the design view.
• Then again go to the MainWindow.xaml and write the following code between the rectangle2 tags:

  <Rectangle

             Name="SplineElement1"

  Height="200"

  Width="200" Grid.Row="1"

  HorizontalAlignment="Left">

            <Rectangle.Fill>

                <ImageBrush ImageSource="C:\Users\Public\Pictures\Sample Pictures\index.jpg"/>

            </Rectangle.Fill>

            <Rectangle.RenderTransform>

                <TranslateTransform x:Name="SplineTrans1" X="0" Y="0" />

            </Rectangle.RenderTransform>

            <Rectangle.Triggers>

                <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">

                    <EventTrigger.Actions>

                        <BeginStoryboard>

                            <Storyboard>

                                <DoubleAnimationUsingKeyFrames

          Storyboard.TargetName="SplineTrans1"

          Storyboard.TargetProperty="X"

          Duration="0:0:20">

                                    <SplineDoubleKeyFrame Value="390"

            KeyTime="0:0:7"            

            KeySpline="0.0,1.0, 1.0,0.0" />

                                    <SplineDoubleKeyFrame

            Value="0"

            KeyTime="0:0:8"            

            KeySpline="0.25,0.5, 0.5,0.75" />

                                </DoubleAnimationUsingKeyFrames>

                                <DoubleAnimationUsingKeyFrames

          Storyboard.TargetName="SplineTrans"

          Storyboard.TargetProperty="Y"

          Duration="0:0:20">

                                    <SplineDoubleKeyFrame

            Value="390"

            KeyTime="0:0:7"            

            KeySpline="0.0,1.0, 1.0,0.0" />

                                    <SplineDoubleKeyFrame

            Value="0"

            KeyTime="0:0:8"            

            KeySpline="0.25,0.5, 0.5,0.75" />

                                </DoubleAnimationUsingKeyFrames>

                            </Storyboard>

                        </BeginStoryboard>

                    </EventTrigger.Actions>

                </EventTrigger>

            </Rectangle.Triggers>

        </Rectangle>

• Now the final source code of the MainWindow.xaml is:

<Window x:Class="Moving_elements.MainWindow"

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

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

        Title="MainWindow" Height="390" Width="525">

    <Grid Background="#FF807C50">

        <Rectangle

  Name="SplineElement"

  Height="200"

  Width="200" Grid.Row="3"

  HorizontalAlignment="Left"

            >

            <Rectangle.Fill>

                <ImageBrush ImageSource="C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg"/>

            </Rectangle.Fill>

         

            <Rectangle.RenderTransform>

                <TranslateTransform x:Name="SplineTrans" X="0" Y="0" />

            </Rectangle.RenderTransform>

            <Rectangle.Triggers>

                <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">

                    <EventTrigger.Actions>

                        <BeginStoryboard>

                            <Storyboard>

                                <DoubleAnimationUsingKeyFrames

          Storyboard.TargetName="SplineTrans"

          Storyboard.TargetProperty="X"

          Duration="0:0:20">

                                    <SplineDoubleKeyFrame Value="390"

            KeyTime="0:0:7"            

            KeySpline="0.0,1.0, 1.0,0.0" />

                                    <SplineDoubleKeyFrame

            Value="0"

            KeyTime="0:0:8"            

            KeySpline="0.25,0.5, 0.5,0.75" />

                                </DoubleAnimationUsingKeyFrames>

                                <DoubleAnimationUsingKeyFrames

          Storyboard.TargetName="SplineTrans"

          Storyboard.TargetProperty="Y"

          Duration="0:0:20">

                                    <SplineDoubleKeyFrame

            Value="390"

            KeyTime="0:0:7"            

            KeySpline="0.0,1.0, 1.0,0.0" />

                                    <SplineDoubleKeyFrame

            Value="0"

            KeyTime="0:0:8"            

            KeySpline="0.25,0.5, 0.5,0.75" />

                                </DoubleAnimationUsingKeyFrames>

                            </Storyboard>

                        </BeginStoryboard>

                    </EventTrigger.Actions>

                </EventTrigger>

            </Rectangle.Triggers>

        </Rectangle>

        <Rectangle

             Name="SplineElement1"

  Height="200"

  Width="200" Grid.Row="1"

  HorizontalAlignment="Left">

            <Rectangle.Fill>

                <ImageBrush ImageSource="C:\Users\Public\Pictures\Sample Pictures\index.jpg"/>

            </Rectangle.Fill>

            <Rectangle.RenderTransform>

                <TranslateTransform x:Name="SplineTrans1" X="0" Y="0" />

            </Rectangle.RenderTransform>

            <Rectangle.Triggers>

                <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">

                    <EventTrigger.Actions>

                        <BeginStoryboard>

                            <Storyboard>

                                <DoubleAnimationUsingKeyFrames

          Storyboard.TargetName="SplineTrans1"

          Storyboard.TargetProperty="X"

          Duration="0:0:20">

                                    <SplineDoubleKeyFrame Value="390"

            KeyTime="0:0:7"            

            KeySpline="0.0,1.0, 1.0,0.0" />

                                    <SplineDoubleKeyFrame

            Value="0"

            KeyTime="0:0:8"            

            KeySpline="0.25,0.5, 0.5,0.75" />

                                </DoubleAnimationUsingKeyFrames>

                                <DoubleAnimationUsingKeyFrames

          Storyboard.TargetName="SplineTrans"

          Storyboard.TargetProperty="Y"

          Duration="0:0:20">

                                    <SplineDoubleKeyFrame

            Value="390"

            KeyTime="0:0:7"            

            KeySpline="0.0,1.0, 1.0,0.0" />

                                    <SplineDoubleKeyFrame

            Value="0"

            KeyTime="0:0:8"            

            KeySpline="0.25,0.5, 0.5,0.75" />

                                </DoubleAnimationUsingKeyFrames>

                            </Storyboard>

                        </BeginStoryboard>

                    </EventTrigger.Actions>

                </EventTrigger>

            </Rectangle.Triggers>

        </Rectangle>

    </Grid>

</Window>

Output

Now press F5.

Now click on the image:

 

 Images move slowly in a curved path at a certain distance: