Create Simple Animation Using Expression Blend

Nowadays, animations are an important part of applications. Sometimes it is quite difficult to add some animations in your project but with "Expression Blend" you can add animations in your  project with less efforts and coding.

Before getting started you need to download some behaviors. For this go to the top left corner of your window, select Behaviors from Assets and install the “Behaviors  NuGet Package”. You can also see this in the following image:



Once it is installed you will have a list like this.



You need to install this NuGet package every time you create new project if you want to add animations in it.

If you have successfully installed behaviors drag the ControlStoryboardAction option from the behavior’s list and drop on the screen.



Now let’s add some animations in our project

For this I will create a simple bouncing ball using blend to explain the process of adding animations in blend.

Firstly, create a blank project in blend or you can also open an existing project in blend.

Then select eclipse from the assets and draw on the screen,



This is our ball.

As we want this ball to bounce we will add animations on this ball (ellipse). For this go to objects and timeline. At the top right corner there is a plus sign:



Click on it and name your animation like I named it BouncingBall.



As you name your animation the objects and timeline will be divided into two panes. From the left pane choose the object on which you want to add animations. We will choose ellipse from it.



Next step is recording a key frame, which means you are going to recode one action of your video. Our first action will be that the ball will fall on the surface first and then bounce. So first we will make the ball to fall on the surface.

For recording the first action click on the plus icon (NOT the one you clicked to name your animation) at the top left of the second pane of "Objects and Timeline".



The next step is selecting the time in which you want your object to complete this action by moving the slider that is on 0. And recode a keyframe there as shown below.

• recordit.co/lDJHlPGdpG

I moved it to one as I want my first action to complete in 1 sec.

After selecting the time, move the eclipse in the direction you want to move it like I will move the ellipse downward.

 

After falling on the surface the ball should bounce back. For such animations which are little bit difficult to perform by us, blend introduces some easing functions. You will get these easing functions in the properties of the keyframe.

In order to bounce the ball, select bounce out from the easing functions. Here's the video showing the same:



Let’s have a look at our bouncing ball.



So we have created an animated ball. You can add your animation at any event, e.g.,  button click, page load, etc and just write this line in the event handler:

Animationname.begin();

Read more articles on Expression Blend:

• Designing Toggle Button Using Blend
• Unleashing Grids in Expression Blend