2016-11-9(仿外卖软件的点餐加购物车动画)

前几天看了别人做的一个启动动画,于是自己动手做了一个类似的,先看下效果:

2016-11-9(仿外卖软件的点餐加购物车动画)_第1张图片
send.gif

这个原理; 就是一个自定义属性的属性动画,通过确定起点,终点,和控制点,三个点确定好后,利用贝塞尔曲线的公式,计算出View的坐标,然后不断平移,最后绘制了这个一个曲线运动。

自定义属性动画,请看这里:http://blog.csdn.net/cxmscb/article/details/52485878
OK,代码量不大,看代码:

public void init() {

        // iv 就是我屏幕右下角的那朵花
        iv = (ImageView) findViewById(R.id.iv);
        //赠送鲜花的数量
        num = (TextView) findViewById(R.id.num);

        WindowManager wm = this.getWindowManager();
        mWidth = wm.getDefaultDisplay().getWidth();

        iv.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                iv.getViewTreeObserver().removeOnGlobalLayoutListener(this);

                mEndX = iv.getX();
                mEndY = iv.getY();
                mPath1.moveTo(startX, startY);//重置起点的路径
                mPath1.quadTo(mWidth / 2 + 200, -120, mEndX, mEndY);
            }
        });

        mPath1= new ViewPath();
        //创建一个ImageView,用于做抛物线曲线运动,一开始是隐藏的
        imageView = new ImageView(this);
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        imageView.setImageResource(R.mipmap.flowers);
        addContentView(imageView, params);
        imageView.setVisibility(View.INVISIBLE);
    }

然后当点击按钮的时候,开始做动画:

    public void send(View view) {
        if(imageView.getVisibility() == View.INVISIBLE){
            imageView.setVisibility(View.VISIBLE);
        }

        ObjectAnimator animator = ObjectAnimator.ofObject(new MainActivity.ViewObj(imageView), "viewLoc", new ViewPathEvaluator(), redPath1.getPoints().toArray());
        animator.setDuration(1000);

        animator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                //动画结束的时候增加view
                num.setText((Integer.parseInt(num.getText().toString()) + 1) + "");

            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        animator.start();
    }

    class ViewObj {
        private ImageView target;

        public ViewObj(ImageView target) {
            this.target = target;

        }
        public void setViewLoc(ViewPoint newLoc) {
            target.setTranslationX(newLoc.x);
            target.setTranslationY(newLoc.y);
        }
    }

最后奉上源码地址:
github地址:https://github.com/xuqian1994/MyBen

你可能感兴趣的:(2016-11-9(仿外卖软件的点餐加购物车动画))