Understanding Animation

From childhood we all are fascinated by one thing- movement of static objects or Animation. I feel the best part in Silverlight is its ability to animate things and fascinate its users. Animation always doesn't mean make a man run or breaking a table. Simple page transitions in a site or changes in the button when you hover over it , also comes under animation. So lets see how beautiful this animation can be. First we will animate a simple ball (an ellipse in technical terms!) using blend and then in the next part we will do the same animation from the code behind. So lets begin with it.

First rule in animation which I follow is to picturize it in your mind. So here is the picturization:
Lets think of a ball moving and falling in to a basket.

Here is the application in action

1. For the representation of the ball we would need something that looks like a ball. The closest would be an ellipse.



2. Now, think of the movement of the ball. The ball should bounce and roll over.So we would have to create a ground for it and keep this in mind. for the ground we can think of rectangle with a skew.



3. Next, we would have to think about the basket where we would be putting the ball. That can be again 2 ellipses with a skew(i mean a twisted ellipse). To give it an actual basket's feel we will take three such ellipses.

We would add few paths to make it look like a net.We have completed our picturization and now that it really looks like a basket ball court, let's begin with the animation!

We can create storyboard and give timelines to it, so as to achive the movement of the ball.Here I have given the ball only two types of transformation i.e rotate transform and translate transform.

Rotate transfrom would give the ball its rolling over kind of effect, whereas, translate transform(TranslateTransform.Y, TranslateTransform.X) would give it the up and down motion or translation in x and y directions.To adjust the timeline, you just have the drag the white point! It is so easy!! Let us see the final animation!

Here is the complete source code for it.

In the next post you will see this animation done entirely in code.So keep watching this space!