3D effect Paging for Android

Recently, I made a simple 3D effect page flip special effect. Let's talk about my ideas. First of all, my page flip effect is not a jump between two activities, instead, you can switch between different views in the same activity class. My current practice is to click a button, then gone's current layout, and then visualize the layout to be presented, start the animation when hiding the current layout, and then add a listener to the animation, at the end of the animation, start the entry animation of another view.

Let's take a look at the layout file on my home page:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/container"    android:layout_width="fill_parent"    android:layout_height="fill_parent" >    <include        android:layout_width="fill_parent"        android:layout_height="fill_parent"        layout="@layout/layout2" />    <include        android:layout_width="fill_parent"        android:layout_height="fill_parent"        layout="@layout/layout1" /></FrameLayout>

My layout file uses the <include> label to contain two other layout files. These layout files present data. The following are the other two layout files:

Layout1:

<? XML version = "1.0" encoding = "UTF-8"?> <Linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" Android: layout_width = "match_parent" Android: layout_height = "match_parent" Android: Background = "@ drawable/test1" Android: orientation = "vertical" Android: Id = "@ + ID/container1"> <button Android: Id = "@ + ID/bt_towhile" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: layout_gravity = "center" Android: text = "white"/> </linearlayout>

Layout2:

<? XML version = "1.0" encoding = "UTF-8"?> <Linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" Android: Id = "@ + ID/container2" Android: layout_width = "match_parent" Android: layout_height = "match_parent" Android: background = "@ drawable/Test2" Android: Orientation = "vertical"> <button Android: Id = "@ + ID/bt_toblack" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: layout_gravity = "center" Android: text = "black"/> </linearlayout>

Here I just give an example without putting any actual class content. I just put two buttons. When I click one of them, I will jump to another layout.

With the layout file, we begin to implement the function, the idea is to start an animation when you click the button and then enable another animation at the end of the animation to hide and display layout1 and layout2.

Below is the source code of an animation tool class I wrote:

Package COM. test. view; import android. view. view; import android. view. viewgroup; import android. view. animation. animation; import android. view. animation. decelerateinterpolator; public class rotateanimationutil {private viewgroup context; private view [] views; Public rotateanimationutil (viewgroup context, view... views) {super (); this. context = context; this. views = views ;} /*** apply the custom rotate3danimation animation ** @ Param flag * sequence coordinate of the current control * @ Param startdegress * start angle * @ Param enddegress * end angle */Public void applyrotateanimation (INT flag, float startdegress, float enddegress) {final float centerx = context. getwidth ()/2.0f; Final float centery = context. getheight ()/2.0f; rotate3danimation rotate = new rotate3danimation (startdegress, enddegress, centerx, centery, 310.0f, true); rotate. setduration (1000); rotate. setfillafter (false); rotate. setinterpolator (New decelerateinterpolator (); rotate. setanimationlistener (New displaynextview (FLAG); context. startanimation (rotate);} private final class displaynextview implements animation. animationlistener {private final int mflag; private displaynextview (INT flag) {mflag = flag;} public void onanimationstart (animation) {}// animation ends public void animation (animation) {context. post (New swapviews (mflag);} public void onanimationrepeat (animation) {}}/*** after a new thread animation ends, start the animation effect to implement screen flip effects ** @ author yangzhiqiang **/private final class swapviews implements runnable {private final int mflag; public swapviews (INT mflag) {This. mflag = mflag;} public void run () {final float centerx = context. getwidth ()/2.0f; Final float centery = context. getheight ()/2.0f; rotate3danimation rotation; If (mflag>-1) {views [0]. setvisibility (view. gone); views [1]. setvisibility (view. visible); views [1]. requestfocus (); rotation = new rotate3danimation (270,360, centerx, centery, 310.0f, false);} else {views [1]. setvisibility (view. gone); views [0]. setvisibility (view. visible); views [0]. requestfocus (); rotation = new rotate3danimation (90, 0, centerx, centery, 310.0f, false);} rotation. setduration (1000); rotation. setfillafter (false); rotation. setinterpolator (New decelerateinterpolator (); // starts the animation context. startanimation (rotation );}}}

I will explain the constructor of this class:

public RotateAnimationUtil(ViewGroup context, View... views) {super();this.context = context;this.views = views;}

There are two parameters. The first parameter is the framelayout of the main layout page. The first parameter is the two layout sub-parameters for animation switching, I am using a variable length parameter for convenience.

Public void applyrotateanimation (INT flag, float startdegress, float enddegress) the first parameter of the method is to mark which layout is redirected, in addition, we must know the layout of the current jump to calculate the angle.

The following is the source code of my Custom Animation:

Package COM. test. view; import android. graphics. camera; import android. graphics. matrix; import android. view. animation. animation; import android. view. animation. transformation; public class rotate3danimation extends animation {private final float mformdegress; private final float mtodegress; private final float mcenterx; private final float mcentery;/*** controls a constant value of the Z axis, it mainly controls the lifting distance of the animation */private final float mdepthz;/*** controls whether the Z axis moves upwards or downwards to achieve the lifting effect */private final Boolean mreverse; private camera mcamera; Public rotate3danimation (float formdegress, float todegress, float centerx, float centery, float depthz, Boolean reverse) {super (); this. mformdegress = formdegress; this. mtodegress = todegress; this. mcenterx = centerx; this. mcentery = centery; this. mdepthz = depthz; this. mreverse = reverse;} @ overridepublic void initialize (INT width, int height, int parentwidth, int parentheight) {super. initialize (width, height, parentwidth, parentheight); mcamera = new camera ();}/*** the value range of interpolatedtime is between 0 and 1, after the animation is started, the system will continuously call the applytransformation Method * and change the value of interpolatedtime */@ overrideprotected void applytransformation (float interpolatedtime, transformation T) {final float formdegress = mformdegress; // calculate the transformation angle float degress = formdegress + (mtodegress-formdegress) * interpolatedtime); Final float centerx = mcenterx; Final float centery = mcentery; final camera = mcamera; // obtain the current matrix = T. getmatrix (); // error the current screen status camera. save (); // determine whether to downgrade or upgrade if (mreverse) {// The axis angle of the forward direction is changed to camera. translate (0.0f, 0.0f, mdepthz * interpolatedtime);} else {// reverse changes the Z axis angle camera. translate (0.0f, 0.0f, mdepthz * (1.0f-interpolatedtime);} // rotate the Y axis angle camera. rotatey (degress); // copy the modified matrix information to the matrixcamera of transformation. getmatrix (matrix); // restores the screen Camera Based on the changed matrix information. restore (); // Let the animation run matrix in the middle of the screen. pretranslate (-centerx,-centery); matrix. posttranslate (centerx, centery );}}

If you do not need the settlement effect, delete the following code:

If (mreverse) {// returns a forward change to the Z axis angle camera. translate (0.0f, 0.0f, mdepthz * interpolatedtime);} else {// reverse changes the Z axis angle camera. translate (0.0f, 0.0f, mdepthz * (1.0f-interpolatedtime ));}

The core code has been completed. The following is the main interface code:

Package COM. test. rotateanimation; import android. app. activity; import android. OS. bundle; import android. view. menu; import android. view. view; import android. view. viewgroup; import android. widget. button; import android. widget. framelayout; import android. widget. linearlayout; import COM. test. view. extends; public class mainactivity extends activity {private volume container; private linearlayout container1; private linearlayout container2; private volume constraint; private button bt_towhile; private button bt_toblack; @ overridepublic void oncreate (bundle entity) {super. oncreate (savedinstancestate); setcontentview (R. layout. activity_main); initview (); bt_towhile.setonclicklistener (new view. onclicklistener () {@ overridepublic void onclick (view v) {rotateanimationutil. applyrotateanimation (1, 0, 90) ;}}); bt_toblack.setonclicklistener (new view. onclicklistener () {@ overridepublic void onclick (view v) {rotateanimationutil. applyrotateanimation (-1, 0,-90) ;}}); // sets the current view control's cache container. setpersistentdrawingcache (viewgroup. persistent_animation_cache);} private void initview () {Container = (framelayout) findviewbyid (R. id. container); bt_toblack = (button) findviewbyid (R. id. bt_toblack); bt_towhile = (button) findviewbyid (R. id. bt_towhile); container1 = (linearlayout) findviewbyid (R. id. container1); container2 = (linearlayout) findviewbyid (R. id. container2); rotateanimationutil = new rotateanimationutil (container, container1, container2);} @ overridepublic Boolean oncreateoptionsmenu (menu) {getmenuinflater (). inflate (R. menu. activity_main, menu); Return true ;}}

Below is the running effect, the cutting effect is not good, haha.

 

Source code: http://download.csdn.net/detail/yaoyeyzq/4892748