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.
Dude! Awesome!
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…