动画效果第一弹——购物车添加商品特效

(一)引言

以前在饿了么上面订餐的时候，曾经看到过这么一个特效，就是将商品加入订单时，会有一个小球呈抛物线状落入购物车中，然后购物车中的数量会改变。具体的效果如下图。

效果很简单 ，就是一个抛物线的动画，那么我们应该用什么技术来实现呢？想了想，动画层是不个错的选择！下面开始分析及实现

（二）分析

当点击购买按钮的时候，我们在布局上加入一个动画层，然后让小球在动画层上做抛物线运动，就可实现上图中的效果了。
说到做抛物线运动，当然需要数学上的一点小知识。 抛物线的原理很简单，其实就是X轴方向保持匀速线性运动，而Y轴做加速度运动就好了。
在android的动画中，可以设置Interpolator属性。 Interpolator 被用来修饰动画效果，定义动画的变化率，可以使存在的动画效果accelerated(加速)，decelerated(减速),repeated(重复),bounced(弹跳)等。而我们需要用到的就是LinearInterpolator线性匀速运动和AccelerateInterpolator加速度运动效果。
所以我们只要给小球分别设置X和Y方向上的TranslateAnimation平移动画，在设置相应的Interpolator ，即可实现抛物线效果。

（三）代码实现

关于布局文件和ListView就不必多说了 在最后提供的源码中都可以看到，我们这里主要讲解在动画层上实现抛物线动画的功能。

    holder.buyBtn.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
        // 用来存储按钮的在屏幕的X、Y坐标
        int[] startLocation = new int[2];
// 获取购买按钮的在屏幕的X、Y坐标（这也是动画开始的坐标）      
        v.getLocationInWindow(startLocation);
        //设置小球的图片
        ball = new ImageView(mContext);
        ball.setImageResource(R.drawable.sign);
        setAnim(ball, startLocation);// 开始执行动画
                }
            });

这段代码很简单，就是设置小球的初始坐标，然后开始执行动画。
下面是执行动画的函数。

private void setAnim(final View v, int[] startLocation) {
        anim_mask_layout = null;
        //创建动画层
        anim_mask_layout = createAnimLayout();
        //把动画小球添加到动画层
        anim_mask_layout.addView(v);
    final View view = addViewToAnimLayout(anim_mask_layout, v,startLocation);
        // 存储动画结束位置的X、Y坐标
        int[] endLocation = new int[2];
        // shopCart是购物车
        shopCart.getLocationInWindow(endLocation);

        // 计算位移
        // 动画位移的X坐标
        int endX = 0 - startLocation[0] + 40;
        // 动画位移的y坐标
        int endY = endLocation[1] - startLocation[1];
        //设置X方向上的平移动画
        TranslateAnimation translateAnimationX = new TranslateAnimation(0,
                endX, 0, 0);
        translateAnimationX.setInterpolator(new LinearInterpolator());
        // 动画重复执行的次数
        translateAnimationX.setRepeatCount(0);
        translateAnimationX.setFillAfter(true);
       //设置Y方向上的平移动画
        TranslateAnimation translateAnimationY = new TranslateAnimation(0, 0,
                0, endY);
        translateAnimationY.setInterpolator(new AccelerateInterpolator());
        // 动画重复执行的次数
        translateAnimationY.setRepeatCount(0);
        translateAnimationX.setFillAfter(true);

        AnimationSet set = new AnimationSet(false);
        set.setFillAfter(false);
        set.addAnimation(translateAnimationY);
        set.addAnimation(translateAnimationX);
        set.setDuration(800);// 动画的执行时间
        view.startAnimation(set);
        // 动画监听事件
        set.setAnimationListener(new AnimationListener() {
            // 动画的开始
            @Override
            public void onAnimationStart(Animation animation) {
                v.setVisibility(View.VISIBLE);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
                // TODO Auto-generated method stub
            }

            // 动画的结束
            @Override
            public void onAnimationEnd(Animation animation) {
                v.setVisibility(View.GONE);
                buyNum++;//让购买数量加1
                buyNumView.setText(buyNum + "");//
                buyNumView.setBadgePosition(BadgeView.POSITION_TOP_RIGHT);
                buyNumView.show();
            }
        });

    }

buyNumView是github上的一个组件BadgeView.就是那个购物车右上角显示数字的标签，在QQ和微信上都能看到这玩意。
下面是将小球添加到动画层的代码

private View addViewToAnimLayout(final ViewGroup parent, final View view,
            int[] location) {
        int x = location[0];
        int y = location[1];
        LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT,
                LinearLayout.LayoutParams.WRAP_CONTENT);
        lp.leftMargin = x;
        lp.topMargin = y;
        view.setLayoutParams(lp);
        return view;
    }

主要的实现就是这样了。大家也可以根据这个案例做一些改进，就可以做出其他的效果。
各位如果喜欢的话，可以留个言 点个赞~！

源码送上