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