Home>

In the project,We ask to make a paper airplane function:when opening this interface,There will be 4 paper planes flying in from the left side of the screen,And then reach their position and sit up and down,At the same time, the clouds are constantly floating from the right side of the screen to the left side of the screen.When you click on one of the paper planes,The paper plane first flew out of the screen,Fly in again from the left,When the plane returns to its original position,A message box pops up.Directly below the code:

First, first define a relativelayout, the main purpose is to make the aircraft's entry animation:

public class paperplanelayout extends relativelayout implements view.onclicklistener {
  private onclicklistener monclicklistener;
  //Custom layout width and height
  private int mheight;
  private int mwidth;
  private layoutparams lp;
  private drawable [] drawables;
  private random random=new random ();
  //Get the width and height of 4 paper planes
  private int dheight;
  private int dwidth;
  private int mx;
  private int my;
  public paperplanelayout (context context) {
    super (context);
    init ();
  }
  public paperplanelayout (context context,    attributeset attrs) {
    super (context, attrs);
    init ();
  }
  public paperplanelayout (context context,    attributeset attrs, int defstyleattr) {
    super (context, attrs, defstyleattr);
    init ();
  }
  @targetapi (build.version_codes.lollipop)
  public paperplanelayout (context context,    attributeset attrs, int defstyleattr, int defstyleres) {
    super (context, attrs, defstyleattr, defstyleres);
    init ();
  }
  private void init () {
    //Initialize the displayed image
    drawables=new drawable [4];
    drawable pink =
      getresources (). getdrawable (r.drawable.pl_pink);
    drawable yellow =
      getresources (). getdrawable (r.drawable.pl_yellow);
    drawable green =
      getresources (). getdrawable (r.drawable.pl_green);
    drawable blue =
      getresources (). getdrawable (r.drawable.pl_blue);
    drawables [0]=blue;
    drawables [1]=yellow;
    drawables [2]=green;
    drawables [3]=pink;
    //Get the width and height of the graph for later calculations
    //Note that the size of the 4 pictures here are the same,So I only took one
    dheight=uiutility.diptopx (getcontext (), 80);
    dwidth=uiutility.diptopx (getcontext (), 80);
    lp=new layoutparams (dwidth, dheight);
  }
  @override
  protected void onmeasure (int widthmeasurespec,    int heightmeasurespec) {
    super.onmeasure (widthmeasurespec, heightmeasurespec);
    mwidth=getmeasuredwidth ();
    mheight=getmeasuredheight ();
  }
  //The entrance to the real animation start,Call from outside,x and y indicate the location
  //Stay coordinates
  public void addheart (int x, int y, int position) {
    mx=x;
    my=y;
    imageview imageview=new imageview (getcontext ());
    //randomly choose one
    imageview.setimagedrawable (drawables [position]);
    imageview.setlayoutparams (lp);
    addview (imageview);
    //Get animation before and after entering
    animator set=getanimator (imageview);
    set.start ();
    imageview.setonclicklistener (this);
  }
  private animator getanimator (view target) {
    animatorset set=getenteranimator (target);
    animatorset set2=getlineanimation (target);
    animatorset finalset=new animatorset ();
    finalset.playsequentially (set, set2);
    finalset.setinterpolator (new linearinterpolator ());
    finalset.settarget (target);
    return finalset;
  }
  private animatorset getenteranimator (final view target) {
    objectanimator alpha=objectanimator
      .offloat (target, view.alpha, 0.2f, 1f);
    objectanimator translationx=objectanimator
      .offloat (target, view.translation_x,        -2 * mwidth, -mwidth);
    animatorset enter=new animatorset ();
    enter.setduration (500);
    enter.setinterpolator (new linearinterpolator ());
    enter.playtogether (translationx, alpha);
    enter.settarget (target);
    return enter;
  }
  private animatorset getlineanimation (final view iconview) {
    objectanimator transx=objectanimator
      .offloat (iconview, "translationx", -dwidth, mx);
    objectanimator transy=objectanimator
      .offloat (iconview, "translationy",        (mheight-dheight)/2, my);
      transy.
        setinterpolator (pathinterpolatorcompat
        .create (0.7f, 1f));
    animatorset flyupanim=new animatorset ();
    flyupanim.setduration (900);
    flyupanim.playtogether (transx, transy);
    flyupanim.settarget (iconview);
    return flyupanim;
  }
  @override
  public void onclick (view v) {
    if (monclicklistener!=null) {
      monclicklistener.onclick ((imageview) v);
    }
  }
  //Define imageview click event
  public interface onclicklistener {
    void onclick (imageview v);
  }

Second, the next step is to build the layout file.(select only some controls)

<relativelayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@ + id/relative_plane_bj"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@ drawable/paper_plane_bg">
  <!-Baiyun->
  <imageview
    android:id="@ + id/img_white_cloud"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@ drawable/paper_plane_cloud"
    android:layout_centerhorizontal="true"
    android:layout_margintop="30dp" />
  <!-Custom Airplane Layout Animations>
  <com.cloudi.forum.view.paperplanelayout
    android:id="@ + id/plane_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</relativelayout>

Third, you can use it in your activity:

public class planeactivity extends appcompatactivity {
  @bind (r.id.img_white_cloud)
  imageview mimgwhitecloud;
  @bind (r.id.plane_layout)
  paperplanelayout mplanelayout;
  private context mcontext;
  private objectanimator objcloudanim;
  private translateanimation planeanimation;
  private float iconx, icony;
  //Set whether the aircraft has been clicked,If true, the other plane is not clickable
  private boolean misclick=true;
  @override
  protected void oncreate (bundle savedinstancestate) {
    super.oncreate (savedinstancestate);
    setcontentview (r.layout.activity_plane_layout);
    butterknife.bind (this);
    mcontext=getapplicationcontext ();
    //Initialize the animation
    initanimation ();
    initlistener ();
  }
  private void initanimation () {
    //Set the position where the paper plane enters
    initplaneenteranimation ();
    //Floating up and down after the plane enters
    initplaneanimation ();
    //The clouds float from the right side of the screen to the left side of the screen
    initcloudanimation ();
  }
  //Set the position where the paper plane enters
  private void initplaneenteranimation () {
    for (int i=0;i<4;i ++) {
      final int temp=i;
      mplanelayout.post (new runnable () {
        @override
        public void run () {
          //The following values ​​are set by the user
          if (temp == 0) {
            mplanelayout.addheart (
              100dp, 140dp, 0);
          }
          if (temp == 1) {
            mplanelayout.addheart (
              Screen width-120dp, 190dp, 1);
          }
          if (temp == 2) {
            mplanelayout.addheart (
              30dp, 240dp, 2);
          }
          if (temp == 3) {
            mplanelayout.addheart (
              Screen width-210, 290, 3);
          }
        }
      });
    }
  }
  //Floating up and down after the plane enters
  private void initplaneanimation () {
    planeanimation=new translateanimation (0, 0, -10, 10);
    planeanimation.setduration (1000);
    planeanimation.setrepeatcount (animation.infinite);
    planeanimation.setrepeatmode (animation.reverse);
    mplanelayout.setanimation (planeanimation);
    planeanimation.start ();
  }
  //The clouds float from the right side of the screen to the left side of the screen
  private void initcloudanimation () {
    if (objcloudanim == null) {
      objcloudanim=objectanimator
        .offloat (mimgwhitecloud, "translationx",          (Screen width-50, -screen width);
      //set duration
      objcloudanim.setduration (5000);
      //Set loop playback
      objcloudanim.setrepeatcount (
        objectanimator.infinite);
    }
    objcloudanim.start ();
  }
  private void initlistener () {
    mplanelayout.setonclicklistener (new
      paperplanelayout.onclicklistener () {
      @override
      public void onclick (imageview v) {
        if (misclick) {
          misclick=false;
          iconx=v.getx ();
          icony=v.gety ();
          //When clicking on a certain paper plane,The plane will have a fly out animation
          planeoutanimation (v);
        }
      }
    });
  }
  /**
   * Airplane fly out animation
   * /
  private void planeoutanimation (final view iconview) {
    animatorset flyupanim=new animatorset ();
    flyupanim.setduration (600);
    objectanimator transx=objectanimator
      .offloat (iconview, "translationx",        iconview.getx (),        uiutility.getscreenwidth (mcontext) * 2);
    objectanimator transy=objectanimator
      .offloat (iconview, "translationy",        0,        -uiutility.getscreenheight (mcontext) * 2);
    transy.setinterpolator (pathinterpolatorcompat
      .create (0.7f, 1f));
    objectanimator rotation=objectanimator
      .offloat (iconview, "rotation", -45, 0);
    rotation.setinterpolator (new decelerateinterpolator ());
    objectanimator rotationx=objectanimator
      .offloat (iconview, "rotationx", 0, 60);
    rotationx.setinterpolator (
      new decelerateinterpolator ());
    flyupanim.playtogether (transx, transy, rotationx,        objectanimator
          .offloat (iconview, "scalex", 1, 0.5f),        objectanimator
          .offloat (iconview, "scaley", 1, 0.5f),        rotation
    );
    flyupanim.addlistener (new animator.animatorlistener () {
      @override
      public void onanimationstart (animator animation) {
      }
      @override
      public void onanimationend (animator animation) {
        //The plane flies into the animation
        downplaneanimation (iconview);
      }
      @override
      public void onanimationcancel (animator animation) {
      }
      @override
      public void onanimationrepeat (animator animation) {
      }
    });
    flyupanim.start ();
  }
  /**
   * Airplane flying into animation
   * /
  private void downplaneanimation (final view iconview) {
    final int offdistx=-iconview.getright ();
    final int offdisty=-uiutility.diptopx (mcontext, 10);
    animatorset flydownanim=new animatorset ();
    flydownanim.setduration (500);
    objectanimator transx1=objectanimator
      .offloat (iconview, "translationx",        uiutility.getscreenwidth (mcontext), offdistx);
    objectanimator transy1=objectanimator
      .offloat (iconview, "translationy",        -uiutility.getscreenheight (mcontext),        offdisty);
    transy1.setinterpolator (
      pathinterpolatorcompat.create (0.1f, 1f));
    objectanimator rotation1=objectanimator
      .offloat (iconview, "rotation",        iconview.getrotation (), 0);
    rotation1.setinterpolator (
      new accelerateinterpolator ());
    flydownanim.playtogether (transx1, transy1,        objectanimator
          .offloat (iconview, "scalex", 0.5f, 0.9f),        objectanimator
          .offloat (iconview, "scaley", 0.5f, 0.9f),        rotation1
    );
    flydownanim.addlistener (
      new animator.animatorlistener () {
      @override
      public void onanimationstart (animator animation) {
        iconview.setrotationy (180);
      }
      @override
      public void onanimationend (animator animation) {
      }
      @override
      public void onanimationcancel (animator animation) {
      }
      @override
      public void onanimationrepeat (animator animation) {
      }
    });
    animatorset flyinanim=new animatorset ();
    flyinanim.setduration (500);
    flyinanim.setinterpolator (
      new decelerateinterpolator ());
    objectanimator tranx2=objectanimator
      .offloat (iconview, "translationx",        offdistx, iconx);
    objectanimator trany2=objectanimator
      .offloat (iconview, "translationy",        offdisty, icony);
    objectanimator rotationx2=objectanimator
      .offloat (iconview, "rotationx", 30, 0);
    flyinanim.playtogether (tranx2, trany2, rotationx2,    objectanimator.offloat (iconview, "scalex", 0.9f, 1f),    objectanimator.offloat (iconview, "scaley", 0.9f, 1f));
    flyinanim.setstartdelay (100);
    flyinanim.addlistener (new animator.animatorlistener () {
      @override
      public void onanimationstart (animator animation) {
        iconview.setrotationy (0);
      }
      @override
      public void onanimationend (animator animation) {
      }
      @override
      public void onanimationcancel (animator animation) {
      }
      @override
      public void onanimationrepeat (animator animation) {
      }
    });
    animatorset mflyanimator=new animatorset ();
    mflyanimator.playsequentially (flydownanim, flyinanim);
    mflyanimator.start ();
  }

This completes the paper plane's entry and click away animation.

  • Previous Talking about the biggest highlight of React's virtual DOM
  • Next Example of writing the first IDA plugin in python
  • Trends