Android實現(xiàn)支付寶螞蟻森林水滴浮動效果

更新時間：2018年06月28日 08:33:57 作者：yangyong915

這篇文章主要為大家詳細介紹了Android實現(xiàn)支付寶螞蟻森林水滴浮動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

可以有多個水滴，可以控制位置，水滴上下浮動。點擊水滴產(chǎn)生搜集動畫，水滴向樹移動并逐漸消失，如圖：

那么是如何實現(xiàn)的呢，下面我們一步步來分析：

1、定義一個繼承Relativelayout 的子類作為容器放置多個水滴并在Onlayout()中設(shè)置子控件的位置

@Override
  protected void onLayout(boolean changed, int l, int t, int r, int b) {
    final int count = getChildCount();
 
    for (int i = 0; i < count; i++) {
      View child = getChildAt(i);
      int childWidth = child.getMeasuredWidth();
      int childHeight = child.getMeasuredHeight();
      if (child.getVisibility() != GONE) {
        child.layout(listX.get(i), listY.get(i), childWidth + listX.get(i), childHeight + listY.get(i));
      }
    }
  }

上面代碼最重要的就是child.layout()函數(shù)，前兩個參數(shù)為子控件的位置，這我先去盜個圖：

如圖，前兩個參數(shù)分別為getLeft 和getTop，后兩個參數(shù)分別為getRight和getBottom;前兩個參數(shù)其實是我們重外界傳進來的子坐標列表，代碼如下：

List<Integer> listX = new ArrayList<>();
  List<Integer> listY = new ArrayList<>();
 
  public void setChildPosition(int posx, int posy) {
    listX.add(posx);
    listY.add(posy);
  }

對于后面兩個參數(shù)我們需要先獲取子控件的寬高；然后在疊加上前面兩個參數(shù)就是我們需要的坐標，在上面代碼中可以看到我們是通過child.getmeasure來獲取的寬高，但在獲取寬高之前我們還需要去測量子空間的寬高。這個測量需要在measure()中完成：

@Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    measureChildren(widthMeasureSpec, heightMeasureSpec);
  }

至此，我們的父容器已經(jīng)設(shè)計完成，接下來我們需要自己定義子控件以及子控件的動畫，首先是一個浮動的動畫，因為我們這里后面需要監(jiān)聽點擊動作，所以最好使用屬性動畫完成，如下：

private void doRepeatAnim() {
    ObjectAnimator animator = ObjectAnimator.ofFloat(this, "translationY", -padding, padding, -padding);
    animator.setRepeatMode(ObjectAnimator.REVERSE);
    animator.setRepeatCount(ObjectAnimator.INFINITE);
    animator.setDuration(1500);
    animator.start();
  }

就是讓其沿Y軸上下移動，設(shè)置為INFINTE則為無限重復(fù)動畫；第二個動畫就是我們點擊的時候，子控件會移動到某個特定的位置并逐漸消失：

 this.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View view) {
        doSetAnim();
      }
    });

private void doSetAnim() {
    if (isCollect) return;
    isCollect = true;
    ObjectAnimator move1 = ObjectAnimator.ofFloat(this, "translationX", startWidth, endWidth);
    ObjectAnimator move2 = ObjectAnimator.ofFloat(this, "translationY", startHeight, endHeight);
    ObjectAnimator move3 = ObjectAnimator.ofFloat(this, "alpha", 1, 0);
 
    AnimatorSet animatorSet = new AnimatorSet();
    animatorSet.playTogether(move1, move2, move3);
    animatorSet.setDuration(1500);
    animatorSet.start();
  }

里面我添加了isCollect 判斷，用于處理點擊事件重復(fù)生效的問題，這里是一個動畫組合，重當前位置移動到特定位置同時透明度也不斷的變淡。寫動畫的時候特別應(yīng)該注意一個問題就是當前的所有位置都不是外面?zhèn)鬟M來的位置而是以當前控件初始位置為參考的相對位置，因為我們在父控件的時候就設(shè)定好了子控件的位置，不能再次進行重復(fù)設(shè)定不然會疊加，所以上面的startwidth 和startHeight其實都是0，endWidth 和endHeight也是結(jié)束位置減去控件移動的初始位置：

/**
   * @param context
   */
  public WaterView(Context context) {
    super(context);
    this.context = context;
    endWidth = (int) DeviceUtils.dpToPixel(context, 160);
    endHeight = (int) DeviceUtils.dpToPixel(context, 300);
    padding = (int) DeviceUtils.dpToPixel(context, 10);
    startWidth = 0;
    startHeight = 0;
  }
 
  /**
   * @param index
   * @param startWidth 開始坐標 X
   * @param startHeight 開始坐標 Y
   */
  public void setPosition(int index, int startWidth, int startHeight) {
    this.index = index;
    endWidth = endWidth - startWidth;
    endHeight = endHeight - startHeight;
  }

，在設(shè)置動畫之前，我們還缺少初始化控件的步驟，這個步驟就是繪制背景控件，這個過程在ondraw()方法中進行：

@Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    mMWidth = getMeasuredWidth();
    mHeight = getMeasuredHeight();
  }
 
  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaint.setColor(getResources().getColor(R.color.color_87d1ab));
    mPaint.setStyle(Paint.Style.FILL);
    canvas.drawCircle(mMWidth / 2, (float) mHeight / 2, DeviceUtils.dpToPixel(context, 30), mPaint);
 
    mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mTextPaint.setColor(Color.WHITE);
    mTextPaint.setTextSize(DeviceUtils.dpToPixel(context, 30));
    mTextPaint.setColor(getResources().getColor(R.color.text_color_fc));
    mTextPaint.setStyle(Paint.Style.FILL);
    float width = mTextPaint.measureText(text);
    canvas.drawText(text, mMWidth / 2 - width / 2, (float) mHeight * 0.65f, mTextPaint);
 
    doRepeatAnim();
    this.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View view) {
        doSetAnim();
      }
    });
  }

如上，我繪制了一個純色的園和特定的文字。當子控件繪制完成后才進行的動畫。

最后就是如何使用我們剛才做好了輪子啦，請看代碼：

@Override
  protected void onStart() {
    super.onStart();
    int posx = (int) DeviceUtils.dpToPixel(this, 70);
    int posy = (int) DeviceUtils.dpToPixel(this, 70);
    addChildView(this, relative, 1, posx, posy);
    addChildView(this, relative, 2, 2 * posx, 2 * posy);
    addChildView(this, relative, 3, 3 * posx, posy);
  }
 
  /**
   * 添加子水滴
   *
   * @param relative
   * @param index  第幾個
   * @param posx   子控件初始位置x
   * @param posy   子控件初始位置y
   */
  private void addChildView(final Context context, final WaterContainer relative, final int index, final int posx, final int posy) {
    relative.postDelayed(new Runnable() {
      @Override
      public void run() {
        int width = (int) DeviceUtils.dpToPixel(context, 60);
        int height = (int) DeviceUtils.dpToPixel(context, 60);
        ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(width, height);
        WaterView waterView = new WaterView(context);
        waterView.setPosition(index, posx, posy);
        waterView.setLayoutParams(layoutParams);
        relative.setChildPosition(posx, posy);
        relative.addView(waterView);
      }
    }, (index - 1) * 300);
  }

在添加代碼里面，我添加了一個延時，這樣每個添加的子水滴就會不同步的上下跳動，看起來更為真實，如果你有更好的辦法請一定記得告訴我，上面的代碼就是通過LayoutParams先設(shè)定子控件的布局,再把子控件添加到父容器中去?？梢詫崿F(xiàn)重復(fù)調(diào)用，就是這么簡單。

最后給出項目的github地址：鏈接地址

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

您可能感興趣的文章: