Note: These values are angles in degrees. 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: The point of intersection of the image and the Z axis is the center of the image. Finally the same description for curve Z. 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.
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. Now imagine holding the Y axis and rotating it like holding a screwdriver (curve Y). Once CenterOfRotationZ is assigned, one should imagine a drum as shown in Figure 2 where the radius of the drum is CenterOfRotationZ. We will start with trying to understanding the CenterOfRotationZ property.įrom Figure 2, it is evident what this means, the distance the image is from the centre of the XYZ axis. 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, RotationZ properties. In Silverlight, every object of a class derived from UIElement has an important property called Projection. The right side of the application has one thumb nail that helps in understanding the effect in depth. 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. 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. The application consists of a main page with a revolving carousel of thumbnails. The reader must be reasonably familiar with programming in Silverlight and basic 3-dimensinal geometry and a bit about Storyboards. This article digs deep into the intricacies of the geometry involved in coding such a effect. 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.
#IMAGE CAROUSEL SILVERLIGHT HOW TO#
In the end he came up with a rotating circle of images which independently animate.This article explains how to code the carousel animation effect in Silverlight. Here is the method he used to add the animations to the images.ġ: private void addAnimation(Image image, double angle, double x, double y) 2:
Once he could calculate the x and y coordinates he was ready to rock and roll. To calculate the radian from an angle you need The COSINE and SINE needs the radians to get the correct coordinates. NET object, so that you can do the COSINE and SINE calculations. He used C# for the language…You need the following formulas to do this:įirst, the Math. This is the angle that we need to work with. This is the point where he wants the X and Y coordinate. How do you get the X and Y coordinates on the outer edge of a circle? This is a question with which he tortured everyone in his team and in the true spirit of things, everyone vanished on a separate thread doing research for the delegator.
This was done by dynamically adding any number of images into an array and the setting the canvas top and left to the appropriate position. He tried to create a simple Fish Eye type menu where the icons are spaced evenly in degrees around a circle.įirst he needed to load the images into his Silverlight page. What did our esteemed delegator tried and did …
0 kommentar(er)
