.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
Kaviya Balasubramanian
satyapriyanayak
SP
abhays
Sasi Prabhu

Home >> Articles >> Silverlight >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Animating with Easing Function In Silverlight using Blend 3

Posted By:Diptimaya Patra       Posted Date: April 20, 2010    Points: 25    Category: Silverlight    URL: http://dpatra.blogspot.com  

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 Silverlight using Blend 3. We will see how to use it.
 

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.

Image1.gif

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

image2.gif

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.

image3.gif

Now create a new storyboard and name it Animate.

image4.gif

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 image5.gifsymbol to record a key frame.

image6.gif

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

image7.gif

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.

image8.gif

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.

image9.gif

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

image10.gif

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.

image11.gif

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

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

Run your application and click the button, you will find it amazing.

Try your best imagination for using Easing Functions. You can also download the sample project used the above example

Enjoy Animating.
 
 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend