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

Easy Silverlight 1.0 Animations: Fade
Welcome to the first of a series about creating Silverlight aimations. This post is about dynamically fading objects using a single line of code. Download the complete source. Below is a working sample.



Recipe:
To create your own fade animation, download the source code and include Animator.js and XamlObjectFactory.js in your project and reference them in your Silverlight host page. Add this line to fade in:
SilverlightRecipes.Animator.fadeIn('FadeIn', sender.findName('ToFade'), '100');
Replace 'FadeIn' with a unique ID for the animation. The second argument should be the Object to fade, and the last argument is the duration of the animation in milliseconds. The object to fade can be any UIElement like Canvas, Image, MediaElement, Path, Rectangle, Ellipse, or TextBlock.
To fade out you can use the following line of code:
SilverlightRecipes.Animator.fadeOut('FadeOut', sender.findName('ToFade'), '100');
In a future post I will explain how I implemented the animator library, but currently I am ading more animation and transitions to the library, and I will post them as soon as they are done.