Simple Animation in Blend Using Behaviors

Introduction

Microsoft Expression Blend is a very powerful tool for creating animations and designing the best interfaces for your apps. It provides the easiest way to do the hardest work. Today we will learn how to create the simple animation in expression blend using storyboards and behaviors.

The final outcome will be the simple animation of the ball moving in the Zig-Zag direction on the MouseEnter Event and will bounce to the ground when the MouseLeave Event is triggered.

Here is the screenshot:



Implementation Procedure

1. Create a simple WPF Project and give it a suitable name.
   
   
   
   
2. Draw an ellipse of the same height and width, so that it looks like a circle and fill it with the gradient color of your own choice.
   
   
   
   
3. Draw another circle inside the Big Circle and adjust it to the center, change its background to white and now draw another circle of a small size that we call a ball and fill it with the gradient color of your choice.
   
   
   
   
4. Now create a storyboard by clicking the plus sign and name it, in my case it is MoveBall.
   
   
   
   
5. After creating the storyboard, now record the Key Frame by clicking the small plus sign and select the time frame to 1 second and then displace the ball to the other location and play it. Your ball is moving now.
   
   
   
   
6. You can similarly record the entire ball moving animation by displacing it and increasing the time frame respectively.
   
   
7. Create another storyboard named Stop Ball and move the ball to the ground. Then select the frame and use Easing Functions to Bounce the Ball.
   
   
   
   
8. Now you have two storyboards, drag the Behavior named ControlStoryboardAction on the inner circle (the White one) and click on them one by one, selecting the Event as MouseEnter and setting the storyboard MoveBall and on the other behavior select Event as MouseLeave and setting the storyboard StopBall.
   
   

You are now done with all the hassles, build and run the project and enjoy the simple animation. Create your own cool stuff in Expression Blend, It's too simple.