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

我就是我 2021-11-10 15:36 378阅读 0赞

> **博主声明：**
> 
> 转载请在开头附加本文链接及作者信息，并标记为转载。本文由博主 [威威喵][Link 1] 原创，请多支持与指教。
> 
> [本文首发于此][Link 2] [博主][Link 3]：[威威喵][Link 1] [|][Link 4] [博客主页][Link 5]：[https://blog.csdn.net/smile\_running][Link 5]

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

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

![20190803150957846.gif][]

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

![20190731142108538.gif][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtaWxlX1J1bm5pbmc_size_16_color_FFFFFF_t_70][]

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

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

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

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

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

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

![20190803143057740.png][]

这个应该谁都会吧，不过要在哪里使用这个公式，这才是问题的关键。这里直接说明，我们要实现一个 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();
        }

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

![20190803144116149.gif][]

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

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

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

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

![20190803145313291.gif][]

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

mInterpolator = new Interpolator[]{
                    new AccelerateInterpolator(), new AccelerateDecelerateInterpolator(), new DecelerateInterpolator(), new LinearInterpolator()
            };
    
            bezierAnimator.setInterpolator(mInterpolator[mRandom.nextInt(mInterpolator.length)]);

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

![20190803150824919.gif][]

好吧，整个效果的完整代码如下：

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，通过按钮控制爱心的添加，这都不是事。

[Link 1]: https://me.csdn.net/smile_Running
[Link 2]: https://blog.csdn.net/smile_Running/column/info/27169
[Link 3]: https://blog.csdn.net/smile_Running/column/info/27335
[Link 4]: https://blog.csdn.net/smile_Running/column/info/42011
[Link 5]: https://blog.csdn.net/smile_running
[Bezier]: https://blog.csdn.net/smile_Running/article/details/98170645
[20190803150957846.gif]: /images/20211109/9084ed0665c04de786058b5a9a227f55.png
[20190731142108538.gif]: /images/20211109/df34979b926c4af8850e68beda6e35af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtaWxlX1J1bm5pbmc_size_16_color_FFFFFF_t_70]: /images/20211109/5e980c9ad0544ac58e48cd0a963e593f.png
[20190803143057740.png]: /images/20211109/cf3cbbf0109f4137ab7cdebf431e0c1e.png
[20190803144116149.gif]: /images/20211109/237853eaaee7424cb3d98f2eeafe51b5.png
[20190803145313291.gif]: /images/20211109/b1c444fdf01041c9ad765067b32321b0.png
[20190803150824919.gif]: /images/20211109/9f7b4a293574485f93b0b99387f7cefd.png