Image Rotation using StoryBoard Animation

It is very easy to create a rotating Image by using the storyboard- In this article I'm going to create an Image which Rotates in any direction with the help of storyboard and changing its size by the use of triggers in Expression Blend 4.

1. Let's start our application by opening a new Project in Expression Blend with project type wpf and C# as language. The name of my Application is "RotateImage". Set the window Height="600" and width= "700".

2. Now change the layoutroot background as "Black" and set its height, width same as window.

3. Copy an Image from your existing folder and paste it on your Artboard with height="50", width="50". Place it on top center outside the window by setting the margin as "325,-95.332, 325, 0".

4. To start the storyboard – From the Triggers window click on the +Event:

You will get window loaded event:

5. Click on the + button to add the new action then a popup appeared click "Ok"

6. Your window will now be like this showing the recording pane in the object and timeline:

7. Select Image and start the recording by clicking on the Record Keyframe.

8. Set the recording to 3 seconds and drag the image to the top of the window and rotate it as follows:

Note:- You can make your own Recording

9. Similarly set the recordings in seconds or minutes in a way you want to rotate or resize the image. Some screen shots of my running window are as under :

Note: Use Drag and Rotate

The xaml code for the StoryBoard Animation is as follows:

<Window.Resources>

<Storyboard x:Key="OnLoaded1">

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="Image1">

<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="15.333"/>

<EasingDoubleKeyFrame KeyTime="0:0:3" Value="-311.334"/>

<EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="-291.334"/>

<EasingDoubleKeyFrame KeyTime="0:0:4" Value="-291.334"/>

<EasingDoubleKeyFrame KeyTime="0:0:6.5" Value="277.999"/>

<EasingDoubleKeyFrame KeyTime="0:0:7" Value="257.332"/>

<EasingDoubleKeyFrame KeyTime="0:0:7.5" Value="257.332"/>

<EasingDoubleKeyFrame KeyTime="0:0:10" Value="-32.668"/>

<EasingDoubleKeyFrame KeyTime="0:0:10.5" Value="-34.668"/>

<EasingDoubleKeyFrame KeyTime="0:0:11" Value="-34.668"/>

<EasingDoubleKeyFrame KeyTime="0:0:13.5" Value="-19.335"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="Image1">

<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="131.333"/>

<EasingDoubleKeyFrame KeyTime="0:0:3" Value="294"/>

<EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="291.333"/>

<EasingDoubleKeyFrame KeyTime="0:0:4" Value="291.333"/>

<EasingDoubleKeyFrame KeyTime="0:0:6.5" Value="315.333"/>

<EasingDoubleKeyFrame KeyTime="0:0:7" Value="317.333"/>

<EasingDoubleKeyFrame KeyTime="0:0:7.5" Value="317.333"/>

<EasingDoubleKeyFrame KeyTime="0:0:10" Value="552.666"/>

<EasingDoubleKeyFrame KeyTime="0:0:10.5" Value="527.333"/>

<EasingDoubleKeyFrame KeyTime="0:0:11" Value="527.333"/>

<EasingDoubleKeyFrame KeyTime="0:0:13.5" Value="291.333"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="Image1">

<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>

<EasingDoubleKeyFrame KeyTime="0:0:3" Value="1052.882"/>

<EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="1052.882"/>

<EasingDoubleKeyFrame KeyTime="0:0:4" Value="1052.882"/>

<EasingDoubleKeyFrame KeyTime="0:0:6.5" Value="2915.115"/>

<EasingDoubleKeyFrame KeyTime="0:0:7" Value="2915.115"/>

<EasingDoubleKeyFrame KeyTime="0:0:7.5" Value="2915.115"/>

<EasingDoubleKeyFrame KeyTime="0:0:10" Value="4298.665"/>

<EasingDoubleKeyFrame KeyTime="0:0:10.5" Value="4298.665"/>

<EasingDoubleKeyFrame KeyTime="0:0:11" Value="4298.665"/>

<EasingDoubleKeyFrame KeyTime="0:0:13.5" Value="5744.264"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Image1">

<EasingDoubleKeyFrame KeyTime="0:0:3" Value="1"/>

<EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="1.762"/>

<EasingDoubleKeyFrame KeyTime="0:0:4" Value="1.762"/>

<EasingDoubleKeyFrame KeyTime="0:0:6.5" Value="1.762"/>

<EasingDoubleKeyFrame KeyTime="0:0:7" Value="2.454"/>

<EasingDoubleKeyFrame KeyTime="0:0:7.5" Value="2.454"/>

<EasingDoubleKeyFrame KeyTime="0:0:10" Value="2.454"/>

<EasingDoubleKeyFrame KeyTime="0:0:10.5" Value="3.23"/>

<EasingDoubleKeyFrame KeyTime="0:0:11" Value="3.23"/>

<EasingDoubleKeyFrame KeyTime="0:0:13.5" Value="3.23"/>

<EasingDoubleKeyFrame KeyTime="0:0:14" Value="4.585"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Image1">

<EasingDoubleKeyFrame KeyTime="0:0:3" Value="1"/>

<EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="1.762"/>

<EasingDoubleKeyFrame KeyTime="0:0:4" Value="1.762"/>

<EasingDoubleKeyFrame KeyTime="0:0:6.5" Value="1.762"/>

<EasingDoubleKeyFrame KeyTime="0:0:7" Value="2.454"/>

<EasingDoubleKeyFrame KeyTime="0:0:7.5" Value="2.454"/>

<EasingDoubleKeyFrame KeyTime="0:0:10" Value="2.454"/>

<EasingDoubleKeyFrame KeyTime="0:0:10.5" Value="3.23"/>

<EasingDoubleKeyFrame KeyTime="0:0:11" Value="3.23"/>

<EasingDoubleKeyFrame KeyTime="0:0:13.5" Value="3.23"/>

<EasingDoubleKeyFrame KeyTime="0:0:14" Value="4.585"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</Window.Resources>

<Window.Triggers>

<EventTrigger RoutedEvent="FrameworkElement.Loaded">

<BeginStoryboard x:Name="OnLoaded1_BeginStoryboard" Storyboard="{StaticResource OnLoaded1}"/>

</EventTrigger>

At last we add 2 more Event triggers one for MouseDown( when we click on image it will enlarge in size) and the other one is MouseUp( to set our image to the previous position):

StoryBoard Animation for MouseDown Event is:

<Storyboard x:Key="OnMouseDown1">

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Image1">

<EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="7"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Image1">

<EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="7"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

StoryBoard Animation for MouseUp Event is:

<Storyboard x:Key="OnMouseUp1">

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="Image1">

<EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="4.5"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Image1">

<EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="4.5"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

10. We can apply the storyboard animation for different images also and can apply the animation to change the layout background, Border etc etc .

Here is a sample application for 3 different images with changing layout background, MouseDown and MouseUp Events:

I am attaching the zip file for this application hoping that it is useful for you.

My running window looks like as follows: