之前玩淘寶誤入它的直播頻道，發現它的直播介面的點贊效果挺好看，然後發現QQ控制元件點贊有類似動畫，於是趁有空花了點時間玩玩。

先上個效果圖：

添加了一個按鈕模擬點贊，點選多少次就出現多個水果，他們的運動軌跡和速度是不一樣的，而且帶有淡入淡出效果。這是淘寶直播的效果，qq空間是點選一次就出現好多個的，修改一點邏輯也能實現對應的效果。

gif圖看起來有點不流暢，因為錄製時鎖定的幀率避免超2M不能上傳，實際執行是流暢的。

因為不是做成一個通用控制元件，所以我也就實現了效果，大家如果要用，可以自己加更多自定義內容。實現起來挺簡單的，也就不囉嗦了

用到的知識點：貝塞爾公式（三階）、屬性動畫、動畫集合、自動義估值器

先丟程式碼再說實現過程：

程式碼：

package cn.small_qi.transitiontest.diyview;

import android.animation.Animator;
import android.animation.AnimatorSet;
import android.animation.TypeEvaluator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Point;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.ViewGroup;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.DecelerateInterpolator;
import android.view.animation.Interpolator;
import android.view.animation.LinearInterpolator;
import android.widget.ImageView;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
import cn.small_qi.transitiontest.R;
public class PressLikeView extends ViewGroup {
    private List<Integer> images;//圖片
    private List<Interpolator> inters;//插值器
    private Random random;
    private int defaultSize = 150;//圖片預設尺寸（px）
    public PressLikeView(Context context) {
        super(context);
    }
    public PressLikeView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initData();
    }
//初始化資料
    private void initData() {
        random =new Random();
        images = new ArrayList<>();
        inters = new ArrayList<>();
        images.add(R.drawable.a510209);
        images.add(R.drawable.a510213);
        images.add(R.drawable.a510216);
        images.add(R.drawable.a510222);
        images.add(R.drawable.a510225);
        images.add(R.drawable.a510234);
        //....
        inters.add(new LinearInterpolator());
        inters.add(new AccelerateInterpolator());
        inters.add(new AccelerateDecelerateInterpolator());
        inters.add(new DecelerateInterpolator());
        //....
    }

    public PressLikeView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {  }
    //使用預置的隨機圖片
    public void  show(){//這個方法是開放出去的，就是按鈕點選時呼叫，出現一個水果動畫
        ImageView view = new ImageView(getContext());
        view.setImageResource(images.get(random.nextInt(images.size())));//隨機設定一張圖片
        view.setLayoutParams(new LayoutParams(defaultSize,defaultSize));//設定大小
        addView(view);//新增到容器中
        view.layout(getWidth()/2-defaultSize, (int) (getHeight()-defaultSize*1.5),getWidth()/2, (int) (getHeight()-0.5*defaultSize));//計算位置
        startAnim(view);//開始動畫
    }
    //使用自定義的圖片 -- 也可以修改成傳入一個ImageView
    public void  show(Drawable drawable){
        ImageView view = new ImageView(getContext());
        view.setImageDrawable(drawable);
        view.setLayoutParams(new LayoutParams(defaultSize,defaultSize));
        addView(view);
        view.layout(getWidth()/2-defaultSize, (int) (getHeight()-defaultSize*1.5),getWidth()/2, (int) (getHeight()-0.5*defaultSize));
        startAnim(view);
    }

    private void startAnim(final ImageView view) {
        AnimatorSet animatorSet = new AnimatorSet();
        //淡入動畫
        ValueAnimator inAnim = ValueAnimator.ofFloat(0.5f,1f);
        inAnim.setDuration(500);
        inAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (float) animation.getAnimatedValue();
                view.setAlpha(value);
                view.setScaleX(value);
                view.setY(value);
            }
        });
        //淡出動畫
        ValueAnimator outAnim = ValueAnimator.ofFloat(1,0);
        outAnim.setDuration(1500);
        outAnim.setStartDelay(1500);//延遲啟動，保證水果飛到一大半再淡出
        outAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                view.setAlpha((float) animation.getAnimatedValue());
            }
        });
        //位移動畫
        ValueAnimator transAnim = ValueAnimator.ofObject(new BezierValue(),new Point(getWidth()/2,getHeight()),new Point(new Random().nextInt(getWidth()),0));
        transAnim.setDuration(3000);
        transAnim.setInterpolator(inters.get(random.nextInt(inters.size())));//隨機設定插值器
        transAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                Point point = (Point) animation.getAnimatedValue();
                view.setX(point.x);
                view.setY(point.y);
            }
        });
        //組合動畫
        //三個動畫同時執行
        animatorSet.playTogether(inAnim,transAnim,outAnim);
        //前面兩個動畫延遲執行，最後一個同時執行
        /*animatorSet.playSequentially(inAnim,transAnim);
        animatorSet.play(outAnim);*/
        animatorSet.start();
        animatorSet.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) { }
            @Override
            public void onAnimationEnd(Animator animation) {
                removeView(view);//動畫結束移除ImageView
            }
            @Override
            public void onAnimationCancel(Animator animation) { }
            @Override
            public void onAnimationRepeat(Animator animation) { }
        });
    }
    //自定義插值器
    class BezierValue implements TypeEvaluator<Point>{
        private Random random =new Random();
        private int ctrlPX1, ctrlPX2,ctrlPY1, ctrlPY2;
        private boolean isInit;//只需要初始化一次
        @Override
        public Point evaluate(float fraction, Point startValue, Point endValue) {
            Point point = new Point();
            point.x = (int) cubicPointX(fraction,startValue.x,endValue.x);
            point.y = (int) cubicPointY(fraction,startValue.y,endValue.y);
            return point;
        }
        //貝塞爾計算x
        private double cubicPointX(float fraction, int start, int end){
            if (!isInit){
                //初始化控制點y左邊
                ctrlPY1 = random.nextInt(start+end/2);
                ctrlPY2 = random.nextInt(start+end/2)+(start+end/2);
                //初始化控制點x座標
                if (random.nextBoolean()){//先左後右
                    ctrlPX1 = (int) (random.nextInt(start)-start/4f);//減去start/4 是為了運動曲線更明顯
                    ctrlPX2 = (int) (random.nextInt(start)+start*1.25f);//start是寬度的一半，為了保證後面往右運動，應該是隨機數加上start。現在乘1.25是為了讓曲線更明顯
                }else{//先右後左
                    ctrlPX1 = (int) (random.nextInt(start)+start*1.25f);
                    ctrlPX2 = (int) (random.nextInt(start)-start/4f);
                }
                isInit =true;
            }
           return start*Math.pow((1-fraction),3)+3* ctrlPX1 *fraction*Math.pow((1-fraction),2)
                    +3* ctrlPX2 *Math.pow(fraction,2)*(1-fraction)+end*Math.pow(fraction,3);
        }
        //貝塞爾計算y
        private double cubicPointY(float fraction, int start, int end){
            return start*Math.pow((1-fraction),3)+3* ctrlPY1 *fraction*Math.pow((1-fraction),2)
                    +3* ctrlPY2 *Math.pow(fraction,2)*(1-fraction)+end*Math.pow(fraction,3);
        }
    }
}
 

1.自定義一個ViewGroup，然後每點選一次就往裡面新增一個ImageView，然後設定好它的位置和大小

2.為每一個ImageView設定隨機的圖片，然後對其執行一些列動畫

3.為了某些效果加入了淡入淡出動畫，相信大家都熟悉，根據自己需求來決定怎麼寫就行了

4.主要是運動軌跡動畫，為了路徑不是單純的直線或者簡單的曲線，所以用了自定義估值器配合三階的貝塞爾實現運動路徑

5.為了實現運動速度的不規則，內建了4種插值器，然後每次隨機取一個，用在運動軌跡的動畫上

可能有點難看懂的是我位置的計算和貝塞爾控制點的計算，我這裡簡要說明一下。

初始位置我本來是是要底部居中，但是稍微做了點偏移，計算位置如圖所示：

而貝塞爾兩個控制點和終點的選擇，我是這麼計算的，大家結合程式碼看就看得懂了：

計算好動畫之後，接下來就不難了！執行動畫就好了，這樣就實現的這種效果拉！

--本文結束，謝謝大家閱讀