自定义商品加入购物车动画

自定义加入购物车动画

最近有个加入购物车的动画需求,类似叮咚买菜的效果,先看效果

 

可以看到是图片裁剪成圆角,利用贝塞尔曲线,加入缩小旋转等动画效果

由于我的图片加载框架用的是glide,这里需要注意的是调用Glide Api不能错,不然无法进行bitmap裁剪,下面看代码

1.图片加载(Glide)

Glide.with(mActivity).load(listBean.getMainPicture()).asBitmap().into(holder.mIvIcon);

2.图片裁剪圆形加入贝塞尔动画

public static void shopCarAnimator(Activity activity, ImageView imageView,
                                      View cartView, final ViewGroup parentView,
                                      final OnAnimatorListener listener) {
        //第一步：
        //创造出执行动画的主题---imageView
        //代码new一个imageView，图片资源是上面的imageView的图片
        // (这个图片就是执行动画的图片，从开始位置出发，经过一个抛物线（贝塞尔曲线），移动到购物车里)
        if (activity == null || imageView == null || cartView == null || parentView == null) return;
        final ImageView goods = new ImageView(activity);

        Bitmap image = ((BitmapDrawable) imageView.getDrawable()).getBitmap();
        Drawable drawable = new BitmapDrawable(toRoundBitmap(image));
        goods.setImageDrawable(drawable);
        //设置RelativeLayout容器(这里必须设置RelativeLayout 设置LinearLayout动画会失效)
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(300, 300);
        //把动画view添加到动画层
        parentView.addView(goods, params);

        //第二步:
        //得到父布局的起始点坐标（用于辅助计算动画开始/结束时的点的坐标）
        int[] parentLocation = new int[2];
        //获取购买按钮的在屏幕的X、Y坐标（这也是动画开始的坐标）
        parentView.getLocationInWindow(parentLocation);
        int startLoc[] = new int[2];
        //获取商品图片在屏幕中的位置
        imageView.getLocationInWindow(startLoc);
        //得到购物车图片的坐标(用于计算动画结束后的坐标)
        int endLoc[] = new int[2];
        cartView.getLocationInWindow(endLoc);

        //第三步:
        //正式开始计算动画开始/结束的坐标
        //开始掉落的商品的起始点：商品起始点-父布局起始点+该商品图片的一半
        float startX = startLoc[0] - parentLocation[0] + imageView.getWidth() / 2;// 动画开始的X坐标
        float startY = startLoc[1] - parentLocation[1] + imageView.getHeight() / 2;//动画开始的Y坐标

        //商品掉落后的终点坐标：购物车起始点-父布局起始点+购物车图片的1/5
        float toX = endLoc[0] - parentLocation[0] - imageView.getWidth()/5;
        float toY = endLoc[1] - parentLocation[1];

        //第四步:
        //计算中间动画的插值坐标，绘制贝塞尔曲线
        Path path = new Path();
        //移动到起始点（贝塞尔曲线的起点）
        path.moveTo(startX, startY);
        //第一个起始坐标越大，贝塞尔曲线的横向距离就会越大 toX,toY:为终点
        path.quadTo((startX + toX) / 2, startY, toX, toY);
        final PathMeasure pathMeasure = new PathMeasure(path, false);
        //实现动画具体博客可参考 鸿洋大神的https://blog.csdn.net/lmj623565791/article/details/38067475
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, pathMeasure.getLength());
        AnimatorSet animSet = new AnimatorSet();
        //缩放
        ObjectAnimator anim1 = ObjectAnimator.ofFloat(goods, "scaleX", 1.0f, 0.2f).setDuration(400);
        ObjectAnimator anim2 = ObjectAnimator.ofFloat(goods, "scaleY", 1.0f, 0.2f).setDuration(400);
        //顺时针旋转360°
        ObjectAnimator anim3 = ObjectAnimator.ofFloat(goods, "rotation", 0f, 360f).setDuration(200);
        animSet.play(anim1).with(anim2).with(anim3).with(valueAnimator);
        //设置动画时间
        valueAnimator.setDuration(400);
        //LinearInterpolator补间器:它的主要作用是控制动画的变化速率
        valueAnimator.setInterpolator(new LinearInterpolator());

        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) { //更新动画
                float value = (Float) animation.getAnimatedValue();
                float[] currentPosition = new float[2];
                pathMeasure.getPosTan(value, currentPosition, null);
                goods.setTranslationX(currentPosition[0]);//改变了ImageView的X位置
                goods.setTranslationY(currentPosition[1]);//改变了ImageView的Y位置
            }
        });

        //第五步:
        animSet.start();

        //第六步:
        //对动画添加监听
        animSet.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                //onAnimationStart()方法会在动画开始的时候调用
            }

            //onAnimationEnd()方法会在动画结束的时候调用
            @Override
            public void onAnimationEnd(Animator animation) {
                //把移动的图片imageView从父布局里移除
                parentView.removeView(goods);
                if (listener != null) {
                    listener.onAnimationEnd(animation);
                }
            }

            @Override
            public void onAnimationCancel(Animator animation) {
                //onAnimationCancel()方法会在动画被取消的时候调用
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
                //onAnimationRepeat()方法会在动画重复执行的时候调用
            }
        });
    }

    public interface OnAnimatorListener {
        void onAnimationEnd(Animator animator);
    }

    /**
     * 转换图片成圆形
     *
     * @param bitmap 传入Bitmap对象
     * @return
     */
    public static Bitmap toRoundBitmap(Bitmap bitmap) {
        int width = bitmap.getWidth();
        int height = bitmap.getHeight();
        float roundPx;
        float left, top, right, bottom, dst_left, dst_top, dst_right, dst_bottom;
        if (width <= height) {
            roundPx = width / 2;
            left = 0;
            top = 0;
            right = width;
            bottom = width;
            height = width;
            dst_left = 0;
            dst_top = 0;
            dst_right = width;
            dst_bottom = width;
        } else {
            roundPx = height / 2;
            float clip = (width - height) / 2;
            left = clip;
            right = width - clip;
            top = 0;
            bottom = height;
            width = height;
            dst_left = 0;
            dst_top = 0;
            dst_right = height;
            dst_bottom = height;
        }

        Bitmap output = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = 0xff424242;
        final Paint paint = new Paint();
        final Rect src = new Rect((int) left, (int) top, (int) right, (int) bottom);
        final Rect dst = new Rect((int) dst_left, (int) dst_top, (int) dst_right, (int) dst_bottom);
        final RectF rectF = new RectF(dst);

        paint.setAntiAlias(true);// 设置画笔无锯齿

        canvas.drawARGB(0, 0, 0, 0); // 填充整个Canvas
        paint.setColor(color);

        // 以下有两种方法画圆,drawRounRect和drawCircle
        // canvas.drawRoundRect(rectF, roundPx, roundPx, paint);// 画圆角矩形，第一个参数为图形显示区域，第二个参数和第三个参数分别是水平圆角半径和垂直圆角半径。
        canvas.drawCircle(roundPx, roundPx, roundPx, paint);

        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(bitmap, src, dst, paint); //以Mode.SRC_IN模式合并bitmap和已经draw了的Circle

        return output;
    }

3.调用改方法传入指定参数即可

以上就是一个添加购物车动画完成啦,感谢各位看官~