贝塞尔曲线之购物车动画效果.docx

1、贝塞尔曲线之购物车动画效果贝塞尔曲线之购物车动画效果Question贝塞尔曲线是什么？贝塞尔曲线可以做什么?怎么做？What is it ?贝塞尔曲线在XX定义是贝塞尔曲线(Bzier curve)，又称 贝兹 曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。Usage贝塞尔曲线根据不同点实现不同动态效果：一阶贝塞尔曲线（两点），绘制成一条直线看了上面贝塞尔曲线不同点不同效果后，相信大家都清楚贝塞尔曲线能干什么？没错，贝塞尔曲线能造高逼格动画就笔者目前了解的采用贝塞尔曲线实现的知名开源项目有：QQ拖拽清除效果纸飞机刷新动画滴油刷新动画波浪动画到此大家是不是很兴奋，想更多了解如何造一个高逼

2、格贝塞尔曲线动画。接下来我就给大家讲述如何造一个基于贝塞尔曲线实现的购物车动画，大家擦亮眼睛啦How to do it ?思路确定动画起终点在起终点之间使用二次贝塞尔曲线填充起终点之间点的轨迹设置属性动画，ValueAnimator插值器，获取中间点的坐标将执行动画控件的x、y坐标设为上面得到的中间点坐标开启属性动画当动画结束时的操作知识点Android中提供了绘制一阶、二阶、三阶的接口：一阶接口：public void lineTo(float x,float y)二阶接口：public void quadTo(float x1, float y1, float x2, float y2)三

3、阶接口：public void cubicTo(float x1, float y1, float x2, float y2, float x3, float y3)PathMeasure使用getLength()理解 boolean getPosTan(float distance, float pos, float tan)如何获取控件在屏幕中的绝对坐标int location = new int2; view.getLocationInWindow(location); 得到view在屏幕中的绝对坐标。理解属性动画插值器ValueAnimatorCode首先写购物车布局xml，代码如下：

4、html view plain copy 在CODE上查看代码片派生到我的代码片 android:id=+id/rly_bezier_curve_shopping_cart android:layout_width=match_parent android:layout_height=match_parent android:paddingBottom=dimen/activity_vertical_margin android:paddingLeft=dimen/activity_horizontal_margin android:paddingRight=dimen/activity_ho

5、rizontal_margin android:paddingTop=dimen/activity_vertical_margin 然后写购物车适配器、实体类，代码如下：java view plain copy 在CODE上查看代码片派生到我的代码片/* * className: GoodsAdapter * classDescription: 购物车商品适配器 * author: leibing * createTime: 2016/09/28 */ public class GoodsAdapter extends BaseAdapter / 数据源（购物车商品图片） private Ar

6、rayList mData; / 布局 private LayoutInflater mLayoutInflater; / 回调监听 private CallBackListener mCallBackListener; /* * 构造函数 * author leibing * createTime 2016/09/28 * lastModify 2016/09/28 * param context 上下文 * param mData 数据源（购物车商品图片） * return */ public GoodsAdapter(Context context, ArrayList mData) m

7、LayoutInflater = LayoutInflater.from(context); this.mData = mData; Override public int getCount() return mData != null ? mData.size(): 0; Override public Object getItem(int i) return mData != null ? mData.get(i): null; Override public long getItemId(int i) return i; Override public View getView(int

8、i, View view, ViewGroup viewGroup) ViewHolder viewHolder; if (view = null) view = mLayoutInflater.inflate(R.layout.adapter_shopping_cart_item, null); viewHolder = ew ViewHolder(view); view.setTag(viewHolder); else / 复用ViewHolder viewHolder = (ViewHolder) view.getTag(); / 更新UI if (i mData.size() view

9、Holder.updateUI(mData.get(i); return view; /* * className: ViewHolder * classDescription: 商品ViewHolder * author: leibing * createTime: 2016/09/28 */ class ViewHolder / 显示商品图片 private ImageView mShoppingCartItemIv; /* * 构造函数 * author leibing * createTime 2016/09/28 * lastModify 2016/09/28 * param vie

10、w 视图 * return */ public ViewHolder(View view) / findView mShoppingCartItemIv=ImageView) view.findViewById(R.id.iv_shopping_cart_item); / onClick view.findViewById(R.id.tv_shopping_cart_item).setOnClickListener( new View.OnClickListener() Override public void onClick(View view) if (mShoppingCartItemI

11、v != null & mCallBackListener != null) mCallBackListener.callBackImg(mShoppingCartItemIv); ); /* * 更新UI * author leibing * createTime 2016/09/28 * lastModify 2016/09/28 * param goods 商品实体对象 * return */ public void updateUI(GoodsModel goods) if (goods != null & goods.getmGoodsBitmap() != null & mShop

12、pingCartItemIv != null) mShoppingCartItemIv.setImageBitmap(goods.getmGoodsBitmap(); /* * 设置回调监听 * author leibing * createTime 2016/09/28 * lastModify 2016/09/28 * param mCallBackListener 回调监听 * return */ public void setCallBackListener(CallBackListener mCallBackListener) this.mCallBackListener = mCa

13、llBackListener; /* * interfaceName: CallBackListener * interfaceDescription: 回调监听 * author: leibing * createTime: 2016/09/28 */ public interface CallBackListener void callBackImg(ImageView goodsImg); 然后写添加数据源以及设置适配器，代码如下：java view plain copy 在CODE上查看代码片派生到我的代码片/ 购物车父布局 private RelativeLayout mShoppi

14、ngCartRly; / 购物车列表显示 private ListView mShoppingCartLv; / 购物数目显示 private TextView mShoppingCartCountTv; / 购物车图片显示 private ImageView mShoppingCartIv; / 购物车适配器 private GoodsAdapter mGoodsAdapter; / 数据源（购物车商品图片） private ArrayList mData; / 贝塞尔曲线中间过程点坐标 private float mCurrentPosition = new float2; / 路径测量

15、private PathMeasure mPathMeasure; / 购物车商品数目 private int goodsCount = 0; Override protected void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); / findView mShoppingCartLv = (ListView) findViewById(R.id.lv_bezier_curve_shopping_cart); mS

16、hoppingCartCountTv = (TextView) findViewById(R.id.tv_bezier_curve_shopping_cart_count); mShoppingCartRly = (RelativeLayout) findViewById(R.id.rly_bezier_curve_shopping_cart); mShoppingCartIv = (ImageView) findViewById(R.id.iv_bezier_curve_shopping_cart); / 是否显示购物车商品数目 isShowCartGoodsCount(); / 添加数据源

17、 addData(); / 设置适配器 setAdapter(); /* * 设置适配器 * author leibing * createTime 2016/09/28 * lastModify 2016/09/28 * param * return */ private void setAdapter() / 初始化适配器 mGoodsAdapter = new GoodsAdapter(this, mData); / 设置适配器监听 mGoodsAdapter.setCallBackListener(new GoodsAdapter.CallBackListener() Override

18、 public void callBackImg(ImageView goodsImg) / 添加商品到购物车 addGoodsToCart(goodsImg); ); / 设置适配器 mShoppingCartLv.setAdapter(mGoodsAdapter); 接下来写最重要的一块，添加商品到购物车，代码如下：java view plain copy 在CODE上查看代码片派生到我的代码片/* * 添加商品到购物车 * author leibing * createTime 2016/09/28 * lastModify 2016/09/28 * param goodsImg 商品图

19、标 * return */ private void addGoodsToCart(ImageView goodsImg) / 创造出执行动画的主题goodsImg（这个图片就是执行动画的图片,从开始位置出发,经过一个抛物线（贝塞尔曲线）,移动到购物车里） final ImageView goods = new ImageView(this); goods.setImageDrawable(goodsImg.getDrawable(); RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(100, 100);

20、 mShoppingCartRly.addView(goods, params); / 得到父布局的起始点坐标（用于辅助计算动画开始/结束时的点的坐标） int parentLocation = ew int2; mShoppingCartRly.getLocationInWindow(parentLocation); / 得到商品图片的坐标（用于计算动画开始的坐标） int startLoc = new int2; goodsImg.getLocationInWindow(startLoc); / 得到购物车图片的坐标(用于计算动画结束后的坐标) int endLoc = new int2;

21、 mShoppingCartIv.getLocationInWindow(endLoc); / 开始掉落的商品的起始点：商品起始点-父布局起始点+该商品图片的一半 float startX = startLoc0 - parentLocation0 + goodsImg.getWidth() / 2; float startY = startLoc1 - parentLocation1 + goodsImg.getHeight() / 2; / 商品掉落后的终点坐标：购物车起始点-父布局起始点+购物车图片的1/5 float toX = endLoc0 - parentLocation0 +

22、mShoppingCartIv.getWidth() / 5; float toY = endLoc1 - parentLocation1; / 开始绘制贝塞尔曲线 Path path = new Path(); / 移动到起始点（贝塞尔曲线的起点） path.moveTo(startX, startY); / 使用二阶贝塞尔曲线：注意第一个起始坐标越大，贝塞尔曲线的横向距离就会越大，一般按照下面的式子取即可 path.quadTo(startX + toX) / 2, startY, toX, toY); / mPathMeasure用来计算贝塞尔曲线的曲线长度和贝塞尔曲线中间插值的坐标，如

23、果是true，path会形成一个闭环 mPathMeasure = new PathMeasure(path, false); / 属性动画实现（从0到贝塞尔曲线的长度之间进行插值计算，获取中间过程的距离值） ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, mPathMeasure.getLength(); valueAnimator.setDuration(500); / 匀速线性插值器 valueAnimator.setInterpolator(new LinearInterpolator(); valueAnimator.ad

24、dUpdateListener(new ValueAnimator.AnimatorUpdateListener() Override public void onAnimationUpdate(ValueAnimator animation) / 当插值计算进行时，获取中间的每个值， / 这里这个值是中间过程中的曲线长度（下面根据这个值来得出中间点的坐标值） float value = (Float) animation.getAnimatedValue(); / 获取当前点坐标封装到mCurrentPosition / boolean getPosTan(float distance, f

25、loat pos, float tan) ： / 传入一个距离distance(0=distance=getLength()，然后会计算当前距离的坐标点和切线，pos会自动填充上坐标，这个方法很重要。 / mCurrentPosition此时就是中间距离点的坐标值 mPathMeasure.getPosTan(value, mCurrentPosition, null); / 移动的商品图片（动画图片）的坐标设置为该中间点的坐标 goods.setTranslationX(mCurrentPosition0); goods.setTranslationY(mCurrentPosition1); ); / 开始执行动画 valueAnimator.start(); / 动画结束后的处理 valueAnimator.addListener(new Animator.AnimatorListener() Oride public void onAnimationStart(Animator animation)