Robs Usability Development : Silverlight, ASP.NET, Ajax, Agile, MVC & Volta

Silverlight 2 shape tween

20 06 2008

One of the things you miss immediately when you start to work with SL2 is the shape tween, it only lets you animate properties.

One of the projects I’m doing really needed something like a shape tween, and after some research, I found a way to reach almost the same result.

It works by animating a line in a path. Normally when you create a path it is created like this:

<Path StrokeThickness="1.000000" Fill="#ffffffff" 
    Stroke="#ff221e1f" StrokeMiterLimit="1.000000"
    Data="F1 M 98.704102,0.049805 L 98.704102,141.497559 L 0.019531,141.497559 C 0.019531,141.497559 70.579102,138.700684 85.875000,128.010254 L 98.704102,0.049805 98.704102,0.049805 98.704102,0.049805 Z"/>
 

This will produce:

Now it is very hard to animate any of the lines and points, because you need a name to animate. But the very exact same Path can also be written like:

<Path StrokeThickness="1" Stroke="#ff666666" 
    StrokeMiterLimit="1.000000" Fill="#ffffffff">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigureCollection>
                    <PathFigure IsClosed="True" StartPoint="98.704102,0.049805">
                        <LineSegment Point="98.704102,141.497559" />
                        <LineSegment Point="0.019531,141.497559" />
                        <BezierSegment x:Name="CurvedLine" Point1="0.019531,141.497559" Point2="70.579102,138.700684" Point3="85.875000,128.010254"/>
                    </PathFigure>
                </PathFigureCollection>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>
 

As you see in the code one of the lines, the BezierSegment, has a name: CurvedLine.

So now when we create a storyboard, we can animate this BezierSegment like this:

<UserControl.Resources>
    <Storyboard x:Name="Animation">
        <PointAnimation Storyboard.TargetName="CurvedLine" BeginTime="00:00:00" Duration="00:00:00.200"  
                       Storyboard.TargetProperty="Point1"
                       To="0,141.497559"/>
        <PointAnimation Storyboard.TargetName="CurvedLine" BeginTime="00:00:00" Duration="00:00:00.200" 
                       Storyboard.TargetProperty="Point2" 
                       To="0,141.497559"/>
        <PointAnimation Storyboard.TargetName="CurvedLine" BeginTime="00:00:00" Duration="00:00:00.200" 
                       Storyboard.TargetProperty="Point3" 
                       To="98.704102,141.497559"/>
    </StoryBoard>
</UserControl.Resources>
 

Which will make it animate like this:

I know, this example is not very exciting, but it does show how it works. You can make some pretty complex and exiting animations with it, if you just animate some more of the line segments.

If anyone does some more complex animation with it, let me know and I’ll put it up here.

Stay in the light!

Robertjan Tuit