WPF easily creates the iTunes coverflow Effect

 Using WPF to easily create iTunes coverflow results
Zhou yinhui

First show:

The following is Apple's iTunes software:

The coverflow Effect of Apple's iTunes player is amazing, but with WPF, we can also easily implement it. Today, it took half a day to finally get it done...

If you are interested, download the source code here.
(Note: the source code is uploaded because the image is large, so no image is uploaded. The program uses the "my images" folder of the user *. you can modify the path in the code or place several JPG images in the "my images" folder to see the effect)

Images are mapped to 3D images by means of 2D-to-3D ing provided by 3 dtools. Each image is attached to a 3D model, we only need to let the program arrange the placement of these models.

Placement of 3D models is performed according to the following method. The three output parameters angle specify the Rotation Angle of the model source Y axis and offsetx specify the translation volume on the X axis of the model, offsetz specifies the translation volume of the model on the Z axis.

/// <Summary>
/// Change the position of interactivevisual3d according to the serial number in the list.
/// </Summary>
/// <Param name = "Index"> serial number in the list </param>
/// <Param name = "midindex"> the serial number of the intermediate item in the list </param>
Private void gettransformofinteractivevisual3d (INT index, double midindex, out double angle, out double offsetx, out double offsetz)
{
Double distomidindex = index-midindex;


// Rotate. The images on both sides rotate to a certain degree.
Angle = 0;
If (distomidindex <0)
{
Angle = This. modelangle; // rotation n degrees on the left
}
Else if (distomidindex> 0)
{
Angle = (-This. modelangle); // rotation on the right-N degrees
}



// Translation. The two wings gradually expand toward the negative and positive directions of the X axis.
Offsetx = 0; // no translation in the middle
If (math. Abs (distomidindex) <= 1)
{
Offsetx = distomidindex * This. midmodeldistance;
}
Else if (distomidindex! = 0)
{
Offsetx = distomidindex * This. xdistancebetweenmodels + (distomidindex> 0? This. midmodeldistance:-This. midmodeldistance );
}


// Images with two wings gradually move to the negative direction of the Z axis, leading to center highlighting (close to the audience)
Offsetz = math. Abs (distomidindex) *-This. zdistancebetweenmodels;

}

The animation effect when you click an image or specify the image to be highlighted is as follows, first, use the above method to calculate the new values that determine the model position (that is, the previous outgoing parameters), and then use the animation (doubleanimation) make these values from the old value to the new value. /// <summary>
/// Re-layout 3D content
/// </Summary>
Private void relayoutinteractivevisual3d ()
{
Int J = 0;
For (INT I = 0; I <this. viewport3d. Children. Count; I ++)
{
Interactivevisual3d iv3d = This. viewport3d. Children [I] As interactivevisual3d;
If (iv3d! = NULL)
{
Double angle = 0;
Double offsetx = 0;
Double offsetz = 0;
This. gettransformofinteractivevisual3d (J ++, this. currentmidindex, out angle, out offsetx, out offsetz );


Namwon. setnamwon (this, new Namwon ());
This. registername ("iv3d", iv3d );
Duration time = new duration (timespan. fromseconds (0.3 ));

Doubleanimation angleanimation = new doubleanimation (angle, time );
Doubleanimation xanimation = new doubleanimation (offsetx, time );
Doubleanimation zanimation = new doubleanimation (offsetz, time );

Storyboard Story = new storyboard ();
Story. Children. Add (angleanimation );
Story. Children. Add (xanimation );
Story. Children. Add (zanimation );

Storyboard. settargetname (angleanimation, "iv3d ");
Storyboard. settargetname (xanimation, "iv3d ");
Storyboard. settargetname (zanimation, "iv3d ");

Storyboard. settargetproperty (
Angleanimation,
New propertypath ("(modelvisual3d. Transform). (transform3dgroup. Children) [0]. (rotatetransform3d. Rotation). (axisanglerotation3d. Angle )"));

Storyboard. settargetproperty (
Xanimation,
New propertypath ("(modelvisual3d. Transform). (transform3dgroup. Children) [1]. (translatetransform3d. offsetx )"));
Storyboard. settargetproperty (
Zanimation,
New propertypath ("(modelvisual3d. Transform). (transform3dgroup. Children) [1]. (translatetransform3d. offsetz )"));

Story. Begin (this );

}
}
}