Tuesday, October 23, 2007

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.

1 comment:

Anonymous said...

A great resource for Silverlight lovers!
thanks dude!