自定义View之直播点赞效果


本文是看到红橙Darren 写的贝塞尔曲线 - 花束直播点赞效果后实现的,实现方式一样,你可直接查看原文 http://www.jianshu.com/p/12267d1a2d18,本文只是记录一下自己实现的步骤,效果如下,本文全部代码都已经上传github

点赞效果

看过程主要分为两步

  • 点击屏幕的时候随机添加图片到屏幕的右底部,有缩放和透明度变化的效果
  • 图片完全显示出来后,再沿着贝塞尔曲线进行移动,最主要的实现就是计算图片移动的位置

接下来我们一步步看怎么实现
首先我们创建GiftView类继承RelativeLayout,然后在初始化的时候添加3张图片,并在屏幕上放置一个imageview用于演示,代码如下:

 //初始化drawable,params
    private void init() {
        mDrawables = new Drawable[3];
        mDrawables[0] = getResources().getDrawable(R.mipmap.pl_blue);
        mDrawables[1] = getResources().getDrawable(R.mipmap.pl_red);
        mDrawables[2] = getResources().getDrawable(R.mipmap.pl_yellow);
        mDrawableWidth = mDrawables[0].getIntrinsicWidth();
        mDrawableHeight = mDrawables[0].getIntrinsicHeight();
        params = new LayoutParams(mDrawableWidth, mDrawableHeight);
        params.addRule(ALIGN_PARENT_BOTTOM, TRUE);
        params.addRule(ALIGN_PARENT_RIGHT, TRUE);
        params.setMargins(0, 0, 60, 60);//放置在屏幕的右下角
        //这里为了演示我们现在布局初始化的时候,放置一个imageview,颜色随机,设置点击屏幕出现点赞效果
        ImageView iv = new ImageView(getContext());
        iv.setLayoutParams(params);
        iv.setImageDrawable(mDrawables[mRandom.nextInt(mDrawables.length)]);
        addView(iv);
        this.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                addGiftIv();
            }
        });
    }

这里我们为了演示设置了全屏的点击事件,其中addGiftIv方法就是不断的往布局里面添加图片,并且设置动画效果,代码如下:

 //点击图片是添加imageview到布局中,并添加动画
    private void addGiftIv() {
        final ImageView giftIv = new ImageView(getContext());
        giftIv.setLayoutParams(params);
        giftIv.setImageDrawable(mDrawables[mRandom.nextInt(mDrawables.length)]);
        addView(giftIv);
        addAnimator(giftIv);//添加动画效果,动画分两部分,第一部分是产生图片时缩放和透明度,第二部是移动图片再进行透明度变化
    }

其中添加动画的方法addAnimator的代码如下:

 private void addAnimator(final ImageView iv) {
        //点击的时候,让图片经过放大,缩放效果,之后再开始沿着贝塞尔曲线的轨迹移动
        ObjectAnimator alpha = ObjectAnimator.ofFloat(iv, "alpha", 0.3f, 1f);
        ObjectAnimator scaleX = ObjectAnimator.ofFloat(iv, "scaleX", 0.2f, 1f);
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(iv, "scaleY", 0.2f, 1f);
        AnimatorSet set = new AnimatorSet();
        set.setDuration(100);
        set.playTogether(alpha, scaleX, scaleY);
        set.setTarget(iv);
        set.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                //设置贝塞尔曲线移动效果
                ValueAnimator va = getValueAnimator(iv);//第二部分动画
                va.start();
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        set.start();
    }

第一部分动画很简单,就是简单的属性动画,我们重点来看看第二部分的动画。首先图片的移动轨迹我们选择3阶的贝塞尔曲线,因为这个是比较接近现实的动画效果,而其移动轨迹公式为


从公式中可以看出,我们需要提供4个点,其中p0是起始点,我们选择是我们初始化时图片的位置,而p1因为移动轨迹向上的原因,自然需要在p0的上方,而p2在p1的上方,而终点p3则是屏幕的最上方0减去图片的高度,具体代码如下:

//初始化贝塞尔曲线的4个点
    private void initPointF() {
        p0 = new PointF(screenWidth - 60 - mDrawableWidth, screenHeight - 60 - mDrawableHeight);//起点是初始化时的点
        p1 = new PointF(mRandom.nextInt(screenWidth), mRandom.nextInt((int) p0.y));//第一个控制点必须要在起始点的上方
        p2 = new PointF(mRandom.nextInt(screenWidth), mRandom.nextInt((int) p1.y));//第二个控制点必须在第一个点的上方
        p3 = new PointF(mRandom.nextInt(screenWidth), -mDrawableHeight);//终点在屏幕的最顶部0-图片的高度
    }

有了这4个点我们就可以按公式来计算B(t)了,这个时候我们来自定义一个估值器来不断计算B(t),自定义的估值器可参考系统IntEvaluator的实现,具体代码如下:

/**
     *    自定义估值器计算图片移动的轨迹
     *    计算公式参考贝塞尔曲线3阶计算公式
     *    自定义估值器的方法可百度搜索
     *    其中估值器定义返回的结果为PointF
     */
    public class BezierEvaluator implements TypeEvaluator<PointF> {
        private PointF p1, p2;

        public BezierEvaluator(PointF p1, PointF p2) {
            this.p1 = p1;
            this.p2 = p2;
        }

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

            point.y = p0.y * (1 - t) * (1 - t) * (1 - t) //
                    + 3 * p1.y * t * (1 - t) * (1 - t)//
                    + 3 * p2.y * t * t * (1 - t)//
                    + p3.y * t * t * t;//
            return point;
        }
    }

然后看一下我们第二部动画的最终实现:

  BezierEvaluator bezierEvaluator = new BezierEvaluator(p1, p2);
        ValueAnimator va = ValueAnimator.ofObject(bezierEvaluator, p0, p3);
        va.setDuration(3000);
        va.setTarget(iv);
        va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                //改变imageview位置实现移动效果
                PointF point = (PointF) animation.getAnimatedValue();
                iv.setX(point.x);
                iv.setY(point.y);
                iv.setAlpha(1 - animation.getAnimatedFraction());
                //动画结束移除imageview
                if (animation.getAnimatedFraction() >= 1) {
                    removeView(iv);
                }
            }
        });

这样我们就实现了最终的效果,我把代码全部贴上,如果贴的不全大家可以去我github上查看,全部代码已经上传

/**
 * Created by liuyong
 * Data: 2017/8/8
 * Github:https://github.com/MrAllRight
 * 直播点赞view
 */

public class GiftView extends RelativeLayout {
    private Drawable[] mDrawables;//装载3中点赞图片,红黄蓝
    private int mDrawableWidth, mDrawableHeight;//图片的宽高
    private Random mRandom = new Random();
    private LayoutParams params;//为图片设置布局,位于屏幕的右|下
    private PointF p0, p1, p2, p3;//控制图片的移动轨迹,通过3阶贝塞尔曲线
    private int screenWidth, screenHeight;//屏幕宽高

    public GiftView(Context context) {
        super(context);
        init();
    }

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

    public GiftView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        screenHeight = h;
        screenWidth = w;
    }

    //初始化drawable,params
    private void init() {
        mDrawables = new Drawable[3];
        mDrawables[0] = getResources().getDrawable(R.mipmap.pl_blue);
        mDrawables[1] = getResources().getDrawable(R.mipmap.pl_red);
        mDrawables[2] = getResources().getDrawable(R.mipmap.pl_yellow);
        mDrawableWidth = mDrawables[0].getIntrinsicWidth();
        mDrawableHeight = mDrawables[0].getIntrinsicHeight();
        params = new LayoutParams(mDrawableWidth, mDrawableHeight);
        params.addRule(ALIGN_PARENT_BOTTOM, TRUE);
        params.addRule(ALIGN_PARENT_RIGHT, TRUE);
        params.setMargins(0, 0, 60, 60);//放置在屏幕的右下角
        //这里为了演示我们现在布局初始化的时候,放置一个imageview,颜色随机,设置点击屏幕出现点赞效果
        ImageView iv = new ImageView(getContext());
        iv.setLayoutParams(params);
        iv.setImageDrawable(mDrawables[mRandom.nextInt(mDrawables.length)]);
        addView(iv);
        this.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                addGiftIv();
            }
        });
    }

    //点击图片是添加imageview到布局中,并添加动画
    private void addGiftIv() {
        final ImageView giftIv = new ImageView(getContext());
        giftIv.setLayoutParams(params);
        giftIv.setImageDrawable(mDrawables[mRandom.nextInt(mDrawables.length)]);
        addView(giftIv);
        addAnimator(giftIv);//添加动画效果,动画分两部分,第一部分是产生图片时缩放和透明度,第二部是移动图片再进行透明度变化
    }

    private void addAnimator(final ImageView iv) {
        //点击的时候,让图片经过放大,缩放效果,之后再开始沿着贝塞尔曲线的轨迹移动
        ObjectAnimator alpha = ObjectAnimator.ofFloat(iv, "alpha", 0.3f, 1f);
        ObjectAnimator scaleX = ObjectAnimator.ofFloat(iv, "scaleX", 0.2f, 1f);
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(iv, "scaleY", 0.2f, 1f);
        AnimatorSet set = new AnimatorSet();
        set.setDuration(100);
        set.playTogether(alpha, scaleX, scaleY);
        set.setTarget(iv);
        set.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                //设置贝塞尔曲线移动效果
                ValueAnimator va = getValueAnimator(iv);//第二部分动画
                va.start();
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        set.start();
    }

    //初始化贝塞尔曲线的4个点
    private void initPointF() {
        p0 = new PointF(screenWidth - 60 - mDrawableWidth, screenHeight - 60 - mDrawableHeight);//起点是初始化时的点
        p1 = new PointF(mRandom.nextInt(screenWidth), mRandom.nextInt((int) p0.y));//第一个控制点必须要在起始点的上方
        p2 = new PointF(mRandom.nextInt(screenWidth), mRandom.nextInt((int) p1.y));//第二个控制点必须在第一个点的上方
        p3 = new PointF(mRandom.nextInt(screenWidth), -mDrawableHeight);//终点在屏幕的最顶部0-图片的高度
    }


    /**
     *    自定义估值器计算图片移动的轨迹
     *    计算公式参考贝塞尔曲线3阶计算公式
     *    自定义估值器的方法可百度搜索
     *    其中估值器定义返回的结果为PointF
     */
    public class BezierEvaluator implements TypeEvaluator<PointF> {
        private PointF p1, p2;

        public BezierEvaluator(PointF p1, PointF p2) {
            this.p1 = p1;
            this.p2 = p2;
        }

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

            point.y = p0.y * (1 - t) * (1 - t) * (1 - t) //
                    + 3 * p1.y * t * (1 - t) * (1 - t)//
                    + 3 * p2.y * t * t * (1 - t)//
                    + p3.y * t * t * t;//
            return point;
        }
    }

    private ValueAnimator getValueAnimator(final ImageView iv) {
        initPointF();
        BezierEvaluator bezierEvaluator = new BezierEvaluator(p1, p2);
        ValueAnimator va = ValueAnimator.ofObject(bezierEvaluator, p0, p3);
        va.setDuration(3000);
        va.setTarget(iv);
        va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                //改变imageview位置实现移动效果
                PointF point = (PointF) animation.getAnimatedValue();
                iv.setX(point.x);
                iv.setY(point.y);
                iv.setAlpha(1 - animation.getAnimatedFraction());
                //动画结束移除imageview
                if (animation.getAnimatedFraction() >= 1) {
                    removeView(iv);
                }
            }
        });
        return va;
    }

}

github地址:https://github.com/MrAllRight/BezierView/

推荐阅读更多精彩内容