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

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

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

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:id="@+id/llayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_centerVertical="true"
        android:gravity="right">
        <ImageView
            android:id="@+id/iv_sub"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:alpha="0"
            android:padding="2dp"
            android:src="@drawable/yp"/>
        <TextView
            android:id="@+id/tv_count"
            android:layout_width="wrap_content"
            android:layout_height="32dp"
            android:layout_marginLeft="8dp"
            android:alpha="0"
            android:gravity="center"
            android:text="1"
            android:textSize="22sp"
            />
        <ImageView
            android:id="@+id/iv_add"
            android:layout_width="wrap_content"
            android:layout_height="32dp"
            android:layout_gravity="right"
            android:layout_marginLeft="8dp"
            android:alpha="100"
            android:padding="2dp"
            android:src="@drawable/yn"/>
    </LinearLayout>
    <ImageView
        android:id="@+id/iv_shop"
        android:layout_width="65dp"
        android:layout_height="65dp"
        android:src="@drawable/shop_car_empty"
        android:layout_alignParentBottom="true"/>
</RelativeLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#E9967A"/>
    <size
        android:width="42dp"
        android:height="42dp"/>
</shape>

创建我们的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 特效参考