Tuesday, November 27, 2007

Silverlight 1.0 Animation: Checkerboard, blinds, and comb

This post describes how to create a Silverlight 1.0 based checkerboard, blinds, and comb animation. The effect is added to my animation library so you can reuse the effect using a single line of code. You can download the complete source from here. Below is a working sample.



Recipe:

To create your own checkerboard animation using my animation library download the source code and include Animator.jas and XamlObjectFactory.js in your project and reference them in your Silverlight host page. To create an across checkerboard effect, use the following line:

SilverlightRecipes.Animator.checkerAcross('CheckerAcross', sender.findName('ToAnimate'), '1', 10, 10);

The first parameter is a unique ID for the animation storyboard. The ID is required because storyboards added to a UIElment resources must be named. The second parameter is the animation target. The target can be any UIElement. The third parameter is the animation duration in seconds. The third parameter is the number of horizontal checkers, and the fourth parameter is the number of vertical checkers.

To create a top down checkerboard animation use the following line of code:

SilverlightRecipes.Animator.checkerDown('CheckerDown', sender.findName('ToAnimate'), '1', 10, 10);

To create a vertical blinds animation use the following line of code:

SilverlightRecipes.Animator.blindsV('BlindsV', sender.findName('ToAnimate'), '1', 10);

To create a horizontal blinds animation use the following line of code:

SilverlightRecipes.Animator.blindsH('BlindsH', sender.findName('ToAnimate'), '1', 10);

To create a vertical comb animation use the following line of code:

SilverlightRecipes.Animator.combV('CombV', sender.findName('ToAnimate'), '1', 20);

To create a horizontal comb animation use the following line of code:

SilverlightRecipes.Animator.combH('CombH', sender.findName('ToAnimate'), '1', 20);

The idea behind these animations is to use multiple wipe animations with different clippings, start times, and durations to generate the desired effect. For example the clipping for 2*2 checkerboard is a PathGeometry with four PathFigure instances to represent each rectangle of the checkerboard:

<PathGeometry>

<PathGeometry.Figures>

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

<PathFigure.Segments>

<LineSegment Point="0,0" />

<LineSegment Point="0,135" />

<LineSegment Point="0,135" />

</PathFigure.Segments>

</PathFigure>

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

<PathFigure.Segments>

<LineSegment Point="0,135" />

<LineSegment Point="0,270" />

<LineSegment Point="0,270" />

</PathFigure.Segments>

</PathFigure>

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

<PathFigure.Segments>

<LineSegment Point="200,0" />

<LineSegment Point="200,135" />

<LineSegment Point="200,135" />

</PathFigure.Segments>

</PathFigure>

<PathFigure IsClosed="True" StartPoint="200,135" >

<PathFigure.Segments>

<LineSegment Point="200,135" />

<LineSegment Point="200,270" />

<LineSegment Point="200,270" />

</PathFigure.Segments>

</PathFigure>

</PathGeometry.Figures>

</PathGeometry>

And the animation is done by a single storyboard with three PointAnimation instances to generate the wipe effect. The following is an example for a 2*2 checkerboard animation:

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

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

<PointAnimation Duration="00:00:0.5" BeginTime="00:00:0.5" Storyboard.TargetName="ToAnimate" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(LineSegment.Point)" To="200,135" />

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

<PointAnimation Duration="00:00:0.5" BeginTime="00:00:00" Storyboard.TargetName="ToAnimate" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[1].(PathFigure.Segments)[0].(LineSegment.Point)" To="200,135" />

<PointAnimation Duration="00:00:0.5" BeginTime="00:00:00" Storyboard.TargetName="ToAnimate" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[1].(PathFigure.Segments)[1].(LineSegment.Point)" To="200,270" />

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

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

<PointAnimation Duration="00:00:0.5" BeginTime="00:00:00" Storyboard.TargetName="ToAnimate" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[2].(PathFigure.Segments)[1].(LineSegment.Point)" To="400,135" />

<PointAnimation Duration="00:00:0.5" BeginTime="00:00:00" Storyboard.TargetName="ToAnimate" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[2].(PathFigure.Segments)[2].(LineSegment.Point)" To="200,135" />

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

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

<PointAnimation Duration="00:00:0.5" BeginTime="00:00:0.5" Storyboard.TargetName="ToAnimate" Storyboard.TargetProperty="(UIElement.Clip).(PathGeometry.Figures)[3].(PathFigure.Segments)[2].(LineSegment.Point)" To="200,270" />

</Storyboard>

4 comments:

Fedail said...

hi
can you tell me how can i start use silverlight at asp.net 3.0

Yasser Makram said...

If you have VS 2008 and Silverlight tools, you should be able to use “Add Silverlight Reference” to add a Silverlight project in the ASP.NET website.
Also ASP .NET Futures can be beneficial http://www.asp.net/downloads/futures/

hfeist said...

I've tried adapting your fadein/fadeout functions so they might be used to fade more than one object. It works well but when I rollover one object and the fades happen then roll over a second object it throws a 2207 error. I'm guessing I might have to re-initiallize somehow. Any suggestions?

Here's the fadein function with the sender as the object to be faded:

fadein = function(sender){
var sWhich = sender.Name.toString();
SilverlightRecipes.Animator.fadeIn('FadeIn', sender.findName(sWhich), '10');
}

Quade said...

I've tried to download but nothing is working!