Sunday, October 28, 2007

Easy Silverlight 1.0 Animations: Wipe

Another effect facilitated by the rich animation features of Silverlight. In this post we will explore the addition of PowerPoint like wipe effect. I have added this effect to my animation library so you can do this animation using a single line of code. You can download the complete source from here. Below is a working sample.

Recipe:

To create your own wipe animation, download the source code and include Animator.jas and

XamlObjectFactory.js in your project and reference them in your Silverlight host page. To wipe an object from top use the following line:

SilverlightRecipes.Animator.wipeDown('WipeDown', sender.findName('ToWipe'), '00:00:01');

The first argument is a unique ID for your animation, This has to be unique across the whole XAML structure, otherwise the runtime will complain. The second argument is the object to wipe, it can be an UIElement like Canvas, Image, or MediaElement. The last argument is the duration of the animation. The duration format is the same as the format of the Duration property of Silverlight Animation object. In the example I am using hours:minutes:seconds[.fractionalSeconds] format.

To wipe an object from bottom, use the following line:

SilverlightRecipes.Animator.wipeUp('WipeUp', sender.findName('ToWipe'), '00:0:01');

To wipe an object from left, use the following line:

SilverlightRecipes.Animator.wipeRight('WipeRight', sender.findName('ToWipe'), '00:00:01');

To wipe an object from right, use the following line:

SilverlightRecipes.Animator.wipeLeft('WipeLeft', sender.findName('ToWipe'), '00:01:01');

To create this animation, I created a clip rectangle that grows according to a timeline. The clip property of a Silverlight object. Normally the clip can be set to RectangleGeometry to achieve a rectangular clip, but unfortunately there is no RectAnimation in Silverlight. So as a work around I used a PathGemoetry to draw a clipping rectangle then animates the path segments using PointAnimation. Example clip for top down wipe:

<Rectangle x:Name="ToWipe" Width="400" Height="270" Fill="Black" Visibility="Collapsed" >

<Rectangle.Clip>

<PathGeometry>

<PathGeometry.Figures>

<PathFigure IsClosed="True" StartPoint="0,0" >

<PathFigure.Segments>

<LineSegment Point="400,0" />

<LineSegment Point="400,0" />

<LineSegment Point="0,0" />

</PathFigure.Segments>

</PathFigure>

</PathGeometry.Figures>

</PathGeometry>

</Rectangle.Clip>

</Rectangle>

Example animation StoryBoard for top down wipe:

<Rectangle.Resources>

<Storyboard Duration="00:00:01" Name="WipeDown" >

<PointAnimation Duration="00:00:01" Storyboard.TargetName="ToWipe" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(LineSegment.Point)" To="400,0" />

<PointAnimation Duration="00:00:01" Storyboard.TargetName="ToWipe" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(LineSegment.Point)" To="400,270" />

<PointAnimation Duration="00:00:01" Storyboard.TargetName="ToWipe" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(LineSegment.Point)" To="0,270" />

</Storyboard>

</Rectangle.Resources>

Note: The idea of using PathGeometry instead of RectangleGeometry is based on swirlingmass post on Silverlight forum. The original post can be found here http://silverlight.net/forums/p/1537/3938.aspx#3938

No comments: