Carousel Effect in Silverlight

• Download demo project and source code - 2.15 MB

Introduction

This article explains how to code the carousel animation effect in Silverlight. This animation has been the forte of tools like flash and dojo for a very long time, but with the entry of Microsoft Silverlight, it no longer remains a mystery. This article digs deep into the intricacies of the geometry involved in coding such a effect.

Background

The reader must be reasonably familiar with programming in Silverlight and basic 3-dimensinal geometry and a bit about Storyboards.

Using the Code

The application consists of a main page with a revolving carousel of thumbnails. When the user passes the mouse over any of the revolving thumbnails, the animation stops and sets the current thumb nail as the background of the application. There are sliders provided that can speed up or slow down the revolving of the thumb nails, change the axis of revolution and bring the revolving thumb nails closer or farther from the viewer. The right side of the application has one thumb nail that helps in understanding the effect in depth.

A Bit of 3 Dimensional Geometry

In Silverlight, every object of a class derived from UIElement has an important property called Projection. In this article, the projection is assigned to a PlaneProjection object, this object does all the perspective 3-D rendering, for our purposes we will deal with CenterOfRotationZ, RotationX, RotationY, Rota<code>tionZ properties. We will start with trying to understanding the CenterOfRotationZ property.

From Figure 2, it is evident what this means, the distance the image is from the centre of the XYZ axis. Once CenterOfRotationZ is assigned, one should imagine a drum as shown in Figure 2 where the radius of the drum is CenterOfRotationZ.

Now imagine holding the Y axis and rotating it like holding a screwdriver (curve Y). Doing so will rotate the drum about the Y axis and the image that is stuck to the cylindrical surface of the drum revolves along with drum. The same thing will happen, if the X axis is held and rotated (curve X), this rotation is similar when a Bike's accelerator is rotated to speed up the bike. Finally the same description for curve Z.

Note: The point of intersection of the image and the Z axis is the center of the image.

The Curve Y (see Figure 2) rotation action corresponds to changing the RotationY property and the Curve X (see Figure 2) rotation action corresponds to changing the RotationX property of the image.

Note: These values are angles in degrees.

Let me explain with an example. For this, I use the image (Figure 3) and the sliders provided on the right part of the application as shown below:

Some Basic Conventions

• Moving the CZ slider corresponds to moving the CenterOfRotationZ
• Moving the RX slider corresponds to RotationX
• Moving the RY slider corresponds to RotationY
• Moving the RZ slider corresponds to RotationZ
• Move the CZ slider a bit, this will push the image on the Z axis by some amount say 'a'

A drum as shown in Figure 2 needs to be imagined now. Moving the RY Slider will revolve the image on the surface of the drum.

Reset the RY slider back to its starting position. Move the RX slider from its left end position by a small amount. The drum in Figure 2 will tilt forward towards the user, that is the top circular surface will come towards the viewer and the bottom circular surface will move away from the viewer. The image that is stuck to the cylindrical surface of the drum will lean forward. Moving the RY Slider will revolve the image around the (cylindrical) surface of the tilted drum. One can easily see why the image rotates as seen.

On the Main Effect

The main effect in this article consists of taking 8 images at the same position, they can be seen in design time overlapping each other. At run time, each image is assigned an individual PlaneProjection object with the same CenterOfRotationZ (-250) property and a specific RotationY to each one of them as shown below:

plProj.RotationY = j * (360.0 / dCount);

dCount is the number of images (=8).

This displays all the thumbnails around the cylindrical surface drum in an evenly spaced manner (use Figure 2). Now we are ready to start the animation. The animation just perpetually rotates the drum. A DoubleAnimation object is assigned to each thumbnail which targets the PlaneProjection.RotationYProperty property of each thumbnail.

dlAni[j] = new DoubleAnimation();
dlAni[j].By = 360;
nSpeed = (int)sliderSpeed.Value;
dlAni[j].Duration = TimeSpan.FromMilliseconds(nSpeed);
dlAni[j].RepeatBehavior = RepeatBehavior.Forever;

Storyboard.SetTarget(dlAni[j], plProj);
Storyboard.SetTargetProperty(dlAni[j], 
    new PropertyPath(PlaneProjection.RotationYProperty));
stBoard.Children.Add(dlAni[j]);

So each image is set to rotate about the Y axis (Curve Y in Figure 2). All that remains to complete the Carousel effect is:

stBoard.Begin();

The speed of the rotation about the Y axis is controlled by another slider which changes the duration of the DoubleAnimation object assigned to each thumbnail.

Show Axis

The show Axis button is provided so that the viewer can refer to Figure 2 while playing with the sliders. A Storyboard animation is used that rotates the image (Figure 2) about all of its X, Y an Z axis before settling down to its final position. Similarly the Hide Axis button hides the image through an animation.