Android ViewAnimator 实现添加购物车的动画特效

今天抽空实现了运用Path中的quadTo函数绘制“二阶贝塞尔曲线”，也就是我们想要实现的“添加购物车的动画特效”,话不多说，上刺刀，干！

添加购物车.gif

我们需要在app的build.gradle中添加我们所需的ViewAnimator：
compile 'com.github.florent37:viewanimator:1.0.5'

布局我们的XML，一定要用相对布局来排版界面，不然效果会有差池

创建我们的circle_orange.xml，用来实现“贝塞尔曲线”的女主角

创建我们的AnimUtils类，用来实现动画的主要代码

public class AnimUtils {
    public static void AddToShopAnim(View fromView, View ToView, 
                                     Context context, final RelativeLayout mainView) {
        int[] fromLoc = new int[2];
        int[] ToLoc = new int[2];
        fromView.getLocationInWindow(fromLoc);//获取起始控件在其父窗口中的坐标位置
        ToView.getLocationInWindow(ToLoc);//获取结束控件在其父窗口中的坐标位置
        //绘制移动的路径 方便后面ViewAnimator中引用
        Path path = new Path();
        path.moveTo(fromLoc[0], fromLoc[1]-300);
        path.quadTo(ToLoc[0], fromLoc[1], ToLoc[0]+100, ToLoc[1]-300);
        //创建移动的控件
        final TextView textView = new TextView(context);
        textView.setBackgroundResource(R.drawable.circle_orange);
        textView.setText("1");
        textView.setTextColor(Color.WHITE);
        textView.setGravity(Gravity.CENTER);
        //将创建好的控件添加到主界面中
        RelativeLayout.LayoutParams lp =
                new RelativeLayout.LayoutParams(dip2px(context,30),dip2px(context,30));
        mainView.addView(textView,lp);
        //ViewAnimator动画的启动实现
        ViewAnimator.animate(textView).path(path).alpha(250,0).rotation(-360)
                .accelerate().duration(500).onStop(new AnimationListener.Stop() {
            @Override
            public void onStop() {
                mainView.removeView(textView);
            }
        }).start();
    }

    public static int dip2px(Context context, double d) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (d * scale + 0.5f);
    }
}

调用AnimUtils类

/**
 * add        起始控件(加号)
* shop        结束控件(购物车)
* Content     上下文对象
* cl          主布局(xml中的main)
*/
AnimUtils.AddToShopAnim(add,shop,MainActivity.this,cl);

到这里，我们就实现了添加购物车的贝塞尔曲线~~~~

Path常用方法解析：
//绘制直线，x：终点x坐标值，y：终点y坐标值
lineTo(float x, float y)
//移动画笔，x：终点x坐标值，y：终点y坐标值
moveTo(float x, float y)
//绘制二阶贝塞尔曲线，控制点坐标：(x1,y1)，终点坐标：(x2,y2)
quadTo(float x1, float y1, float x2, float y2)
//绘制三阶贝塞尔曲线，其中控制点1坐标为(x1,y1)，控制点2坐标为(x2,y2)，终点坐标为(x3,y3)
cubicTo(float x1, float y1, float x2, float y2,float x3, float y3)

参考来源：

Path常用方法
ViewAnimator 特效参考