Android實現紙飛機的簡單操作

2019-10-22 18:10:31

字體：大中小

來源：轉載

供稿：網友

在項目中，我們要求做一個紙飛機的功能：就是當打開這個界面時，會有4架紙飛機從屏幕左側飛入，然后到達自己的位置坐上下浮動，同時云彩也不斷地從屏幕右側飄到屏幕左側。當你點擊其中一個紙飛機時，這個紙飛機先向上飛出屏幕外，再從左側飛入，當飛機回到原來位置時，彈出一個消息框。下面直接上代碼：

一、首先自定義一個RelativeLayout，主要目的就是制作飛機的進入動畫：

public class PaperPlaneLayout extends RelativeLayout implements View.OnClickListener{  private OnClickListener mOnClickListener;  //自定義布局的寬、高  private int mHeight;  private int mWidth;  private LayoutParams lp;  private Drawable[] drawables;  private Random random = new Random();  //獲取4架紙飛機的寬高  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() {    // 初始化顯示的圖片    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;    // 獲取圖的寬高 用于后面的計算    // 注意 我這里4張圖片的大小都是一樣的,所以我只取了一個    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();  }  //真正動畫開始的入口，從外部進行調用，x、y分別表示飛機進入之后所  //停留的位置坐標  public void addHeart(int x, int y, int position) {    mX = x;    mY = y;    ImageView imageView = new ImageView(getContext());    // 隨機選一個    imageView.setImageDrawable(drawables[position]);    imageView.setLayoutParams(lp);    addView(imageView);    //獲取進入前后動畫    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);    }  }  //定義ImageView單擊事件  public interface OnClickListener {    void onClick(ImageView v);  }

二、接下來就是布局文件的搭建了（只選取一部分控件）

<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">  <!--白云-->  <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" />  <!--自定義的飛機布局動畫-->  <com.cloudi.forum.view.PaperPlaneLayout    android:id="@+id/plane_layout"    android:layout_width="match_parent"    android:layout_height="match_parent"/></RelativeLayout>

三、接下來就可以在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;  //設置飛機是否已點擊，如果為true，則另一個飛機不可點擊  private boolean mIsClick = true;  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_plane_layout);    ButterKnife.bind(this);    mContext = getApplicationContext();    //初始化動畫    initAnimation();    initListener();  }  private void initAnimation() {    //設定紙飛機進入的位置    initPlaneEnterAnimation();    //飛機進入后做上下浮動    initPlaneAnimation();    //云彩循環從屏幕右側飄到屏幕左側    initCloudAnimation();  }  //設定紙飛機進入的位置  private void initPlaneEnterAnimation() {    for (int i = 0; i < 4; i++) {      final int temp = i;      mPlaneLayout.post(new Runnable() {        @Override        public void run() {          //下面的值根據用戶自己設定          if (temp == 0) {            mPlaneLayout.addHeart(              100dp, 140dp, 0);          }          if (temp == 1) {            mPlaneLayout.addHeart(              屏寬 - 120dp, 190dp, 1);          }          if (temp == 2) {            mPlaneLayout.addHeart(              30dp, 240dp, 2);          }          if (temp == 3) {            mPlaneLayout.addHeart(              屏寬 - 210, 290, 3);          }        }      });    }  }  //飛機進入后做上下浮動  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();  }  //云彩循環從屏幕右側飄到屏幕左側  private void initCloudAnimation() {    if (objCloudAnim == null) {      objCloudAnim = ObjectAnimator        .ofFloat(mImgWhiteCloud, "translationX",           屏寬 - 50, -屏寬);      // 設置持續時間      objCloudAnim.setDuration(5000);      // 設置循環播放      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();          //當點擊某一個紙飛機時，飛機會有一個飛出動畫          planeOutAnimation(v);        }      }    });  }  /**   * 飛機飛出動畫   */  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) {        // 飛機飛入動畫        downPlaneAnimation(iconView);      }      @Override      public void onAnimationCancel(Animator animation) {      }      @Override      public void onAnimationRepeat(Animator animation) {      }    });    flyUpAnim.start();  }  /**   * 飛機飛入動畫   */  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();  }

這樣一來紙飛機的進入和點擊離開動畫就完成了。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。

注：相關教程知識閱讀請移步到Android開發頻道。

上一篇：android實現手機與單片機藍牙模塊通信

下一篇：簡單說說Android中如何使用攝像頭和相冊