Silverlight Tip – Reverse your animation

Let’s say you are trying to animate a “zoom-in” e.g. zoom to a part of an image.  Once the user is done zooming in, he will probably want to zoom back out, you want to animate the zoom-out but in reverse.  It turns out to be very easy to do with Expression Blend.

Step 1

Add an image to your page and resize it to a thumbnail size on the top left corner.

image

Step 2

Create a new story board called “GrowPic” that will resize the picture to fill the canvas in 0.5 seconds.  Here is a breakdown of the steps

  1. Add a story board

    image

  2. Give it a name

    image

  3. Click the 0.5 second marker in the timeline (a vertical yellow line will show up)

    image

  4. Resize the image by dragging the bottom right hand corner.
  5. Hit the play button and you will see your picture grow in 0.5 seconds

Step 3

Create the reverse storyboard like this:

  1. Click the drop-down next to the Storyboard name and select Duplicate
    image
  2. This creates a new storyboard named “GrowPic_Copy1
  3. So click the drop-down again and click Rename and type “ShrinkPic”
  4. To reverse it, click the drop-down again and click Reverse

Make sure you don’t reverse it twice or you will end up with the original.

Step 4

Write some code to handle the click event when the image is small and start the GrowPic storyboard and another to handle when the image is large and start the ShrinkPic storyboard.

Live Demo

See it at http://sandbox.emadibrahim.com/silverlight/reverseanimation

Advertisements

0 thoughts on “Silverlight Tip – Reverse your animation

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s