Adding interest with animations

Silverlight also allows you to animate properties, either declaratively or via code, and I wanted to use this feature for the button rollovers to make them look a little more interesting.

To start with, you can add animations either to a specific element or as a resource which can be used with many elements. Given that I wanted to use the same animation on each of the buttons, this latter option made the most sense, so the animations were added to the root element’s Resources block, as shown in the following listing:

<Canvas xmlns=”...” xmlns:x=”...” ...>
<Canvas.Resources>
	<Storyboard
		x:Name=”mouseEnterAnimation”>
		<ColorAnimation
			Duration=”00:00:0.2”
			To=”Purple”
			Storyboard.TargetProperty=
		“(Shape.Fill).(GradientBrush.
				GradientStops)[1].
			(GradientStop.Color)” />
		<DoubleAnimation
			Duration=”00:00:0.2”
To=”0.247” Storyboard.TargetProperty=
		“(Shape.Fill).(GradientBrush.
				GradientStops)[1].
				(GradientStop.Offset)” />
	</Storyboard>
	<Storyboard
		x:Name=”mouseLeaveAnimation”>
		<ColorAnimation
			Duration=”00:00:0.2”
			To=”#ffb1b1b1”
			Storyboard.TargetProperty=
		“(Shape.Fill).(GradientBrush.
				GradientStops)[1].
				(GradientStop.Color)” />
		<DoubleAnimation
			Duration=”00:00:0.2”
			To=”0.494382”
			Storyboard.TargetProperty=
		“(Shape.Fill).(GradientBrush.
				GradientStops)[1].
				(GradientStop.Offset)” />
	</Storyboard>
</Canvas.Resources>

An animation consists of one or more timelines, defined within a Storyboard. Notice that each timeline deals with a specific data type, such as a Color or a Double, and supports the ability to adjust a value over a specified duration. Be careful when setting a duration, as the value “1” means one hour, not one second, so always specify your durations with the full “hh:mm:ss” format.

You can optionally specify a starting value (From) and an ending value (To), or you can specify an amount to change it by (By). The animations also support auto-reversing, and can either hold the final value of the animation or have it reset to the original value when the animation completes.

The code below shows how to run the animation programmatically:

handleMouseEnter: function(
	sender, eventArgs)
{
	var anim = sender.findName(
		“mouseEnterAnimation”);
	anim.stop();
	anim[“Storyboard.TargetName”] =
		sender.name;
	anim.begin();
},
// handleMouseLeave is nearly identical

There are a couple of minor points to note here. In order to use this animation with multiple buttons, I’ve chosen to set the target object programmatically based on its name. This can’t be done when the animation is running, so I’ve added a call to its stop() method before the name is set; stop() is safe to call even if the animation isn’t currently running.

It’s hard (impossible) to see the affect of an animation in a printed article, but if you run the code above you’ll find that the button’s background will change over 1/5th of a second, as the central colour in the gradient is changed to Purple and the gradient stop moves closer to the top of the button.

Transformations

Animations are cool, but for real excitement you might also want to try out Silverlight’s transformation capabilities as well. There are four main transformation types: ScaleTransform, which is used to shrink and grow elements; RotateTransform for spinning elements; SkewTransform for deforming shapes and MatrixTransform which lets you craft a custom transformation matrix.

You apply transforms by setting the RenderTransform property on an element, as shown below:

<Path RenderTransformOrigin=”0.5,0.5”
	... >
	<Path.RenderTransform>
		<ScaleTransform ScaleX=”1”
			ScaleY=”1” />
	</Path.RenderTransform>
</Path>

In this example, a no-op ScaleTransform (i.e. it scales by 1 in both directions) is being applied to the Path, with is scaling centre set to the midpoint of the rectangle. If the idea of having a no-op transformation appears to be a tad silly, then check out:

<Storyboard
	x:Name=”mouseEnterAnimation” >
	...
	<DoubleAnimation
		Storyboard.TargetProperty=
		“(Path.RenderTransform).ScaleX”
		To=”1.2” Duration=”0:0:0.2” />
	<DoubleAnimation
		Storyboard.TargetProperty=
		“(Path.RenderTransform).ScaleY”
		To=”1.2” Duration=”0:0:0.2” />
</Storyboard>

You’ll notice that I’ve updated the mouse rollover animation so that it animates the ScaleTransform for the Path, which means that the button will grow by 20% when the mouse enters the button. In general, if you want to perform an animated transformation on an element, it is much easier to add the relevant no-op transform and then animate its properties, rather than attempting to add a transform in code.