Home » Graphics Design » Expression Blend 4 » Story Details
Printable Version

Image Rotation using StoryBoard Animation

by Nipun Tomar on Jan 13, 2012

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.
Comments: 0    Views: 322

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.

1.gif
 

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". 

2.gif
 

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

3.gif

You will get window loaded event:

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

5.gif

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

6.gif
 

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:

7.gif  8.gif

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 :

9.gif

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>


10.gif
 
          
MouseDown Window

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>


11.gif

MouseUp Window

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:

12.gif
Post a Comment
*
 
 
 
 
 
 
 
 
 
 
 
View All »
DevExpress PowerBuilder Web Development Windows Development Languages Software Engineering Databases
iPhone Architecture Secutiry UML & Modeling Operating Systems Networking Testing
Graphics Design Project Management Hardware Open Source Games Development Business Intelligence Visual Studio LightSwitch 2011
MonoDevelop Visual Studio 2010 ASP.NET HTML, DHTML XML PHP JavaScript
Silverlight Web Services WCF Windows Forms WPF Windows Services Dynamic Link Libraries
ActiveX COM, DCOM, ATL C# VB.NET C++ F# Java
Pascal SQL Server Oracle DB2 MS-Access Windows Servers Windows
Linux Unix SAP LINQ .NET Framework ADO.NET Reporting
Crystal Reports SQL Server Reporting Services Igenda Reports Active Reports Adobe Fireworks Arrays & Collections Hosting
Future Trends Android Windows Phone Smart Devices Business M&A Investment & Funding
Web Browsers Internet Explorer Firefox Safari Common Entrepreneurs Students
Consulting Wiki Gadgets MobileMe iCloud iOS Social Media
Facebook Twitter LinkedIn Google+ Microsoft Kinect XBox
Wii Playstation DirectX i OS OS X CIO, CTO, CEO Windows 8
Web Design Expression Blend 4 Photoshop CS5 Creative Suite 5.5 Expression Web 4 Expression Studio 4 Creative Suite® 5.5 Design
Creative Suite 5.5 Web Creative Suite 5.5 Production Startups Funding M&A Laptops Smart Phones
Desktops Cameras & Camcorders Netbooks Tablets Virtualization Microsoft Surface WordPress
Software Products Cloud Computing Current Affairs Technology TV TV
Earnings XAML E-Commerce MonoTouch Mono for Android Deals Electronics
Mobile Phone Laptop Tablet Book Computer Press Releases Reviews
Products Books Companies Windows Azure SQL Azure Interviews Mac
Web Browsers Symbian Windows Forms WPF Windows Services HTML 5 Office 365
SharePoint 2010 Exchange Server Adobe Visual Studio 2012 iPad Flex / Flash Games
Windows 9
Sitemap|User Agreement|Privacy Policy |Contact Us| © 2011 Mindcracker Corporation
X
 Login
Please login to submit a new post, reply and edit exiting posts, see user profiles, and access more features. If you are not a registered member, Register here.
User Id / Email:
Password:  
Forgot Password | Forgot UserName