Mask Animations (Clipping Path Animations) In Silverlight Without a Line of Code

Last night I submitted my MIX 10K Challenge piece, so I’m just killing time while I wait for it to get accepted. Please keep me in mind if you plan on voting.

OK… I’ve been excited about this for some time now. I found out (almost completely by accident) that you can animate a mask (also known as a clipping path) in Silverlight without writing code or even typing (much). This is exciting because I think it’s something that might interest our Flash friends who, late at night and in the privacy of their own homes, take a peek to see if Silverlight is worth looking into. When I worked with Flash, mask animations were my bread and butter and they seemed so hard to do in Silverlight.

But they’re not.

First open up your project in Blend. (I always create my project in Visual Studio and then open it in Blend because visual Studio has so much better project debugging and makes testing a breeze.)

Find the item you want to clip (in my case this is an image) and select the pen tool from the toolbar.

And start drawing.I’m a poor artist, so the star I drew looks pretty bad. If you need to change any of the points, use the direct selection tool (the light arrow, second from the top).

OK… now the fun part. Add a storyboard to your project

and you can animate the clipping mask using all the normal animation tools. Use the direct selection tool above to animate the vertices. You’ll get something like this:

Now… if you’re not interested in the details, just skip ahead a little bit. Something important happened the moment we started animating the path. Normally, path data is kept in a single string format that looks something like this:

Data=”M159.67175,104.26108 L177.91812,28.328932 L195.51648,104.43327 L255.0802,102.6104 L206.86984,151.82758 L225.8029,226.56477 L179.0616,179.17046 L129.73396,229.29906 L147.97842,150.63879 L98.650803,101.53297 z”

This is actually a “powerful and complex mini-language that that you can use to describe geometric paths in XAML.” Microsoft uses it by default to handle path data. But it doesn’t work very well for animating paths, so the second you animate a single vertex in your path, it changes the format you see above to the format you see below:

<Path.Data>
<PathGeometry>
<PathFigure IsClosed=”True” StartPoint=”91.0527648925781,84.0121078491211″>
<LineSegment Point=”118.057907104492,0.549586236476898″/>
<LineSegment Point=”144.103973388672,84.2013778686523″/>
<LineSegment Point=”232.259979248047,82.1977386474609″/>
<LineSegment Point=”160.907287597656,136.2958984375″/>
<LineSegment Point=”188.928756713867,218.444961547852″/>
<LineSegment Point=”119.750289916992,166.350433349609″/>
<LineSegment Point=”46.7439804077148,221.450408935547″/>
<LineSegment Point=”73.7462997436523,134.989212036133″/>
<LineSegment Point=”0.740016639232636,81.0134506225586″/>
</PathFigure>
</PathGeometry>
</Path.Data>

Same data, but only this latter format is appropriate for animation. Remember this, it will come in handy in a second.

OK… now right click on your path and go to “Path –> Make Clipping Path”

You’ll get a dialog pop-up that will ask you which item in the visual tree you would like to clip. I chose my image, but it will work with anything.

And… poof! You have clipping animation.

LIMITATIONS: Here are the limitations to this method:

1. You need to animate before you make your path into a clipping path. – Remember that little bit above about the data string format vs. path geometry? If you don’t animate before hand, Blend will convert all your beautiful line segments into the un-animate-able data string. Animating the path tells Blend to leave your formatting alone.
2. Once you make your path a clipping  path, animation gets a lot harder – Basically, you can change the time by dragging the key frames around and change the easing. Any other alterations require entering values by hand. So do all your animation first before setting the path. The easiest work around to this is to copy and paste your path out of the Control.Clip section and back into your main XAML and tweak animation from there. But your best option is to just take the time to make your clipping animation perfect before you make it a clipping path.