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

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

作者: 糖葫芦_倩倩 | 来源:发表于2016-11-09 16:00 被阅读88次

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

    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(仿外卖软件的点餐加购物车动画)

          本文链接:https://www.haomeiwen.com/subject/ohbzuttx.html