Android "巧"仿螞蟻森林水滴動效 [復制鏈接]

2019-6-5 17:19
laer_L 閱讀:328 評論:1 贊:0
Tag:  

前言

本文重在思路和性能,就不介紹自定義view和handler避免內存泄漏或是導致空指針這些了,喜歡請clone項目并star、fork一下,感謝各位。

需求

APP需要做一個類似螞蟻森林的功能模塊,動效和螞蟻森林接近,水滴最多6滴,根據經驗來說這種交互肯定用RN、H5亦或游戲引擎來做最佳,但是沒辦法產品提了我們也得做。

老規矩還是先上GIF

圖片描述

也許看到這個圖,你就不想再繼續看下去了,心想這個動畫很簡單啊,不就是創建循環創建view,再給每個view的動畫,每個view的開始運動的方向隨機,再給一個加速器就搞定了嘛,如果你也是這樣想那就該把這個文章看完了

分析

  • 首先創建水滴動畫、縮放伴隨透明度變化

  • 消失時縮放伴隨移動

  • 水滴展示中是一直上下浮動的

  • 每個水滴上下浮動的方向不定

  • 每個水滴運動的速度時而快時而慢(這點也許你看不出,所以我再把抖動的范圍加大再來一個GIF)

圖片描述

首先我們肯定不能用每個view對應一個動畫來處理,因為如果我是100低水滴,那豈不是要100個動畫,這不得卡死呀,所以肯定是一個動畫來完成,開始我第一想到的也是用ValueAnimator來做,但是一個ValueAnimator怎么去控制每個view的運動方向呢,有可能你會說每個view在初始化的時候給一個反向,確實可以解決運動方向不同的問題,但是怎么解決view運動的快慢不一樣,并且時而快時而慢呢,并且每個view的運動規律根本不一樣,最后我選擇了handler來處理。

 /*
    * 處理思路:
    *     ->將森林水滴作為一個總體而不是單個的view,自定義一個ViewGroup容器
    *     ->循環創建view
    *     ->為view隨機設置位置(在一些固定的集合中隨機選取,盡量保證水滴不重合)
    *     ->為view設置一個初始的運動方向(注:由于每個view的運動方向不同,所以我選擇將方向綁定到view的tag中)
    *     ->為view設置一個初始的速度(同理:將初始速度綁定到view的tag中)
    *     ->添加view到容器中,并縮放伴隨透明度顯示
    *     ->開啟handler達到view上下位移動畫(注意點:這里我們需要定一個臨界值來改變view的速度,到達view時而快時而慢的目的)
    *     ->點擊view后,縮放、透明度伴隨位移移除水滴
    *     ->界面銷毀時停止調用handler避免內存泄漏,空指針等異常
    * */

正題

下面的講解我將會貼出重要部分的代碼,也就是思路關鍵點,完整代碼還是請clone項目。

  • 首先創建view

創建view代碼塊:

 /**
     * 添加水滴view
     */
    private void addWaterView(List<Water> waters) {
        for (int i = 0; i < waters.size(); i++) {
final Water water = waters.get(i);
View view = mInflater.inflate(mChildViewRes, this, false);
TextView tvWater = view.findViewById(R.id.tv_water);
view.setTag(water);
tvWater.setText(String.valueOf(water.getNumber()) + "g");
view.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View view) {
        handViewClick(view);
    }
});
//隨機設置view動畫的方向
view.setTag(R.string.isUp, mRandom.nextBoolean());
setChildViewLocation(view);
mViews.add(view);
addShowViewAnimation(view);
        }
    }

解釋

創建view最重要的兩件事情:
 1、給view一個隨機的方向并且保存到view的tag里
//隨機設置view動畫的方向
view.setTag(R.string.isUp, mRandom.nextBoolean());
 2、隨機設置view的位置(我這里并非完全隨機,而是給了一些值,然后隨機選擇這些值)、這里用了一個新的集合保存已經選擇到的數,下次選擇的時候排除這些值,因為最好水滴不要完全重合嘛。
/**但是其實這不是我最終的方法,先往下看吧,還有彩蛋**/
 /**
     * 獲取x軸或是y軸上的隨機值
     *
     * @return
     */
    private double getX_YRandom(List<Float> choseRandoms,List<Float> saveRandoms) {
        float random = 0;
        while (random == 0 || saveRandoms.contains(random)) {
random = choseRandoms.get(mRandom.nextInt(choseRandoms.size()));
        }
  
        saveRandoms.add(random);
        return random;
    }
  • 動畫顯示view:

/**
     * 添加顯示動畫
     * @param view
     */
    private void addShowViewAnimation(View view) {
        addView(view);
        view.setAlpha(0);
        view.setScaleX(0);
        view.setScaleY(0);
        view.animate().alpha(1).scaleX(1).scaleY(1).setDuration(ANIMATION_SHOW_VIEW_DURATION).start();
    }
  • 接下來為view設置一個初始的隨機加速度(其實也是隨機在已有的值中選取,因為速度不能相差太大)

 /**控制水滴動畫的快慢*/
    private List<Float> mSpds = Arrays.asList(0.5f, 0.3f, 0.2f, 0.1f);
 /**
     * 設置所有子view的加速度
     */
    private void setViewsSpd() {
        for (int i = 0; i < mViews.size(); i++) {
View view = mViews.get(i);
setSpd(view);
        }
    }
 /**
     * 設置View的spd
     * @param view
     */
    private void setSpd(View view) {
        float spd = mSpds.get(mRandom.nextInt(mSpds.size()));
        //將這個隨機的位移速度保存到view的tag里,這里兩個參數setTag()方法不大了解的可以百度一下
        view.setTag(R.string.spd, spd);
    }
  • 接下來就是開啟動畫,使用handler設置view的偏移量了,這部分也是很關鍵的,還包括了處理水滴時而快時而慢的處理

  /**
     * 設置偏移
     */
    private void setOffSet() {
        for (int i = 0; i < mViews.size(); i++) {
View view = mViews.get(i);
//拿到上次view保存的速度
float spd = (float) view.getTag(R.string.spd);
//水滴初始的位置
float original = (float) view.getTag(R.string.original_y);
float step = spd;
boolean isUp = (boolean) view.getTag(R.string.isUp);
float translationY;
//根據水滴tag中的上下移動標識移動view
if (isUp) {
    translationY = view.getY() - step;
} else {
    translationY = view.getY() + step;
}
//對水滴位移范圍的控制
if (translationY - original > CHANGE_RANGE) {
    translationY = original + CHANGE_RANGE;
    view.setTag(R.string.isUp, true);
} else if (translationY - original < -CHANGE_RANGE) {
    translationY = original - CHANGE_RANGE;
    // 每次當水滴回到初始點時再一次設置水滴的速度,從而達到時而快時而慢
    setSpd(view);
    view.setTag(R.string.isUp, false);
}
view.setY(translationY);
        }
    }
  • 接下來水滴點擊后的消失動畫

  /**
     * 動畫移除view
     * @param view
     */
    private void animRemoveView(final View view) {
        final float x = view.getX();
        final float y = view.getY();
        //計算直線距離
        float space = getDistance(new Point((int) x, (int) y), mDestroyPoint);

        ValueAnimator animator = ValueAnimator.ofFloat(x, 0);
        //根據距離計算動畫執行時間
        animator.setDuration((long) (REMOVE_DELAY_MILLIS / mMaxSpace * space));
        animator.setInterpolator(new LinearInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
    if (isCancelAnimtion) {
        return;
    }
    float value = (float) valueAnimator.getAnimatedValue();
    float alpha = value / x;
    float translationY = y + (x - value) * (maxY - y) / x;
    setViewProperty(view, alpha, translationY, value);
}
        });
        animator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
    //結束時從容器移除水滴
    removeView(view);
}
        });
        animator.start();
    }

    /**
     * 設置view的屬性
     * @param view
     * @param alpha
     * @param translationY
     * @param translationX
     */
    private void setViewProperty(View view, float alpha, float translationY, float translationX) {
        view.setTranslationY(translationY);
        view.setTranslationX(translationX);
        view.setAlpha(alpha);
        view.setScaleY(alpha);
        view.setScaleX(alpha);
    }
  • 處理界面銷毀

 /**
     * 界面銷毀時回調
     */
    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        onDestroy();
    }

 /**
     * 銷毀
     */
    private void onDestroy() {
        isCancelAnimtion = true;
        mHandler.removeCallbacksAndMessages(this);
    }

 @SuppressLint("HandlerLeak") private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
//根據isCancelAnimtion來標識是否退出,防止界面銷毀時,再一次改變UI
if (isCancelAnimtion) {
    return;
}
setOffSet();
mHandler.sendEmptyMessageDelayed(WHAT_ADD_PROGRESS, PROGRESS_DELAY_MILLIS);
        }
    };

到這里動效就完了,運行就能達到想要的樣子了,但是我的工作并沒完,打開profiler一看OMG,在初始化view的地方內存劇增,數量稍稍多一點(10個)還會卡主,看來還的優化啊

很明顯private double getX_YRandom(List<Float> choseRandoms, List<Float> saveRandoms)這個方法走了太多次,原因就在于我是循環創建view,并且在這個循環內為view隨機創建位置,但是為了不完全重合,我這里又一次循環知道是一個不同的值為止,也就是說這里雙重循環了

  • 優化隨機取用一個值后,就把這個值從集合移除,這樣不就不會取到一樣的值了么

 /**
     * 獲取x軸或是y軸上的隨機值
     * @return
     */
    private double getX_YRandom(List<Float> choseRandoms, List<Float> saveRandoms) {

        if (choseRandoms.size() <= 0) {
//防止水滴別可選項的個數還要多,這里就重新對可選項賦值
setCurrentCanChoseRandoms();
        }
        //取用一個隨機數,就移除一個隨機數,達到不用循環遍歷來確保獲取不一樣的值
        float random = choseRandoms.get(mRandom.nextInt(choseRandoms.size()));
        choseRandoms.remove(random);
        saveRandoms.add(random);
        return random;
    }
  • 順便提一下有可能我們在創建水滴時,父容器還未初始化完成,處理如下

  /**
     * 設置水滴
     * @param waters
     */
    public void setWaters(final List<Water> waters) {
        if (waters == null || waters.isEmpty()) {
return;
        }
        //確保初始化完成
        post(new Runnable() {
@Override
public void run() {
    setDatas(waters);
}
        });
    }

到這里就真的完了,優化后實測200個都沒有一點卡頓,讀者可以根據自己需求優化水滴的位置邏輯算法,因為我們產品明確說了最多6滴,所以我現在的水滴位置計算邏輯足夠了,還是來個GIF吧

圖片描述

github連接:https://github.com/93Laer/WaterView

喜歡就贊一個吧,你的贊就是我的動力


我來說兩句
您需要登錄后才可以評論 登錄 | 立即注冊
facelist
所有評論(1)
天明向日葵 2019-6-10 09:56
學習了
回復
領先的中文移動開發者社區
18620764416
7*24全天服務
意見反饋:[email protected]

掃一掃關注我們

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粵ICP備15117877號 )

海南特区七星彩