Home>

Here we use code to achieve some sliding page flip animation effects.

There are two ways to implement animation:frame-by-frame animation and tweened animation.

1. rotate3d (animation)

First, customize the animation 3d animation class rotate3d

public class rotate3d extends animation {
  private float fromdegree;//rotation start angle
  private float todegree;//rotation termination angle
  private float mcenterx;//rotation center x
  private float mcentery;//rotation center y
  private camera mcamera;
  public rotate3d (float fromdegree, float todegree, float centerx, float centery) {
    this.fromdegree=fromdegree;
    this.todegree=todegree;
    this.mcenterx=centerx;
    this.mcentery=centery;
  }
  @override
  public void initialize (int width, int height, int parentwidth, int parentheight) {
    super.initialize (width, height, parentwidth, parentheight);
    mcamera=new camera ();
  }
  @override
  protected void applytransformation (float interpolatedtime, transformation t) {
    final float fromdegree=fromdegree;
    float degrees=fromdegree + (todegree-fromdegree) * interpolatedtime;//rotation angle (angle)
    final float centerx=mcenterx;
    final float centery=mcentery;
    final matrix matrix=t.getmatrix ();
    if (degrees<= -76.0f) {
      degrees=-90.0f;
      mcamera.save ();
      mcamera.rotatey (degrees);//rotation
      mcamera.getmatrix (matrix);
      mcamera.restore ();
    } else if (degrees>= 76.0f) {
      degrees=90.0f;
      mcamera.save ();
      mcamera.rotatey (degrees);
      mcamera.getmatrix (matrix);
      mcamera.restore ();
    } else {
      mcamera.save ();
      mcamera.translate (0, 0, centerx);//shift x
      mcamera.rotatey (degrees);
      mcamera.translate (0, 0, -centerx);
      mcamera.getmatrix (matrix);
      mcamera.restore ();
    }
    matrix.pretranslate (-centerx, -centery);
    matrix.posttranslate (centerx, centery);
  }
}

Then, instantiate the rotation direction of rotate3d

public void initanimation () {
  //Get the rotation center
  displaymetrics dm=new displaymetrics ();
  dm=getresources (). getdisplaymetrics ();
  mcenterx=dm.widthpixels/2;
  mcentery=dm.heightpixels/2;
  //define the rotation direction
  int duration=1000;
  lquest1animation=new rotate3d (0, -90, mcenterx, mcentery);//[question1] rotation direction on the next page (from 0 degrees to -90, the reference frame is 0 degrees in the horizontal direction)
  lquest1animation.setfillafter (true);
  lquest1animation.setduration (duration);
  lquest2animation=new rotate3d (90, 0, mcenterx, mcentery);//[question2] rotation direction on the next page (from 90 degrees to 0, the reference system is 0 degrees horizontally) (starting the first question)
  lquest2animation.setfillafter (true);
  lquest2animation.setduration (duration);
  rquest1animation=new rotate3d (0, 90, mcenterx, mcentery);//[question1] rotation direction on the previous page (from 0 degrees to 90, reference frame is 0 degrees horizontally)
  rquest1animation.setfillafter (true);
  rquest1animation.setduration (duration);
  rquest2animation=new rotate3d (-90, 0, mcenterx, mcentery);//[question2] rotation direction on the previous page (from -90 degrees to 0, the reference frame is 0 degrees in the horizontal direction)
  rquest2animation.setfillafter (true);
  rquest2animation.setduration (duration);
}

Activity

First, define two layout files,Screen change for rotation

main.xml

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@ + id/layout_main"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical">
...
</linearlayout>

next.xml

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@ + id/layout_next"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical">
...
</linearlayout>

Due to space limitations,For the complete layout file, please refer to the source code ^ _ ^

Then, initialize two rotated layout file resources

private void initmain () {
    setcontentview (r.layout.main);
  layoutmain=(linearlayout) findviewbyid (r.id.layout_main);
  btn_mainlast=(button) findviewbyid (r.id.main_last);
  btn_mainnext=(button) findviewbyid (r.id.main_next);
  btn_mainlast.setonclicklistener (listener);
  btn_mainnext.setonclicklistener (listener);
}
private void initnext () {
    setcontentview (r.layout.next);
  layoutnext=(linearlayout) findviewbyid (r.id.layout_next);
  btn_nextlast=(button) findviewbyid (r.id.next_last);
  btn_nextnext=(button) findviewbyid (r.id.next_next);
  btn_nextlast.setonclicklistener (listener);
  btn_nextnext.setonclicklistener (listener);
}

Finally, set the button in the layout file to listen for events,Responsive 3d rotation animation and orientation

private view.onclicklistener listener=new view.onclicklistener () {
  @override
  public void onclick (view v) {
    switch (v.getid ()) {
    case r.id.main_last://previous
      layoutmain.startanimation (lquest1animation);//Rotate the current page to the left (0, -90)
      initnext ();
      layoutnext.startanimation (lquest2animation);//rotate the next page to the left (90, 0)
      break;
    case r.id.main_next://next page
      layoutmain.startanimation (rquest1animation);//rotate the current page to the right (0, 90)
      initnext ();
      layoutnext.startanimation (rquest2animation);//rotate the next page to the right (-90, 0)
      break;
    case r.id.next_last:
      layoutnext.startanimation (lquest1animation);
      initmain ();
      layoutmain.startanimation (lquest2animation);
      break;
    case r.id.next_next:
      layoutnext.startanimation (rquest1animation);
      initmain ();
      layoutmain.startanimation (rquest2animation);
      break;
    }
  }
};
  • Previous How to prevent JavaScript from inserting semicolons automatically
  • Next Python implementation will output content in separate lines