Reader Level:
ARTICLE

Easing Function In Blend 3 In Silverlight 3

Posted by Diptimaya Patra Articles | XAML July 13, 2009
Using Easing Function to Animate in Blend 3
  • 0
  • 0
  • 9981
Download Files:
 

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.

Enjoy Animating.

COMMENT USING

Trending up