博主聲明：

轉(zhuǎn)載請在開頭附加本文鏈接及作者信息，并標記為轉(zhuǎn)載廉嚼。本文由博主 威威喵 原創(chuàng)防楷，請多支持與指教躁锡。

本文首發(fā)于此 博主：威威喵 | 博客主頁：https://blog.csdn.net/smile_running

上一次寫了一篇關(guān)于愛心點贊曲線動畫效果的文章，查看請點擊：貝塞爾曲線（Bezier）之愛心點贊曲線動畫效果筒溃。其實現(xiàn)的效果也太差強人意了马篮，不過作為小試牛刀，我們算是對貝塞爾曲線有了一個認識铡羡，這前面一篇的鋪墊下积蔚，我們繼續(xù)對其展示的效果進行加強，所以就有了這樣的效果烦周。

我們先來看看這次實現(xiàn)的效果圖：

image

其實尽爆，這個效果也和上一篇那個差不了太多，但是實現(xiàn)的代碼就區(qū)別大了读慎。上一次我使用的是純自定義 View 的方式漱贱，在執(zhí)行動畫的時候自己開的子線程去改變它的坐標值，雖然效果也還行夭委，但是這種方式并不可取幅狮，而且我的貝塞爾曲線的路徑每設(shè)置隨機數(shù)，它都往同一個方向走，效果不佳崇摄，與上面做一個對比擎值。

image

來看一下這一次效果的實現(xiàn)思路，首先要繼承自父容器逐抑，我們將 ImageView 的位置設(shè)置到父容器的底部中間區(qū)域鸠儿，代碼如下：

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

        //設(shè)置 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);
    }

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

        //愛心出現(xiàn)的動畫
        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);

這上面都沒什么難度，我就一筆帶過了命斧。關(guān)鍵來看貝塞爾曲線路徑的計算方式田晚。首先，來看看我畫的這張圖：

image

從上面的圖中我們看以看出国葬，橙色的就是愛心的曲線路徑贤徒，在上面我標注了 p1 p2 p3 p4 這四個點，它是我們實現(xiàn)這個效果最關(guān)鍵的一步胃惜。從這四個點的位置看泞莉，很容易就可以計算出它的坐標。

p4 點 x 坐標是控件的寬度船殉，其值是隨機的鲫趁，并且要相應的減去圖片的寬度，y 坐標就是 0

p3 點 x 同上利虫，y 坐標是控件高度的一半挨厚，也是隨機值

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

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

好了硼讽，已經(jīng)對這四個點的坐標計算出來了巢价，接下來就是將這四個點的坐標套入三階貝塞爾曲線公式里面，公式如下：

image

這個應該誰都會吧固阁，不過要在哪里使用這個公式壤躲，這才是問題的關(guān)鍵。這里直接說明备燃，我們要實現(xiàn)一個 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;
        }
    }

最后通過屬性動畫更耻，我們?yōu)槠涮砑右粋€貝塞爾曲線的效果，那么傳入的值就是我們剛剛所計算出來的四個點麻掸，代碼如下：

    private void startAnimationSet(ImageView loveImageView) {
        //存放所有動畫酥夭，包括開始動畫和 bezier 動畫
        AnimatorSet AllAnimatorSet = new AnimatorSet();
        //愛心出現(xiàn)的動畫
        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();
    }

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

image

那么至此，我們就簡單的實現(xiàn)了這個貝塞爾曲線點贊的動畫效果了疙描，不過這樣的話诚隙，這個愛心都飄到了上面，我們應該進一步對其進行優(yōu)化起胰，讓愛心逐漸消失才行久又，那樣效果更佳。

做法就是監(jiān)聽動畫事件效五，等到動畫結(jié)束時候，直接移除 ImageView 即可，直接上代碼：

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

那么這樣做的話蚓曼，效果好多了踢代，看看吧

image

到這里的話，好像每一個愛心的移動速率都是一樣的戒劫，感覺有那么一丟丟死板半夷，好吧，那我們就給它搞幾個插值器不就可以里迅细，我這里添加了幾個巫橄，然后隨機的設(shè)置一個，代碼如下：

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

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

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

image

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

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);
    }

    /**
     * 要設(shè)置圖片的大小彩倚，必須在 addLoveView 之前調(diào)用
     *
     * @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);

        //設(shè)置 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();
        //愛心出現(xiàn)的動畫
        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 ，然后設(shè)置一下愛心圖片的大小蜻直，最后調(diào)用 addLoveView() 即可盯质。你可以在主頁面設(shè)置一個 Button袁串，通過按鈕控制愛心的添加，這都不是事呼巷。