Easing Function In Blend 3 In Silverlight 3

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.



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



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.



Now create a new storyboard and name it Animate.



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.



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



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.



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.



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



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.



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.

Enjoy Animating.