Android slide effect (Part 5)-3D Rotation

The previous section describes how to use the built-in Android controls to create sliding pages. Now we use code to implement some sliding pages.

Animation can be implemented in two ways: frame-by-frame animation and tweened animation)

In this example, the custom rotate3d of animation is inherited to achieve the 3D page turning effect. As follows:

1. rotate3d(Animation)

First, customize the 3D animation rotate3d of animation.

Public class rotate3d extends animation {<br/> private float fromdegree; // rotation start angle <br/> private float todegree; // rotation end angle <br/> private float mcenterx; // rotating center x <br/> private float mcentery; // rotating center Y <br/> private camera mcamera; </P> <p> Public rotate3d (float fromdegree, float todegree, float centerx, float centery) {<br/> This. fromdegree = fromdegree; <br/> This. todegree = todegree; <br/> This. mcenterx = centerx; <br/> This. mcentery = centery; </P> <p >}</P> <p> @ override <br/> Public void initialize (INT width, int height, int parentwidth, int parentheight) {<br/> super. initialize (width, height, parentwidth, parentheight); <br/> mcamera = new camera (); <br/>}</P> <p> @ override <br/> protected void applytransformation (float interpolatedtime, transformation T) {<br/> final float fromdegree = fromdegree; <br/> float degrees = fromdegree + (todegree-fromdegree) * interpolatedtime; // angle <br/> final float centerx = mcenterx; <br/> final float centery = mcentery; <br/> final matrix = T. getmatrix (); </P> <p> If (degrees <=-76.0f) {<br/> degrees =-90.0f; <br/> mcamera. save (); <br/> mcamera. rotatey (degrees); // rotate <br/> mcamera. getmatrix (matrix); <br/> mcamera. restore (); <br/>}else if (degrees >=76.0f) {<br/> degrees = 90.0f; <br/> mcamera. save (); <br/> mcamera. rotatey (degrees); <br/> mcamera. getmatrix (matrix); <br/> mcamera. restore (); <br/>}else {<br/> mcamera. save (); <br/> mcamera. translate (0, 0, centerx); // shift x <br/> mcamera. rotatey (degrees); <br/> mcamera. translate (0, 0,-centerx); <br/> mcamera. getmatrix (matrix); <br/> mcamera. restore (); <br/>}</P> <p> matrix. pretranslate (-centerx,-centery); <br/> matrix. posttranslate (centerx, centery); <br/>}< br/>}

Then, instantiate the rotate3d Rotation Direction

Public void initanimation () {<br/> // obtain the rotation center <br/> displaymetrics dm = new displaymetrics (); <br/> dm = getresources (). getdisplaymetrics (); <br/> mcenterx = DM. widthpixels/2; <br/> mcentery = DM. heightpixels/2; </P> <p> // define the rotation direction <br/> int duration = 1000; <br/> lquest1animation = new rotate3d (0,-90, mcenterx, mcentery); // The [question1] rotation direction of the next page (from 0 degrees to-90, the reference system is 0 degrees horizontally) <br/> lquest1animation. setfillafter (true); <br/> lquest1animation. setduration (duration); </P> <p> lquest2animation = new rotate3d (90, 0, mcenterx, mcentery ); // The Orientation of [question2] On the next page (from 90 degrees to 0, and the reference system is 0 degrees horizontally) (first question at the beginning) <br/> lquest2animation. setfillafter (true); <br/> lquest2animation. setduration (duration); </P> <p> rquest1animation = new rotate3d (0, 90, mcenterx, mcentery ); // The orientation of the Previous Page's [question1] rotation (from 0 degrees to 90, the reference system is 0 degrees horizontally) <br/> rquest1animation. setfillafter (true); <br/> rquest1animation. setduration (duration); </P> <p> rquest2animation = new rotate3d (-90, 0, mcenterx, mcentery ); // The orientation of the Previous Page's [question2] rotation (from-90 degrees to 0, the reference system is in the horizontal direction of 0 degrees) <br/> rquest2animation. setfillafter (true); <br/> rquest2animation. setduration (duration); <br/>}
2. Activity

First, define two layout files for rotating the screen

Main. xml

<Linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" <br/> Android: Id = "@ + ID/layout_main" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "wrap_content" <br/> Android: Orientation = "vertical"> </P> <p>... </P> <p> </linearlayout>
Next. xml

<Linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" <br/> Android: Id = "@ + ID/layout_next" <br/> Android: layout_width = "fill_parent" <br/> Android: layout_height = "wrap_content" <br/> Android: Orientation = "vertical"> </P> <p>... </P> <p> </linearlayout>Limited space. For the complete layout file, see the source code pai_^.

Then, initialize two rotated layout file resources

Private void initmain () {<br/> setcontentview (R. layout. main); </P> <p> layoutmain = (linearlayout) findviewbyid (R. id. layout_main); <br/> btn_mainlast = (button) findviewbyid (R. id. main_last); <br/> btn_mainnext = (button) findviewbyid (R. id. main_next); </P> <p> btn_mainlast.setonclicklistener (listener); <br/> btn_mainnext.setonclicklistener (listener ); <br/>}</P> <p> private void initnext () {<br/> setcontentview (R. layout. next); </P> <p> layoutnext = (linearlayout) findviewbyid (R. id. layout_next); <br/> btn_nextlast = (button) findviewbyid (R. id. next_last); <br/> btn_nextnext = (button) findviewbyid (R. id. next_next); </P> <p> btn_nextlast.setonclicklistener (listener); <br/> btn_nextnext.setonclicklistener (listener); <br/>}
Finally, set the button in the layout file to listen to events and respond to 3D Rotation animations and directions.

Private view. onclicklistener listener = new view. onclicklistener () {<br/> @ override <br/> Public void onclick (view v) {<br/> switch (v. GETID () {<br/> case R. id. main_last: // previous page <br/> layoutmain. startanimation (lquest1animation); // rotate the current page to the left (0,-90) <br/> initnext (); <br/> layoutnext. startanimation (lquest2animation); // rotate the next page to the left (90, 0) <br/> break; <br/> case R. id. main_next: // next page <br/> layoutmain. startanimation (rquest1animation); // rotate the current page to the right () <br/> initnext (); <br/> layoutnext. startanimation (rquest2animation); // rotate the next page to the right (-90, 0) <br/> break; <br/> case R. id. next_last: <br/> layoutnext. startanimation (lquest1animation); <br/> initmain (); <br/> layoutmain. startanimation (lquest2animation); <br/> break; <br/> case R. id. next_next: <br/> layoutnext. startanimation (rquest1animation); <br/> initmain (); <br/> layoutmain. startanimation (rquest2animation); <br/> break; <br/>}< br/> };

Source code download

Reference recommendations:

Animation