January 28th, 2010

Creating a Silverlight 3d spiral effect with projection

All Silverlight Examples, Silverlight 3 tutorials, Silverlight Blend Tutorials, Silverlight Effects, by Gavin Wignall.

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

Back Top

Responses to “Creating a Silverlight 3d spiral effect with projection”

  1. Dude! Awesome!

  1. uberVU - social comments (,January 29, 2010)

    Social comments and analytics for this post…

    This post was mentioned on Twitter by silverlightbuzz: Create a 3d image spiral using projection in Silverlight http://tinyurl.com/ydbeenl #Silverlight #3d #RIA…

Leave a Reply

Back Top