快捷導(dǎo)航

Android實(shí)現(xiàn)紙飛機(jī)的簡(jiǎn)單操作

更新時(shí)間：2018年05月29日 07:58:00 作者：洄游魚lu

這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)紙飛機(jī)的簡(jiǎn)單操作，類似于漂流瓶功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在項(xiàng)目中，我們要求做一個(gè)紙飛機(jī)的功能：就是當(dāng)打開這個(gè)界面時(shí)，會(huì)有4架紙飛機(jī)從屏幕左側(cè)飛入，然后到達(dá)自己的位置坐上下浮動(dòng)，同時(shí)云彩也不斷地從屏幕右側(cè)飄到屏幕左側(cè)。當(dāng)你點(diǎn)擊其中一個(gè)紙飛機(jī)時(shí)，這個(gè)紙飛機(jī)先向上飛出屏幕外，再?gòu)淖髠?cè)飛入，當(dāng)飛機(jī)回到原來位置時(shí)，彈出一個(gè)消息框。下面直接上代碼：

一、首先自定義一個(gè)RelativeLayout，主要目的就是制作飛機(jī)的進(jìn)入動(dòng)畫：

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架紙飛機(jī)的寬高
  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;
    // 獲取圖的寬高 用于后面的計(jì)算
    // 注意 我這里4張圖片的大小都是一樣的,所以我只取了一個(gè)
    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();
  }

  //真正動(dòng)畫開始的入口，從外部進(jìn)行調(diào)用，x、y分別表示飛機(jī)進(jìn)入之后所
  //停留的位置坐標(biāo)
  public void addHeart(int x, int y, int position) {
    mX = x;
    mY = y;
    ImageView imageView = new ImageView(getContext());
    // 隨機(jī)選一個(gè)
    imageView.setImageDrawable(drawables[position]);
    imageView.setLayoutParams(lp);
    addView(imageView);
    //獲取進(jìn)入前后動(dòng)畫
    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" />

  <!--自定義的飛機(jī)布局動(dòng)畫-->
  <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;
  //設(shè)置飛機(jī)是否已點(diǎn)擊，如果為true，則另一個(gè)飛機(jī)不可點(diǎn)擊
  private boolean mIsClick = true;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_plane_layout);
    ButterKnife.bind(this);
    mContext = getApplicationContext();
    //初始化動(dòng)畫
    initAnimation();
    initListener();
  }

  private void initAnimation() {
    //設(shè)定紙飛機(jī)進(jìn)入的位置
    initPlaneEnterAnimation();
    //飛機(jī)進(jìn)入后做上下浮動(dòng)
    initPlaneAnimation();
    //云彩循環(huán)從屏幕右側(cè)飄到屏幕左側(cè)
    initCloudAnimation();
  }

  //設(shè)定紙飛機(jī)進(jìn)入的位置
  private void initPlaneEnterAnimation() {
    for (int i = 0; i < 4; i++) {
      final int temp = i;
      mPlaneLayout.post(new Runnable() {
        @Override
        public void run() {
          //下面的值根據(jù)用戶自己設(shè)定
          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);
          }
        }
      });
    }
  }

  //飛機(jī)進(jìn)入后做上下浮動(dòng)
  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();
  }

  //云彩循環(huán)從屏幕右側(cè)飄到屏幕左側(cè)
  private void initCloudAnimation() {
    if (objCloudAnim == null) {
      objCloudAnim = ObjectAnimator
        .ofFloat(mImgWhiteCloud, "translationX", 
          屏寬 - 50, -屏寬);
      // 設(shè)置持續(xù)時(shí)間
      objCloudAnim.setDuration(5000);
      // 設(shè)置循環(huán)播放
      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();
          //當(dāng)點(diǎn)擊某一個(gè)紙飛機(jī)時(shí)，飛機(jī)會(huì)有一個(gè)飛出動(dòng)畫
          planeOutAnimation(v);
        }
      }
    });
  }

  /**
   * 飛機(jī)飛出動(dòng)畫
   */
  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) {
        // 飛機(jī)飛入動(dòng)畫
        downPlaneAnimation(iconView);
      }

      @Override
      public void onAnimationCancel(Animator animation) {

      }

      @Override
      public void onAnimationRepeat(Animator animation) {

      }
    });
    flyUpAnim.start();
  }

  /**
   * 飛機(jī)飛入動(dòng)畫
   */
  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();
  }

這樣一來紙飛機(jī)的進(jìn)入和點(diǎn)擊離開動(dòng)畫就完成了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: