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.
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" targetname="ToAnimate" 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" targetname="ToAnimate" 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" targetname="ToAnimate" targetproperty="(UIElement.Clip).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(LineSegment.Point)" to="0,135")
(pointanimation duration="00:00:0.5" begintime="00:00:00" targetname="ToAnimate" targetproperty="(UIElement.Clip).(PathGeometry.Figures)[1].(PathFigure.Segments)[0].(LineSegment.Point)" to="200,135")
(pointanimation duration="00:00:0.5" begintime="00:00:00" targetname="ToAnimate" targetproperty="(UIElement.Clip).(PathGeometry.Figures)[1].(PathFigure.Segments)[1].(LineSegment.Point)" to="200,270")
(pointanimation duration="00:00:0.5" begintime="00:00:00" targetname="ToAnimate" targetproperty="(UIElement.Clip).(PathGeometry.Figures)[1].(PathFigure.Segments)[2].(LineSegment.Point)" to="0,270")
(pointanimation duration="00:00:0.5" begintime="00:00:00" targetname="ToAnimate" targetproperty="(UIElement.Clip).(PathGeometry.Figures)[2].(PathFigure.Segments)[0].(LineSegment.Point)" to="400,0")
(pointanimation duration="00:00:0.5" begintime="00:00:00" targetname="ToAnimate" targetproperty="(UIElement.Clip).(PathGeometry.Figures)[2].(PathFigure.Segments)[1].(LineSegment.Point)" to="400,135")
(pointanimation duration="00:00:0.5" begintime="00:00:00" targetname="ToAnimate" 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" targetname="ToAnimate" 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" targetname="ToAnimate" 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" targetname="ToAnimate" targetproperty="(UIElement.Clip).(PathGeometry.Figures)[3].(PathFigure.Segments)[2].(LineSegment.Point)" to="200,270")
(/storyboard)

Illustrated By Ritesh Niranjan