Thursday, December 20, 2007

Silverlight Tutorial - Animating HTML Elements


Animation! And more animation! We sure do seem to love animation here at Switch On The Code - and really, I have no idea why. But as long as we keep coming up with cool concepts that deal with animation, we will continue to write about them. Today we are going to take a look at something a little bit weird - we are going to animate HTML elements using Silverlight. Thats right, you read that correctly - HTML elements, the stuff you would normally animate with some plain old javascript - perhaps even the Generic Animation javascript code. Why would you want to do this? I don't have any good reasons at the moment. But it does show off some of the capabilities of silverlight, and that is a good enough reason to write about it.
One thing to note before we get started - you will need the
Silverlight 1.1 Alpha Refresh in order for the examples on this page to work. If you don't have it installed, you probably won't see any notification of that fact. This is because, unlike most silverlight apps, the silverlight on this page has no display - so there is no place for the usual "Get Silverlight" image and link to appear. So if the examples on this page fail to work, I would suggest checking out some of our other silverlight tutorials to make sure that your silverlight 1.1 install is working. So below we have the classic animation example that we use here at Switch On The Code. This time, however, the "Go!" button is not hooked to a javascript function, it is hooked to an function in the silverlight code-behind. And if you set some values in the text boxes and click "Go!", silverlight will move and resize the red box to the values given in the given amount of time.

No comments: