贝塞尔曲线（Bezier）之花束直播爱心点赞动画效果

博主声明：

转载请在开头附加本文链接及作者信息，并标记为转载。本文由博主威威喵原创，请多支持与指教。

本文首发于此博主：威威喵 | 博客主页：https://blog.csdn.net/smile_running

上一次写了一篇关于爱心点赞曲线动画效果的文章，查看请点击：贝塞尔曲线（Bezier）之爱心点赞曲线动画效果。其实现的效果也太差强人意了，不过作为小试牛刀，我们算是对贝塞尔曲线有了一个认识，这前面一篇的铺垫下，我们继续对其展示的效果进行加强，所以就有了这样的效果。

我们先来看看这次实现的效果图：

image

其实，这个效果也和上一篇那个差不了太多，但是实现的代码就区别大了。上一次我使用的是纯自定义 View 的方式，在执行动画的时候自己开的子线程去改变它的坐标值，虽然效果也还行，但是这种方式并不可取，而且我的贝塞尔曲线的路径每设置随机数，它都往同一个方向走，效果不佳，与上面做一个对比。

image

来看一下这一次效果的实现思路，首先要继承自父容器，我们将 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);

这上面都没什么难度，我就一笔带过了。关键来看贝塞尔曲线路径的计算方式。首先，来看看我画的这张图：

image

从上面的图中我们看以看出，橙色的就是爱心的曲线路径，在上面我标注了 p1 p2 p3 p4 这四个点，它是我们实现这个效果最关键的一步。从这四个点的位置看，很容易就可以计算出它的坐标。

p4 点 x 坐标是控件的宽度，其值是随机的，并且要相应的减去图片的宽度，y 坐标就是 0

p3 点 x 同上，y 坐标是控件高度的一半，也是随机值

p2 点 x 同上，y 坐标是控件高度的一半固定值，然后再加上高度的一半的随机值

p1 点 x 是固定的，控件宽度 /2 减去图片的宽度 /2，y坐标就是控件高度减去图片高度

好了，已经对这四个点的坐标计算出来了，接下来就是将这四个点的坐标套入三阶贝塞尔曲线公式里面，公式如下：

image

这个应该谁都会吧，不过要在哪里使用这个公式，这才是问题的关键。这里直接说明，我们要实现一个 TypeEvalutor 接口，它需要一个泛型，那个我们就传入一个 Point 类，通过套入贝塞尔曲线公式的计算，我们就可以得到曲线上的每一个点，然后它会返回给我们，注意：这里传入的是 p2 p3 控制点，代码如下：

    public class LoveBezierTypeEvaluator implements TypeEvaluator {

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

这样就可以看到我们的曲线动画效果，上面的代码是将两个动画放在一起顺序的执行，效果如下图：

image

那么至此，我们就简单的实现了这个贝塞尔曲线点赞的动画效果了，不过这样的话，这个爱心都飘到了上面，我们应该进一步对其进行优化，让爱心逐渐消失才行，那样效果更佳。

做法就是监听动画事件，等到动画结束时候，直接移除 ImageView 即可，直接上代码：

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

那么这样做的话，效果好多了，看看吧

image

到这里的话，好像每一个爱心的移动速率都是一样的，感觉有那么一丢丢死板，好吧，那我们就给它搞几个插值器不就可以里，我这里添加了几个，然后随机的设置一个，代码如下：

        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 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 {

        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）之花束直播爱心点赞动画效果

你可能感兴趣的:(贝塞尔曲线（Bezier）之花束直播爱心点赞动画效果)