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

博主声明:

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

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

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

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

贝塞尔曲线(Bezier)之花束直播爱心点赞动画效果_第1张图片
image

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

贝塞尔曲线(Bezier)之花束直播爱心点赞动画效果_第2张图片
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);

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

贝塞尔曲线(Bezier)之花束直播爱心点赞动画效果_第3张图片
image

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

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

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

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

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

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

贝塞尔曲线(Bezier)之花束直播爱心点赞动画效果_第4张图片
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();
    }

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

贝塞尔曲线(Bezier)之花束直播爱心点赞动画效果_第5张图片
image

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

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

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

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

贝塞尔曲线(Bezier)之花束直播爱心点赞动画效果_第6张图片
image

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

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

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

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

贝塞尔曲线(Bezier)之花束直播爱心点赞动画效果_第7张图片
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)之花束直播爱心点赞动画效果)