Animating with Easing Function In Blend 3

No.of Views527
Bookmarked0 times
Downloads 
Votes0
By  dpatra   On  16 Feb 2010 00:02:01
Tag : Silver Light and XAML , How to
Animating with Easing Function In Blend 3
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 Introduction
In this article I will describe you how you can enhance your animation effects, you can say more rich. A set of Easing Functions those are pre defined in Blend 3. We will see how to use it.

Creating a Simple Silverlight Application
Open up Blend 3 and Create a new Silverlight Application.

Image Loading...



Give the application a name, in our sample I have given AnimationEasingFunction.
Add a Button and name the Content as Animate.

Image loading...

Add any control you want to animate, In this case I have used a Rectangle Control to animate, give the background so that you can see how it changes.

Image Loading..



Now create a new storyboard and name it Animate.

Image Loading...

As soon as you click ok the recording for the storyboard will start. Select the target control you want to animate. In our case it is the Rectangle. Add the symbol to record a key frame.

Image Loading....

Now click on 1(i.e. Changes after 1 second), to record your target animation.

Image Loading....

I have changed the Rotate Render Transform to 180 degrees and transformed from it’s last location to its new location.
You can see the added record key frame in object and timeline pane as below.

Image Loading...

Now we will talk about the Easing Functions and how to use it.Select the key frame and you will see Easing tab in your Properties pane.

Image Loading...

By default the Easing Function is None. You can see a varieties of Easing Function when you choose the drop down menu.

Image Loading.....

You can choose your best as your imagination.
In our sample I will choose the Elastic as you can see above.
Now after choosing animation you can modify your Easing Function from their properties as follows.

Image Loading...

Now stop recording the storyboard and in the click event of the Button begin the storyboard.


{codecitation class="brush: csharp; gutter: true;" width="650px"}

private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
{
Animate.Begin();
}

{/codecitation}

Run your application and click the button, you will find it amazing.
Try your best imagination for using Easing Functions.
Enjoy Animating.


About the Author


Diptimaya Patra

Description :I am a Master in Computer Application (MCA) from SRM University, Chennai. I am MCTS in ASP.Net Web Development, and MOSS 2007 Administration. I have extreme exposure to Microsoft Technologies in recent times like Silverlight 2, Silverlight 3. I am from Cuttack, Orissa. You can reach me using this mail (diptimaya.patra@gmail.com). Currently I am working as a Software Engineer in UST Global Inc in Trivandrum Center.

Occupation :Software Engineer
Company : UST Global.
Location : India
Follow me at twitter : http://twitter.com/dpatra


 
Sign Up to vote for this article
 
About Author
 
dpatra
Occupation-Not Provided
Company-Not Provided
Member Type-Expert
Location-Not Provided
Joined date-13 Jul 2009
Home Page-Not Provided
Blog Page-Not Provided
 
 
Other popularSectionarticles
Comments
There is no comments for this articles.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top