貝塞爾曲線（Bezier）之花束直播愛心點贊動畫效果

博主聲明：

轉載請在開頭附加本文鏈接及作者信息，並標記爲轉載。本文由博主威威喵原創，請多支持與指教。

本文首發於此博主：威威喵 | 博客主頁：https://blog.csdn.net/smile_running

上一次寫了一篇關於愛心點贊曲線動畫效果的文章，查看請點擊：貝塞爾曲線（Bezier）之愛心點贊曲線動畫效果。其實現的效果也太差強人意了，不過作爲小試牛刀，我們算是對貝塞爾曲線有了一個認識，這前面一篇的鋪墊下，我們繼續對其展示的效果進行加強，所以就有了這樣的效果。

我們先來看看這次實現的效果圖：

其實，這個效果也和上一篇那個差不了太多，但是實現的代碼就區別大了。上一次我使用的是純自定義 View 的方式，在執行動畫的時候自己開的子線程去改變它的座標值，雖然效果也還行，但是這種方式並不可取，而且我的貝塞爾曲線的路徑每設置隨機數，它都往同一個方向走，效果不佳，與上面做一個對比。

來看一下這一次效果的實現思路，首先要繼承自父容器，我們將 ImageView 的位置設置到父容器的底部中間區域，代碼如下：

    public void addLoveView() {
        ImageView loveImageView = new ImageView(getContext());
        Bitmap loveBitmap = mLoveBitmapList.get(mRandom.nextInt(mLoveBitmapList.size()));
        loveImageView.setImageBitmap(loveBitmap);

        //設置 ImageView 的位置
        LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        params.addRule(ALIGN_PARENT_BOTTOM);
        params.addRule(CENTER_HORIZONTAL);
        loveImageView.setLayoutParams(params);
        //添加到 LoveBezierView 中，其位置是在容器底部
        addView(loveImageView);
    }

接着就是點擊屏幕就會添加一個愛心圖片，並且這個愛心圖片的動畫效果是透明的和縮放的，代碼如下：

        //愛心出現的動畫
        AnimatorSet startAnimator = new AnimatorSet();
        ObjectAnimator alpha = ObjectAnimator.ofFloat(loveImageView, "alpha", 0.2f, 1f);
        ObjectAnimator scaleX = ObjectAnimator.ofFloat(loveImageView, "scaleX", 0.2f, 1f);
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(loveImageView, "scaleY", 0.2f, 1f);
        startAnimator.playTogether(alpha, scaleX, scaleY);
        startAnimator.setDuration(500);

這上面都沒什麼難度，我就一筆帶過了。關鍵來看貝塞爾曲線路徑的計算方式。首先，來看看我畫的這張圖：

從上面的圖中我們看以看出，橙色的就是愛心的曲線路徑，在上面我標註了 p1 p2 p3 p4 這四個點，它是我們實現這個效果最關鍵的一步。從這四個點的位置看，很容易就可以計算出它的座標。

p4 點 x 座標是控件的寬度，其值是隨機的，並且要相應的減去圖片的寬度，y 座標就是 0

p3 點 x 同上，y 座標是控件高度的一半，也是隨機值

p2 點 x 同上，y 座標是控件高度的一半固定值，然後再加上高度的一半的隨機值

p1 點 x 是固定的，控件寬度 /2 減去圖片的寬度 /2，y座標就是控件高度減去圖片高度

好了，已經對這四個點的座標計算出來了，接下來就是將這四個點的座標套入三階貝塞爾曲線公式裏面，公式如下：

這個應該誰都會吧，不過要在哪裏使用這個公式，這纔是問題的關鍵。這裏直接說明，我們要實現一個 TypeEvalutor 接口，它需要一個泛型，那個我們就傳入一個 Point 類，通過套入貝塞爾曲線公式的計算，我們就可以得到曲線上的每一個點，然後它會返回給我們，注意：這裏傳入的是 p2 p3 控制點，代碼如下：

    public class LoveBezierTypeEvaluator implements TypeEvaluator<PointF> {

        private PointF p2;
        private PointF p3;

        public LoveBezierTypeEvaluator(PointF p2, PointF p3) {
            this.p2 = p2;
            this.p3 = p3;
        }

        @Override
        public PointF evaluate(float t, PointF p1, PointF p4) {
            PointF point = new PointF();
            point.x = (float) (p1.x * Math.pow(1 - t, 3) +
                    3 * p2.x * t * Math.pow(1 - t, 2) +
                    3 * p3.x * Math.pow(t, 2) * (1 - t) +
                    p4.x * Math.pow(t, 3));

            point.y = (float) (p1.y * Math.pow(1 - t, 3) +
                    3 * p2.y * t * Math.pow(1 - t, 2) +
                    3 * p3.y * Math.pow(t, 2) * (1 - t) +
                    p4.y * Math.pow(t, 3));
            return point;
        }
    }

最後通過屬性動畫，我們爲其添加一個貝塞爾曲線的效果，那麼傳入的值就是我們剛剛所計算出來的四個點，代碼如下：

    private void startAnimationSet(ImageView loveImageView) {
        //存放所有動畫，包括開始動畫和 bezier 動畫
        AnimatorSet AllAnimatorSet = new AnimatorSet();
        //愛心出現的動畫
        AnimatorSet startAnimator = new AnimatorSet();
        ObjectAnimator alpha = ObjectAnimator.ofFloat(loveImageView, "alpha", 0.2f, 1f);
        ObjectAnimator scaleX = ObjectAnimator.ofFloat(loveImageView, "scaleX", 0.2f, 1f);
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(loveImageView, "scaleY", 0.2f, 1f);
        startAnimator.playTogether(alpha, scaleX, scaleY);
        startAnimator.setDuration(500);

        //計算四個點的座標
        point1 = new PointF(mWidth / 2 - mLoveWidth / 2, mHeight - mLoveHeight);
        point2 = new PointF(mRandom.nextInt(mWidth) - mLoveWidth, mHeight / 2 + mRandom.nextInt(mHeight / 2));
        point3 = new PointF(mRandom.nextInt(mWidth) - mLoveWidth, mRandom.nextInt(mHeight / 2));
        point4 = new PointF(mRandom.nextInt(mWidth) - mLoveWidth, 0);

        TypeEvaluator loveBezierTypeEvaluator = new LoveBezierTypeEvaluator(point2, point3);
        ValueAnimator bezierAnimator = ObjectAnimator.ofObject(loveBezierTypeEvaluator, point1, point4);
        bezierAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                PointF point = (PointF) animation.getAnimatedValue();
                loveImageView.setX(point.x);
                loveImageView.setY(point.y);
            }
        });
        bezierAnimator.setDuration(5000);

        AllAnimatorSet.playSequentially(startAnimator, bezierAnimator);
        AllAnimatorSet.start();
    }

這樣就可以看到我們的曲線動畫效果，上面的代碼是將兩個動畫放在一起順序的執行，效果如下圖：

那麼至此，我們就簡單的實現了這個貝塞爾曲線點讚的動畫效果了，不過這樣的話，這個愛心都飄到了上面，我們應該進一步對其進行優化，讓愛心逐漸消失纔行，那樣效果更佳。

做法就是監聽動畫事件，等到動畫結束時候，直接移除 ImageView 即可，直接上代碼：

        AllAnimatorSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                removeView(loveImageView);
            }
        });

那麼這樣做的話，效果好多了，看看吧

到這裏的話，好像每一個愛心的移動速率都是一樣的，感覺有那麼一丟丟死板，好吧，那我們就給它搞幾個插值器不就可以裏，我這裏添加了幾個，然後隨機的設置一個，代碼如下：

        mInterpolator = new Interpolator[]{
                new AccelerateInterpolator(), new AccelerateDecelerateInterpolator(), new DecelerateInterpolator(), new LinearInterpolator()
        };

        bezierAnimator.setInterpolator(mInterpolator[mRandom.nextInt(mInterpolator.length)]);

這下不會太死板了，有的快，有的慢，效果好多了吧

好吧，整個效果的完整代碼如下：

package nd.no.xww.qqmessagedragview;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.animation.TypeEvaluator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;

import android.graphics.PointF;
import android.util.AttributeSet;
import android.util.Log;
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 android.widget.RelativeLayout;

import java.util.ArrayList;
import java.util.List;
import java.util.Random;

/**
 * @author xww
 * @desciption : 貝塞爾曲線的鮮花飄飄動畫效果
 * @date 2019/8/3
 * @time 10:34
 * 博主：威威喵
 * 博客：https://blog.csdn.net/smile_Running
 */
public class LoveBezierView extends RelativeLayout {

    private int mLoveWidth;
    private int mLoveHeight;

    private int mWidth;
    private int mHeight;

    private Random mRandom;

    private Bitmap mLoveBitmap;

    private int[] mLoveId = new int[]{
            R.drawable.love1,
            R.drawable.love2,
            R.drawable.love3,
            R.drawable.love4,
            R.drawable.love5,
            R.drawable.love6
    };

    private List<Bitmap> mLoveBitmapList;

    private Interpolator[] mInterpolator;

    private void init() {
        mRandom = new Random();
        mLoveBitmapList = new ArrayList<>();
        setLoveSize(150, 150);

        mInterpolator = new Interpolator[]{
                new AccelerateInterpolator(), new AccelerateDecelerateInterpolator(), new DecelerateInterpolator(), new LinearInterpolator()
        };
    }

    public LoveBezierView(Context context) {
        this(context, null);
    }

    public LoveBezierView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mWidth = MeasureSpec.getSize(widthMeasureSpec);
        mHeight = MeasureSpec.getSize(heightMeasureSpec);
    }

    /**
     * 要設置圖片的大小，必須在 addLoveView 之前調用
     *
     * @param width  寬
     * @param height 高
     */
    public void setLoveSize(int width, int height) {
        mLoveBitmapList.clear();
        for (int i = 0; i < mLoveId.length; i++) {
            mLoveBitmap = BitmapFactory.decodeResource(getResources(), mLoveId[i]);
            mLoveBitmap = Bitmap.createScaledBitmap(mLoveBitmap, width, height, false);
            mLoveBitmapList.add(mLoveBitmap);
        }
        //獲取圖片的寬度
        mLoveWidth = mLoveBitmap.getWidth();
        mLoveHeight = mLoveBitmap.getHeight();
    }

    public void addLoveView() {
        ImageView loveImageView = new ImageView(getContext());
        Bitmap loveBitmap = mLoveBitmapList.get(mRandom.nextInt(mLoveBitmapList.size()));
        loveImageView.setImageBitmap(loveBitmap);

        //設置 ImageView 的位置
        LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        params.addRule(ALIGN_PARENT_BOTTOM);
        params.addRule(CENTER_HORIZONTAL);
        loveImageView.setLayoutParams(params);
        //添加到 LoveBezierView 中，其位置是在容器底部
        addView(loveImageView);
        //開始動畫集合
        startAnimationSet(loveImageView);
    }

    private PointF point1;
    private PointF point2;
    private PointF point3;
    private PointF point4;

    private void startAnimationSet(ImageView loveImageView) {
        //存放所有動畫，包括開始動畫和 bezier 動畫
        AnimatorSet AllAnimatorSet = new AnimatorSet();
        //愛心出現的動畫
        AnimatorSet startAnimator = new AnimatorSet();
        ObjectAnimator alpha = ObjectAnimator.ofFloat(loveImageView, "alpha", 0.2f, 1f);
        ObjectAnimator scaleX = ObjectAnimator.ofFloat(loveImageView, "scaleX", 0.2f, 1f);
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(loveImageView, "scaleY", 0.2f, 1f);
        startAnimator.playTogether(alpha, scaleX, scaleY);
        startAnimator.setDuration(500);

        //計算四個點的座標
        point1 = new PointF(mWidth / 2 - mLoveWidth / 2, mHeight - mLoveHeight);
        point2 = new PointF(mRandom.nextInt(mWidth) - mLoveWidth, mHeight / 2 + mRandom.nextInt(mHeight / 2));
        point3 = new PointF(mRandom.nextInt(mWidth) - mLoveWidth, mRandom.nextInt(mHeight / 2));
        point4 = new PointF(mRandom.nextInt(mWidth) - mLoveWidth, 0);

        TypeEvaluator loveBezierTypeEvaluator = new LoveBezierTypeEvaluator(point2, point3);
        ValueAnimator bezierAnimator = ObjectAnimator.ofObject(loveBezierTypeEvaluator, point1, point4);
        bezierAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                PointF point = (PointF) animation.getAnimatedValue();
                loveImageView.setX(point.x);
                loveImageView.setY(point.y);
            }
        });
        bezierAnimator.setDuration(5000);
        bezierAnimator.setInterpolator(mInterpolator[mRandom.nextInt(mInterpolator.length)]);

        AllAnimatorSet.playSequentially(startAnimator, bezierAnimator);
        AllAnimatorSet.start();

        AllAnimatorSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                removeView(loveImageView);
            }
        });
    }

    public class LoveBezierTypeEvaluator implements TypeEvaluator<PointF> {

        private PointF p2;
        private PointF p3;

        public LoveBezierTypeEvaluator(PointF p2, PointF p3) {
            this.p2 = p2;
            this.p3 = p3;
        }

        @Override
        public PointF evaluate(float t, PointF p1, PointF p4) {
            PointF point = new PointF();
            point.x = (float) (p1.x * Math.pow(1 - t, 3) +
                    3 * p2.x * t * Math.pow(1 - t, 2) +
                    3 * p3.x * Math.pow(t, 2) * (1 - t) +
                    p4.x * Math.pow(t, 3));

            point.y = (float) (p1.y * Math.pow(1 - t, 3) +
                    3 * p2.y * t * Math.pow(1 - t, 2) +
                    3 * p3.y * Math.pow(t, 2) * (1 - t) +
                    p4.y * Math.pow(t, 3));
            return point;
        }
    }

}

使用方式就很簡單了，如下：

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                loveView.setLoveSize(120,120);
                loveView.addLoveView();
                break;
        }
        return super.onTouchEvent(event);
    }

首先綁定控件的 id ，然後設置一下愛心圖片的大小，最後調用 addLoveView() 即可。你可以在主頁面設置一個 Button，通過按鈕控制愛心的添加，這都不是事。

貝塞爾曲線（Bezier）之花束直播愛心點贊動畫效果

自定義 View 之雅虎新聞視差動畫

Android 短信驗證 SDK 接入（Mob SMSSDK）

Android MVP（五）多個 Presenter 依賴注入

一種簡單快速的方式實現 Android App 的夜間模式

RecyclerView 之 findFirstVisibleItemPosition 和 findLastVisibleItemPosition 踩坑

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

linux以太網驅動總結