WynApse Home Page
Home    Blog    About    Contact       
Latest Article:

My Tags:
My Sponsors:

Lifetime Member:

Silverlight With Java Script Tutorial 07 - Basic Interactive Animation, Run-Time Alteration


Tutorial 06 is a brief introduction to Silverlight animation albeit non-interactive. The animation starts when the xaml loads, and any 'end' of the animation is due to timing, or hiding of the object. This tutorial will introduce interactive animation which we got with Beta 01. With Interactive Animation, we have the ability to start and stop our animations when we want without having to resort to subterfuge.

Once again, I'd like to give a reference to the Microsoft Silverlight SDK Online. Don't be a stranger to the SDK! Some of the pieces in the SDK have great examples and animation is one of them.


Here is the XAML for the canvas above:


<Storyboard x:Name="animation" Storyboard.TargetProperty="(Canvas.Left)" AutoReverse="true" RepeatBehavior="Forever" >
<DoubleAnimation Storyboard.TargetName="Hello" From="-110" To="300" Duration="0:0:10" />

<TextBlock x:Name="Hello" Canvas.Left="0" Canvas.Top="50" Foreground="Blue" Text="Hello Silverlight" MouseLeftButtonUp="ClickMe" Cursor="Hand"/>



Here is the HTML to run this page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<title>Silverlight With Java Script Tutorial 7</title>
<script src="js/Silverlight.js" type="text/javascript"></script>

<script type="text/javascript">
var AnimationRunning = 0;

function ClickMe(sender, args)
if (AnimationRunning == 0)
if (sender.findName("Hello").Text == "Hello Silverlight")
sender.findName("Hello").Text = "Stay in the 'Light";
sender.findName("Hello").Foreground = "Red";
sender.findName("Hello").Text = "Hello Silverlight";
sender.findName("Hello").Foreground = "Blue";
AnimationRunning = (AnimationRunning==1)?0:1;


<div id="Ag1Host" style="background:#FFFFFF">
<script type="text/javascript">
var pe1 = document.getElementById("Ag1Host");

<script type="text/javascript">
Silverlight.createObjectEx({source: 'xaml/SilverlightWithJSTutorial07.xml', parentElement:pe1, id:'Ag1', properties:{width:'300', height:'100', background:'#00FFFFFF', isWindowless:'true', framerate:'24', version:'0.90.0'}, events:{onError:null, onLoad:null}, context:null});

Interactive Animation

I tried to make this animation identical to the one of Tutorial 06. To that end, there is a TextBlock 'parked' at the left-hand side of the canvas just like it was in Tutorial 06. That is the TextBlock that is to be animated, and it's very obviously not doing anything. That's because it's waiting for us to "interact".

If you compare the xaml for this page with that of Tutorial 06, you'll see that the heart of both animations, the Storyboard and DoubleAnimation is an exact match between the two Tutorial pages.

The difference is that in Tutorial 06, we needed a bunch of other xaml code to set the animation up. In this tutorial, all we have wrapped around the Storyboard is <Canvas.Resources></Canvas.Resources>. And that's all it takes!

But, it's not animating!

The Java Script

Looking at the xaml, you'll see two small additions to the TextBlock, and those are a MouseLeftButtonUp parameter and the Cursor parameter. We've discussed Mouse Event Handlers already, so it should be obvious that we go to the Java Script for this page and find the "ClickMe" event. If you look at the HTML code just above, you'll see that the Java Script for this page consists of one global parameter and a ClickMe event.

I've defined a global variable named "AnimationRunning" and defaulted it to 0, meaning the Animation is NOT running. When ClickMe is executed by clicking on the TextBlock in our canvas, The first thing we do is check to see if we currently have an animation running. We do this because our actions after that point depend upon knowing if we have an animation currently running or not... hence the reason for the global variable :)

If there's no animation running, we start it running by executing Begin() on the Storyboard. Our Storyboard is named "animation" as it was in Tutorial 06, so we start the process by simply executing:


At this point, the text begins animating and will play forever just as the one in Tutorial 06 did.

So not only is this simpler, but we started it when we wanted it to start!

Altering the Animation at Run-Time

It would seem reasonable that we could modify at least some of the parameters of the animation at run-time. This question has come up a few times in the Silverlight Forum.

The answer is yes, we can change parameters on the animation, but we can only do so if the animation is stopped. To demonstrate this, I put code into ClickMe that runs only if there is an animation currently in progress.

First we execute Stop() on the animation, then change the Text parameter and the Foreground parameter, and then set the "AnimationRunning" flag back to 0. When the animation is stopped, the TextBlock returns to it's starting position 'parked' on the left side of the canvas awaiting a mouse click.

We could have also automatically ran the animation, but in keeping with "simpler is better", I decided to let that be handled by another mouse click.

The Text is swapped between two values, and the switch value is determined by getting the current Text value from the TextBlock.


This Tutorial is purposefully small because I want to make the point that Interactive Animation sounds a lot harder than it is. In this small set of files, we've started and stopped an animation at will, and changed animation parameters at run-time... a good piece of code to keep handy!

I think I'll look at gradients next and then come back to animation with gradients on my mind :)

Stay in the 'Light!

Microsoft MVP

Member of WPF and Silverlight Insiders
Silverlight Control
Creative Commons License

Copyright © 2006-2014, WynApse