Metia (my employers) have finally got round to updating our home page, which now features a Silverlight front end that I worked on. Flip the tiles to read more of an article and receive more options.

Site features

  • The site features a randomised layout so that every time you return the tile positioning should look different.
  • The tiles make use of the new 3d projection properties in Silverlight 3.
  • All the content is pulled through dynamically to allow updates to be made with ease.

We can use the projection properties in Silverlight 3 to help produce a 3D spiral animation.

Breakdown of effects

To create this effect I use the following transforms:

  • Opacity at either end of the animation.
  • Projection values to the X and Z axis to make each element loop to the foreground and background.
  • Scale transform to enhance the size of each element at it’s nearest and furthest point.
  • Easing on the above Scale transform to help the movement look more natural.
  • Translate transform to move the elements from the left to right.

To get the above effect I also carried out these additional effects:

  • I replaced the circle elements for images.
  • I slowed down the storyboards using the SpeedRatio value, this allows you to speed up or slow down a storyboard without having to go through and reposition all the key frames.
  • I added an additional projection transform to the Y axis to give the impression the spiral effect is along a curve.

Grab the source

As usual you can download the source files for both the above examples.

Silverlight spiral effect using 3d projection 1

Silverlight spiral effect using 3d projection 2

Using only storyboards and behaviours I have created a cool 3d particle effect.

Break down of effects.

Each element (circle) has it’s own storyboard that uses the projection properties to spin it around in a 360 degree fashion on it’s X axis. By increasing the centre point value of the Z axis we get a larger radius.

On top of that each element is offset by 30 degrees on it’s Y axis, this allows all the elements to form an imaginary sphere. I have also set the storyboard durations to different lengths to allow a chaotic feel to the animation.

Finally I have performed a rotate animation on all of the elements. The was no code needed to create this example, everything was done inside Expression Blend 3.

To take the animation one step further, I have replaced the coloured circles with radial gradients and changed the scale of several elements. This adds an additional dimension to the animation.

Grab the source

As usual you can grab the source here:

Projection example 1

Projection example 2