使用三階貝塞爾曲線實現直播中點贊效果

前言

完整代碼，請查看我的github：https://github.com/shuaijia/LiveLike，喜歡的話就給點個贊嘍^_^

視頻直播想必大家都不謀生，從2015年左右開始，視頻直播開始大量普及，市面上的大中型APP基本上都有直播功能，比如專做直播的鬥魚、花椒等。大家都可能看過別人直播甚至參與過直播，那麼對精彩的內容總忍不住點贊、送禮物！

那作爲開發的我們，總是以技術的角度看待世界，看到酷炫的點贊效果，當然也免不了自己實現一下子。

先看效果：

根據效果先分析一波：

根據效果，確定解決思路和關鍵技術：

自定義View當然少不了，這是基礎
多種愛心隨機出現、路徑也都不同，所以隨機數也是必要的
每個愛心的運動速度、變化快慢是不同的，所以用到了插值器
愛心的運動軌跡是平滑的曲線，而且曲線都不一樣，所以我們想到了使用貝塞爾函數
應用貝塞爾函數計算運動中點的位置，就需要使用估值器來實現平滑的動畫效果

這些很重要！

有了實現思路，那麼接下來我們根據分析的它的特點，一步步得來實現：

一、創建基礎View，愛心出現在底部並居中

這樣使用RelativeLayout最爲合適，所以自定義View需繼承RelativeLayout：

public class FavorLayout extends RelativeLayout {

    private static final String TAG = "FavorLayout";

    // 實現隨機效果
    private Random random = new Random();

    // 愛心高度
    private int iHeight = 120;
    // 愛心寬度
    private int iWidth = 120;
    // FavorLayout高度
    private int mHeight;
    // FavorLayout寬度
    private int mWidth;

    // 來控制子view的位置
    private LayoutParams lp;

}

當然了，構造也少不了

public FavorLayout(Context context) {
    super(context);
    init();
}

public FavorLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public FavorLayout(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

其中init()方法進行一些初始化，接下來的過程中我們會慢慢講解和一步步完善init方法。

首先在init方法中設置子View的LayoutParams，使其能夠實現底部居中。

//底部 並且 水平居中
lp = new LayoutParams(iWidth, iHeight);
lp.addRule(CENTER_HORIZONTAL, TRUE); //這裏的TRUE 要注意 不是true
lp.addRule(ALIGN_PARENT_BOTTOM, TRUE);

注意：控件的寬度高度應在onMeasure方法中獲取

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    // 獲取控件寬高（應在onMeasure方法中獲取）
    mWidth = getMeasuredWidth();
    mHeight = getMeasuredHeight();
}

二、愛心類型實現隨機

在自定義的View中創建愛心 Drawable對象和數組

private Drawable aLove;
private Drawable bLove;
private Drawable cLove;
private Drawable dLove;
private Drawable eLove;

private Drawable[] loves;

在init方法中，將愛心創建並存入數組

//初始化顯示的圖片
loves = new Drawable[5];
aLove = getResources().getDrawable(R.mipmap.love_a);
bLove = getResources().getDrawable(R.mipmap.love_b);
cLove = getResources().getDrawable(R.mipmap.love_c);
dLove = getResources().getDrawable(R.mipmap.love_d);
eLove = getResources().getDrawable(R.mipmap.love_e);

//賦值給loves
loves[0] = aLove;
loves[1] = bLove;
loves[2] = cLove;
loves[3] = dLove;
loves[4] = eLove;

默認提供了五種不同顏色的愛心，當然，愛心數組可有開發者由外部設置，進行拓展。

三、愛心進入時候有一個縮放並漸變的動畫

先看效果：

說到Android動畫，我們以前常用Animation，它通常情況下能滿足我們的需求，但是它的功能比較弱，並不是很好用。好在3.0後,強大的屬性動畫的出現,讓動畫在Android中實現起來變得非常容易。如果你還不知道屬性動畫怎麼使用，趕緊去了解一下吧！

上代碼

/**
 * 設置初始動畫
 * 漸變 並且橫縱向放大
 *
 * @param target
 * @return
 */
private AnimatorSet getEnterAnimtor(final View target) {

    ObjectAnimator alpha = ObjectAnimator.ofFloat(target, View.ALPHA, 0.2f, 1f);
    ObjectAnimator scaleX = ObjectAnimator.ofFloat(target, View.SCALE_X, 0.2f, 1f);
    ObjectAnimator scaleY = ObjectAnimator.ofFloat(target, View.SCALE_Y, 0.2f, 1f);
    AnimatorSet enter = new AnimatorSet();
    enter.setDuration(500);
    enter.setInterpolator(new LinearInterpolator());
    enter.playTogether(alpha, scaleX, scaleY);
    enter.setTarget(target);
    return enter;
}

給傳進來的target（就是愛心的ImageView）設置屬性動畫集，漸變的同時橫縱向放大。

對外提供點讚的方法（其實是創建愛心ImageView並添加）

    /**
     * 點贊
     * 對外暴露的方法
     */
    public void addFavor() {
        ImageView imageView = new ImageView(getContext());
        // 隨機選一個
        imageView.setImageDrawable(loves[random.nextInt(loves.length)]);
        // 設置底部 水平居中
        imageView.setLayoutParams(lp);

        addView(imageView);
        Log.e(TAG, "addFavor: " + "add後子view數:" + getChildCount());

        Animator set = getAnimator(imageView);
        set.addListener(new AnimEndListener(imageView));
        set.start();
    }

點贊其實就是：在愛心數組中隨機抽取一個創建ImageView，添加給付控件並設置漸變和放大動畫。

那麼這樣我們在按鈕的點擊事件中調用addFavor方法就可以實現如上圖的愛心效果了。

四、使用貝塞爾函數實現曲線運動軌跡

我們怎麼讓愛心按照曲線移動?而且還有隨機呢?

接下來就是本文的主角貝塞爾曲線登場的時刻啦，這也是我實現這個效果學到的最重要的知識。不瞭解貝塞爾曲線的可以閱讀我寫的另一篇文章開發中的動效設計與實現 —— 貝塞爾曲線動畫的插值法

簡單來說：就是給定一個起點，一個終點，一個及一個以上的控制點，計算出一個曲線.

簡單瞭解貝塞爾曲線後，發現 三次方貝塞爾曲線 符合我們的要求。

公式:

公式中需要四個P、P0是我們的起點，P3是終點，P1、P2是曲線的兩個控制點。而t是一個因子，取值範圍是0-1，熟悉動畫的同學應該就明白，0-1，對動畫的作用有多麼重大。

因爲需要自己實現貝塞爾，所以想到了屬性動畫中的TypeEvaluator，它就是我們需要的。

上代碼：

/**
 * Description: 動畫估值器，以實現平滑動畫
 * Created by jia on 2017/10/13.
 * 人之所以能，是相信能
 */
public class BezierEvaluator implements TypeEvaluator<PointF> {

    // 兩個控制點
    private PointF pointF1;
    private PointF pointF2;

    public BezierEvaluator(PointF pointF1,PointF pointF2){
        this.pointF1 = pointF1;
        this.pointF2 = pointF2;
    }

    @Override
    public PointF evaluate(float time, PointF startValue, PointF endValue) {
        float timeLeft = 1.0f - time;

        //結果
        PointF point = new PointF();

        PointF point0 = (PointF)startValue;//起點
        PointF point3 = (PointF)endValue;//終點

        // 貝塞爾公式
        point.x = timeLeft * timeLeft * timeLeft * (point0.x)
                + 3 * timeLeft * timeLeft * time * (pointF1.x)
                + 3 * timeLeft * time * time * (pointF2.x)
                + time * time * time * (point3.x);

        point.y = timeLeft * timeLeft * timeLeft * (point0.y)
                + 3 * timeLeft * timeLeft * time * (pointF1.y)
                + 3 * timeLeft * time * time * (pointF2.y)
                + time * time * time * (point3.y);

        return point;
    }
}

先認識一下兩個類：

TypeEvaluator：在獲取動畫對象時只需要傳入起始和結束值系統就會自動完成值的平滑過渡,這個平滑過渡的完成就是靠TypeEvaluator這個類
PointF：點類，與Point一樣，區別是其x和y值是float類型

由於我們view的移動需要控制x y 所以就傳入PointF 作爲參數。

核心就是在動畫變化過程中，實時根據貝塞爾三階方程計算點的位置並返回。

到這一步，只要我們傳入兩個PonitF就能得到一個貝塞爾曲線了。

接下來我們在FavorLayout中定義獲取一個貝塞爾動畫的方法：

    /**
     * 獲取一條路徑的兩個控制點
     * @param scale
     */
    private PointF getPointF(int scale) {

        PointF pointF = new PointF();
        //減去100 是爲了控制 x軸活動範圍
        pointF.x = random.nextInt((mWidth - 100));
        //再Y軸上 爲了確保第二個控制點 在第一個點之上,我把Y分成了上下兩半
        pointF.y = random.nextInt((mHeight - 100)) / scale;
        return pointF;
    }

根據貝塞爾曲線方程可知：兩個控制點纔是真正控制曲線路徑的關鍵！爲了使愛心的運動軌跡不同，所以我們隨機生成兩個控制點，就可以使得曲線軌跡隨機。

    /**
     * 獲取貝塞爾曲線動畫
     * @param target
     * @return
     */
    private ValueAnimator getBezierValueAnimator(View target) {

        //初始化一個BezierEvaluator
        BezierEvaluator evaluator = new BezierEvaluator(getPointF(2), getPointF(1));

        // 起點固定，終點隨機
        ValueAnimator animator = ValueAnimator.ofObject(evaluator, new PointF((mWidth - iWidth) / 2, mHeight - iHeight), new PointF(random.nextInt(getWidth()), 0));
        animator.addUpdateListener(new BezierListener(target));
        animator.setTarget(target);
        animator.setDuration(3000);
        return animator;
    }

可能你已經發現，我給曲線動畫設置了一個監聽BezierListener

/**
 * Description: 動畫監聽，這裏控制位置，真正實現動畫
 * Created by jia on 2017/10/13.
 * 人之所以能，是相信能
 */
public class BezierListener implements ValueAnimator.AnimatorUpdateListener {

    private View target;

    public BezierListener(View target) {
        this.target = target;
    }
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        //這裏獲取到貝塞爾曲線計算出來的的x y值 賦值給view 這樣就能讓愛心隨着曲線走啦
        PointF pointF = (PointF) animation.getAnimatedValue();
        target.setX(pointF.x);
        target.setY(pointF.y);
        // 這裏偷個懶,順便做一個alpha動畫,這樣alpha漸變也完成啦
        target.setAlpha(1-animation.getAnimatedFraction());
    }
}

只有在回調裏使用了計算的值，才能真正做到曲線運動，否則沒有效果哦。

我們在位置更新時給愛心的ImageView設置x、y值，使其按計算的貝塞爾路徑運動起來。

並且同時設置了逐漸變淡動畫，也就是在運動過程中逐漸消失的效果。

修改一下addFavor方法：將動畫更換爲貝塞爾動畫

    public void addFavor() {

        ImageView imageView = new ImageView(getContext());
        //隨機選一個
        imageView.setImageDrawable(drawables[random.nextInt(3)]);
        imageView.setLayoutParams(lp);
        addView(imageView);
        Log.v(TAG, "add後子view數:"+getChildCount());
        getBezierValueAnimator(imageView).start();
    }

看下效果：

五、收尾，效果合成

1、實現變速

// 爲了實現 變速效果 挑選了幾種插補器
private Interpolator line = new LinearInterpolator();//線性
private Interpolator acc = new AccelerateInterpolator();//加速
private Interpolator dce = new DecelerateInterpolator();//減速
private Interpolator accdec = new AccelerateDecelerateInterpolator();//先加速後減速

// 在init中初始化
private Interpolator[] interpolators;

在init方法中：

// 初始化插值器
interpolators = new Interpolator[4];
interpolators[0] = line;
interpolators[1] = acc;
interpolators[2] = dce;
interpolators[3] = accdec;

隨機選用插值器，使得愛心運動有變化。

2、動畫合併

    /**
     * 設置動畫
     *
     * @param target
     * @return
     */
    private Animator getAnimator(View target) {
        AnimatorSet set = getEnterAnimtor(target);

        ValueAnimator bezierValueAnimator = getBezierValueAnimator(target);

        AnimatorSet finalSet = new AnimatorSet();
        finalSet.playSequentially(set);
        finalSet.playSequentially(set, bezierValueAnimator);
        finalSet.setInterpolator(interpolators[random.nextInt(4)]);//實現隨機變速
        finalSet.setTarget(target);
        return finalSet;
    }

3、修改點贊方法

    /**
     * 點贊
     * 對外暴露的方法
     */
    public void addFavor() {
        ImageView imageView = new ImageView(getContext());
        // 隨機選一個
        imageView.setImageDrawable(loves[random.nextInt(loves.length)]);
        // 設置底部 水平居中
        imageView.setLayoutParams(lp);

        addView(imageView);
        Log.e(TAG, "addFavor: " + "add後子view數:" + getChildCount());

        Animator set = getAnimator(imageView);
        set.addListener(new AnimEndListener(imageView));
        set.start();
    }

聰明的夥伴可能又看出來了，我給動畫集設置了結束監聽，又是爲什麼呢？

4、設置消失監聽

private class AnimEndListener extends AnimatorListenerAdapter {
    private View target;

    public AnimEndListener(View target) {
        this.target = target;
    }

    @Override
    public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        //因爲不停的add 導致子view數量只增不減,所以在view動畫結束後remove掉
        removeView((target));
        Log.v(TAG, "removeView後子view數:" + getChildCount());
    }
}

我們之前代碼其實已經實現點贊效果，但每次點擊都在創建新的愛心的ImageView並且添加到父佈局中，所以增加了一個監聽，目的是爲了在動畫結束後，把愛心移除，不然，子view只增不減！

六、總結

總結沒想好說什麼，由於時間倉促，不免有bug或不足的地方，大家發現可以告訴我，有好的建議也可以告訴我，我們一起進步哦！如果您喜歡我的文章，可以去https://github.com/shuaijia/LiveLike點個贊哦！^_^

使用三階貝塞爾曲線實現直播中點贊效果

前言

一、創建基礎View，愛心出現在底部並居中

二、愛心類型實現隨機

三、愛心進入時候有一個縮放並漸變的動畫

四、使用貝塞爾函數實現曲線運動軌跡

五、收尾，效果合成

1、實現變速

2、動畫合併

3、修改點贊方法

4、設置消失監聽

六、總結

修改 support 包 TabLayout，實現新浪微博/即刻 APP 蚯蚓導航效果

Kotlin超簡單實現StepView

Android BLE 快速上手指南

RxJava從入門到不離不棄（八）——使用場景

Android實現異步的幾種方式——從簡單的圖片加載說起

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結