By far the best part with Expression Blend for me is how laughingly easy it is to create animations in a quick and easy way. I’m going to demonstrate how we create a simple two object animation which I can use in Silverlight.
As you might’ve noticed. I’m a very graphical man. This demo will be littered with screenshots, which I find to be a good thing. If it’s not your cup of tea, I apologize.
Let’s start by creating a new Blend project. I call mine AnimationDemo.
Next, We create the most basic shape, a rectangle. I style it with a gradient brush and give it a border.
I then create a copy of the rectangle so we have two objects.
To start building our animation, highlight the element which you intend to animate. This could be a specific element or a container such as a grid or canvas when animating multiple objects.
Next click the ‘+’ sign in the top right corner and name the animation.
You should now see this message above your design area:
While this light is on, each change you do is recorded for the animation. Make sure that its off if you plan on doing changes to objects that you don’t want to include in your animation.
The first thing I do in my animation is highlight the two objects I plan to change in my animation. I then click the oval “fingerprint” icon to the left of the time indicator to create a timeprint. This locks my objects’ properties at the start of my animation.
I now drag the yellow timeline to the two second mark and start tweaking my objects. I offset the blue rectangle a bit. This automatically creates another timeprint.
You repeat this step until you’re satisfied with your timeline. I do one more tweak to my first rectangle before I’m satisfied. To see how it turned out (in spectacular low-def) click the video below.