WPF flip Animation

The girl is naughty. In order to be a Dongdong girl, I thought of a simple 3D flip animation. When logging on to QQ 2013, I saw a similar animation in the login window.

In WPF, to flip an object, it is estimated that 3D transformation is required. So I used axisanglerotation3d to rotate the image around the Z axis.

First, let's look at the effect.

 

Yes, that's the effect. In XAML, because it involves 3D graphics, I first made two user controls, as front and back, and then let it rotate.

After the user control is designed, a viewport3d control is placed on the main window. This is required. It is a 3D model container. If you don't need it, you don't know how to create a 3D image. For details, see the following XAML:

<Window X: class = "flip. mainwindow "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "Title =" mainwindow "Height =" 420 "width =" 650 "xmlns: Local =" CLR-namespace: flip "windowstyle =" NONE "resizemode =" noresize "allowstransparency =" true "background =" Transparent "windowstartuplocation =" centerscreen "> <grid. rowdefinitions> <rowdefinition Height = "*"/> <rowdefinition Height = "Auto"/> </grid. rowdefinitions> <viewport3d grid. row = "0" margin = "3"> <viewport3d. camera> <perspectivecamera position = "0 0 800" lookdirection = "0 0-1" nearplanedistance = "100"/> </viewport3d. camera> <viewport3d. children> <containeruielement3d> <viewport2dvisual3d> <viewport2dvisual3d. geometry> <meshgeometry3d positions = "-200 150 0-200-150 0 200-150 0 200 150 0" Triangleindices = "0 1 2 0 2 3" texturecoordinates = "0 0 0 1 1 1 1 0"/> </viewport2dvisual3d. geometry> <viewport2dvisual3d. material> <diffusematerial viewport2dvisual3d. isvisualhostmaterial = "true"/> </viewport2dvisual3d. material> <viewport2dvisual3d. visual> <local: ucsample1 width = "400" Height = "300"/> </viewport2dvisual3d. visual> </viewport2dvisual3d> <viewport2dvisual3d> <viewport2dvisual3d. geometry> <Meshgeometry3d positions = "200 150 0 200-150 0-200-150 0-200 150 0" triangleindices = "0 1 2 0 2 3" texturecoordinates = "0 0 0 1 1 1 1 0 "/> </viewport2dvisual3d. geometry> <viewport2dvisual3d. material> <diffusematerial viewport2dvisual3d. isvisualhostmaterial = "true"/> </viewport2dvisual3d. material> <viewport2dvisual3d. visual> <local: ucsample2 width = "400" Height = "300"/> </viewport2dvisual3d. visual> </Viewport2dvisual3d> <! -- 3D transformation --> <containeruielement3d. transform> <rotatetransform3d centerx = "0.5" centery = "0.5" centerz = "0.5"> <rotatetransform3d. rotation> <axisanglerotation3d X: Name = "AXR" angle = "0" axis = "0 1 0"/> </rotatetransform3d. rotation> </rotatetransform3d> </containeruielement3d. transform> </containeruielement3d> <modelvisual3d> <modelvisual3d. content> <directionallight color = "Transparent"/> </modelvisual3d. content> </modelvisual3d> </viewport3d. children> </viewport3d> <stackpanel grid. row = "1" margin = "0, 5, "orientation =" horizontal "horizontalalignment =" center "> <button padding =" "content =" Forward "Click =" onclick "/> <button padding =" "content = "backward" Click = "onclick" margin = "12, 0, "/> <button padding =" "content =" close "Click =" onclick "margin =, 0, 0 "/> </stackpanel> </GRID> </WINDOW>

There are several buttons in it. I click the button to control the animation, so I need to write necessary code to generate the animation.

Using system; using system. collections. generic; using system. LINQ; using system. text; using system. threading. tasks; using system. windows; using system. windows. controls; using system. windows. data; using system. windows. documents; using system. windows. input; using system. windows. media; using system. windows. media. imaging; using system. windows. navigation; using system. windows. shapes; using system. windows. media. media3 D; using system. windows. media. animation; namespace flip {// <summary> // mainwindow. interaction logic of XAML // </Summary> Public partial class mainwindow: window {public mainwindow () {initializecomponent ();} private void onclick (Object sender, routedeventargs E) {button BTN = E. originalsource as button; If (BTN! = NULL) {string S = BTN. content. tostring (); If (S = "close") {This. close ();} doubleanimation da = new doubleanimation (); DA. duration = new duration (timespan. fromseconds (1); If (S = "Forward") {da. to = 0d;} else if (S = "") {da. to = 180d;} This. AXR. beginanimation (axisanglerotation3d. angleproperty, DA );}}}}

When the image is 0 degrees around the Z axis, it indicates that it is positive. If it is 180 degrees, it is switched to the opposite. We are declaring the coordinate model of viewport2dvisual3d. Geometry, that is, the triangle superposition model. Pay attention to defining it in a clockwise order. If this is reversed, the image will go to the back of the model. Therefore, the vertices on the front and back are in the opposite direction.

 

3D is not easy to explain, so I will upload the code for reference later.

: Http://download.csdn.net/detail/tcjiaan/5243065