An Implementation of image groups with 3D Rotation effects

Some time ago I saw a friend in the QQ Group asking me how to do the 3D Rotation effect of a group of images. Although I have seen this effect in the Flash version before, I have not done it myself. So I want to practice, and the final effect is as follows:

 

 

In fact, this thing is to use the standard equation of the elliptic, And then you trigger an action at intervals through a dispatchertimer, so that the picture inside changes the coordinate point along the trajectory of the elliptical, in addition, you can change the image size and transparency to make the image look better.

 

About the elliptic and its standard equation:

 

 

Another need for an elliptic is to know the two half axes of an elliptic, and obtain the coordinate points on the elliptical trajectory based on the angle:

That is, the parameter equation of the elliptic:

 

The angle is the centrifugal angle:

 

 

With these geometric knowledge, the next step should be very simple. It is nothing more than using the properties in Silverlight, changing the effect, and so on, so that every certain time, let your images move on an elliptical track like that. Now, after the analysis is complete, start to write the code:

First, write the following in the XAML file:

 

<Canvas X: Name = "maincanvas" background = "black">

</Canvas>

 

 

Isn't it very easy, because this time I put most operations, including image loading, into the hidden code, and I didn't despise XAML here. In fact, I really like XAML declarative code, however, marking the code and the background logic code are essential, which is also a major feature of Silverlight and WPF. However, the logic used this time is quite large, and it is not appropriate to do it in Xmal. Now, let's take a look at what is going on in the Code hiding file:

First, define these private variables in the mainpage control class:

 

Private double _ speed; // image moving speed
Private list <double> _ angles; // a set of angular values.
Private const double _ max_speed = 0.009; // The maximum speed value defined
Private dispatchertimer _ disp; // Timer
Private list <scaletransform> scaletransforms = new list <scaletransform> (); // scaling transform set

 

 

Then, we need an initialization function, including loading images, setting the image size, and initializing the initial angular angle set.

 

Code

Public void initcontainer ()
{
_ Angles = new list <double> ();
_ Speed = _ max_speed;
_ Disp = new dispatchertimer ();
_ Disp. interval = timespan. frommilliseconds (25); // The image is moved once every 25 milliseconds.
_ Disp. Tick + = new eventhandler (_ disp_tick );

For (VAR I = 0; I <6; I ++)
{
Canvas CA = new canvas ();
Bitmapimage bit = new bitmapimage (New uri (@ "images/" + (I + 1) + ". jpg", urikind. Relative ));
Image IMG = new image ();
IMG. width = 200;
IMG. Height = 250;
IMG. Source = bit;
CA. width = 200;
CA. Height = 250;
// Ca. Background = new solidcolorbrush (colors. Red );
CA. Children. Add (IMG );
_ Angles. Add (math. Pi * 2/6) * I );
Scaletransform SC = new scaletransform ();
Scaletransforms. Add (SC );
SC. scalex = 1;
SC. scaley = 1;
SC. centerx = 100;
SC. centery = 125;
CA. rendertransform = SC;
Maincanvas. Children. Add (CA );
}
_ Disp. Start ();
}

 

 

Then write a function to move the image. The main function is to calculate the coordinate point of the image on the elliptical track based on the angle of the centrifugal angle through the elliptic parameter equation, and then scale the image, transparency changes and other effects

 

Public void setmove ()
{
Double radiusx = 300; // sets the long half axis of the ellipse.
Double radiusy = 80; // you can specify the shorter half axis of an ellipse.
Double centerx = 550; // sets the center of the image group.
Double centery = 220; // sets the center of the image group.
Canvas acanvas;
For (INT I = 0; I <6; I ++)
{
Acanvas = maincanvas. Children [I] as canvas;
Double newx = math. Cos (_ angles [I]) * radiusx + centerx; // calculates the X coordinate
Double newy = math. Sin (_ angles [I]) * radiusy + centery; // calculate Y coordinates
Acanvas. setvalue (canvas. leftproperty, newx); // reposition each image in the Image Set
Acanvas. setvalue (canvas. topproperty, newy );
_ Angles [I] + = _ speed; // The angle of the centrifugal angle is changed based on the speed.
Acanvas. setvalue (canvas. zindexproperty, system. Convert. toint32 (newy); // sets the zindex attribute of the image to prevent the image on the bottom layer from blocking the image on the top.
Double opacity = math. Sin (_ angles [I]) + 1.5; // you can change the transparency of the image.
Acanvas. setvalue (canvas. opacityproperty, opacity );
VaR curr = scaletransforms [I];
VaR change = newy/(centery + radiusy-curr. scaley); // recalculate the canvas size
Curr. scalex = change;
Curr. scaley = change;

}

}

 

Finally, put the setmove () function in the tick trigger function of dispatchertimer and call it every 25 ms to update the position, size, and transparency of each image.

 

Void _ disp_tick (Object sender, eventargs E)
{
Setmove ();
}

 

 

This way, the effects of rotating the image group are done.

 

Conclusion: This time, we did not directly control the image position. Instead, we put the image into the canvas and changed the image position by changing the position of the canvas. The advantage of this is that, it is more reusable. In the future, you can put text, buttons, or other controls or even videos into the image to produce this effect. Of course, it is better to encapsulate it as a control for future convenience. In addition, this effect is still relatively basic and rough, and there are many improvements, for example, you can add the interaction of the mouse. When the mouse moves to different positions on the top, it will accelerate, slow down, change the direction, and change the elliptical center ~