贝塞尔曲线之购物车动画效果
vyqewecberu372
8年前
<h3><strong>question</strong></h3> <ul> <li>贝塞尔曲线是什么？</li> <li>贝塞尔曲线可以做什么?</li> <li>怎么做？</li> </ul> <h3><strong>what is it？</strong></h3> <p>贝塞尔曲线在百度定义是贝塞尔曲线(Bézier curve)，又称 <a href="/misc/goto?guid=4959717884613301415" rel="nofollow,noindex">贝兹</a> 曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/b2fabe1484086f7016dc0793c27c06c5.jpg"></p> <p style="text-align:center">1132780-253900d649118aa0.jpg</p> <h3><strong>do what?</strong></h3> <p>贝塞尔曲线根据不同点实现不同动态效果：</p> <ul> <li>一阶贝塞尔曲线（两点），绘制成一条直线</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/decacf1fab7979ee131e5c4ba38bf170.gif"></p> <p style="text-align:center">1359207897_7842.gif</p> <ul> <li>二阶贝塞尔曲线（三点）</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/e6b8f15f391aa4d0c5554ddbd3781ca7.gif"></p> <p style="text-align:center">1359208080_9518.gif</p> <ul> <li>三阶贝塞尔曲线（四点）</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/d9b502148301369d0a502583c447a54c.gif"></p> <p style="text-align:center">1359208177_9516.gif</p> <ul> <li>四阶贝塞尔曲线（五点）</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/a2882c68b27cb2326d64d067946b9afe.gif"></p> <p style="text-align:center">20160402092908480.gif</p> <ul> <li>五阶贝塞尔曲线（六点）</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/f3fa4580aee247576f1764efe2844982.gif"></p> <p style="text-align:center">20160405093717253.gif</p> <p>看了上面贝塞尔曲线不同点不同效果后，相信大家都清楚贝塞尔曲线能干什么？没错，贝塞尔曲线能造高逼格动画</p> <p>就笔者目前了解的采用贝塞尔曲线实现的知名开源项目有：</p> <ul> <li> <p>QQ拖拽清除效果</p> </li> <li> <p>纸飞机刷新动画</p> </li> <li> <p>滴油刷新动画</p> </li> <li> <p>波浪动画</p> </li> </ul> <p>到此大家是不是很兴奋，想更多了解如何造一个高逼格贝塞尔曲线动画。接下来我就给大家讲述如何造一个基于贝塞尔曲线实现的购物车动画，大家擦亮眼睛啦~~</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/38634624748f7f9d77ea148977f15218.jpg"></p> <p style="text-align:center">1132780-2d7d1306d1b86b65.jpg</p> <h3><strong>how to do it</strong></h3> <p><strong>思路</strong></p> <ul> <li> <p>确定动画起终点</p> </li> <li> <p>在起终点之间使用二次贝塞尔曲线填充起终点之间点的轨迹</p> </li> <li> <p>设置属性动画，ValueAnimator插值器，获取中间点的坐标</p> </li> <li> <p>将执行动画控件的x、y坐标设为上面得到的中间点坐标</p> </li> <li> <p>开启属性动画</p> </li> <li> <p>当动画结束时的操作</p> </li> </ul> <p><strong>知识点</strong></p> <ul> <li>Android中提供了绘制一阶、二阶、三阶的接口： <ul> <li>一阶接口： <pre> <code class="language-java">public void lineTo(float x,float y)</code></pre> </li> <li>二阶接口： <pre> <code class="language-java">public void quadTo(float x1, float y1, float x2, float y2)</code></pre> </li> <li>三阶接口： <pre> <code class="language-java">public void cubicTo(float x1, float y1, float x2, float y2, float x3, float y3)</code></pre> </li> </ul> </li> <li> <p>PathMeasure使用</p> <ul> <li> <p>getLength()</p> </li> <li> <p>理解 boolean getPosTan(float distance, float[] pos, float[] tan)</p> </li> </ul> </li> <li> <p>如何获取控件在屏幕中的绝对坐标</p> <ul> <li> <p>int[] location = new int[2]; view.getLocationInWindow(location); 得到view在屏幕中的绝对坐标。</p> </li> </ul> </li> <li> <p>理解属性动画插值器ValueAnimator</p> </li> </ul> <h3><strong>code</strong></h3> <p>首先写购物车布局xml，代码如下：</p> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 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_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin"> <FrameLayout android:id="@+id/fly_bezier_curve_shopping_cart" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:paddingRight="30dp" android:layout_alignParentStart="true"> <ImageView android:id="@+id/iv_bezier_curve_shopping_cart" android:layout_width="40dp" android:layout_height="40dp" android:layout_gravity="right" android:src="@drawable/menu_shop_car_selected" /> <TextView android:id="@+id/tv_bezier_curve_shopping_cart_count" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@color/white" android:background="@drawable/corner_view" android:text="0" android:layout_gravity="right"/> </FrameLayout> <ListView android:id="@+id/lv_bezier_curve_shopping_cart" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@+id/fly_bezier_curve_shopping_cart"/> </RelativeLayout></code></pre> <p>然后写购物车适配器、实体类，代码如下：</p> <pre> <code class="language-java">/** * @className: GoodsAdapter * @classDescription: 购物车商品适配器 * @author: leibing * @createTime: 2016/09/28 */ public class GoodsAdapter extends BaseAdapter{ // 数据源（购物车商品图片） private ArrayList<GoodsModel> 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<GoodsModel> mData){ mLayoutInflater = 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 i, View view, ViewGroup viewGroup) { ViewHolder viewHolder; if (view == null){ view = mLayoutInflater.inflate(R.layout.adapter_shopping_cart_item, null); viewHolder = new ViewHolder(view); view.setTag(viewHolder); }else { // 复用ViewHolder viewHolder = (ViewHolder) view.getTag(); } // 更新UI if (i < mData.size()) viewHolder.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 view 视图 * @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 (mShoppingCartItemIv != 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 && mShoppingCartItemIv != 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 = mCallBackListener; } /** * @interfaceName: CallBackListener * @interfaceDescription: 回调监听 * @author: leibing * @createTime: 2016/09/28 */ public interface CallBackListener{ void callBackImg(ImageView goodsImg); } }</code></pre> <p>然后写添加数据源以及设置适配器，代码如下：</p> <pre> <code class="language-java">// 购物车父布局 private RelativeLayout mShoppingCartRly; // 购物车列表显示 private ListView mShoppingCartLv; // 购物数目显示 private TextView mShoppingCartCountTv; // 购物车图片显示 private ImageView mShoppingCartIv; // 购物车适配器 private GoodsAdapter mGoodsAdapter; // 数据源（购物车商品图片） private ArrayList<GoodsModel> mData; // 贝塞尔曲线中间过程点坐标 private float[] mCurrentPosition = new float[2]; // 路径测量 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); mShoppingCartCountTv = (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(); // 添加数据源 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 public void callBackImg(ImageView goodsImg) { // 添加商品到购物车 addGoodsToCart(goodsImg); } }); // 设置适配器 mShoppingCartLv.setAdapter(mGoodsAdapter); }</code></pre> <p>接下来写最重要的一块，添加商品到购物车，代码如下：</p> <pre> <code class="language-java">/** * 添加商品到购物车 * @author leibing * @createTime 2016/09/28 * @lastModify 2016/09/28 * @param goodsImg 商品图标 * @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); mShoppingCartRly.addView(goods, params); // 得到父布局的起始点坐标（用于辅助计算动画开始/结束时的点的坐标） int[] parentLocation = new int[2]; mShoppingCartRly.getLocationInWindow(parentLocation); // 得到商品图片的坐标（用于计算动画开始的坐标） int startLoc[] = new int[2]; goodsImg.getLocationInWindow(startLoc); // 得到购物车图片的坐标(用于计算动画结束后的坐标) int endLoc[] = new int[2]; mShoppingCartIv.getLocationInWindow(endLoc); // 开始掉落的商品的起始点：商品起始点-父布局起始点+该商品图片的一半 float startX = startLoc[0] - parentLocation[0] + goodsImg.getWidth() / 2; float startY = startLoc[1] - parentLocation[1] + goodsImg.getHeight() / 2; // 商品掉落后的终点坐标：购物车起始点-父布局起始点+购物车图片的1/5 float toX = endLoc[0] - parentLocation[0] + mShoppingCartIv.getWidth() / 5; float toY = endLoc[1] - parentLocation[1]; // 开始绘制贝塞尔曲线 Path path = new Path(); // 移动到起始点（贝塞尔曲线的起点） path.moveTo(startX, startY); // 使用二阶贝塞尔曲线：注意第一个起始坐标越大，贝塞尔曲线的横向距离就会越大，一般按照下面的式子取即可 path.quadTo((startX + toX) / 2, startY, toX, toY); // mPathMeasure用来计算贝塞尔曲线的曲线长度和贝塞尔曲线中间插值的坐标，如果是true，path会形成一个闭环 mPathMeasure = new PathMeasure(path, false); // 属性动画实现（从0到贝塞尔曲线的长度之间进行插值计算，获取中间过程的距离值） ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, mPathMeasure.getLength()); valueAnimator.setDuration(500); // 匀速线性插值器 valueAnimator.setInterpolator(new LinearInterpolator()); valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { // 当插值计算进行时，获取中间的每个值， // 这里这个值是中间过程中的曲线长度（下面根据这个值来得出中间点的坐标值） float value = (Float) animation.getAnimatedValue(); // 获取当前点坐标封装到mCurrentPosition // boolean getPosTan(float distance, float[] pos, float[] tan) ： // 传入一个距离distance(0<=distance<=getLength())，然后会计算当前距离的坐标点和切线，pos会自动填充上坐标，这个方法很重要。 // mCurrentPosition此时就是中间距离点的坐标值 mPathMeasure.getPosTan(value, mCurrentPosition, null); // 移动的商品图片（动画图片）的坐标设置为该中间点的坐标 goods.setTranslationX(mCurrentPosition[0]); goods.setTranslationY(mCurrentPosition[1]); } }); // 开始执行动画 valueAnimator.start(); // 动画结束后的处理 valueAnimator.addListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) { } @Override public void onAnimationEnd(Animator animation) { // 购物车商品数量加1 goodsCount ++; isShowCartGoodsCount(); mShoppingCartCountTv.setText(String.valueOf(goodsCount)); // 把执行动画的商品图片从父布局中移除 mShoppingCartRly.removeView(goods); } @Override public void onAnimationCancel(Animator animation) { } @Override public void onAnimationRepeat(Animator animation) { } }); }</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/0d79d8b5011480f8a71cad0024b21d74.jpg"></p> <p style="text-align:center">1132780-f58fe3a5c5a7c281.jpg</p> <p>代码分析完毕，一个高逼格贝塞尔曲线实现的购物车添加商品动画效果实现分析完毕~~</p> <p>效果图如下：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/7dc571a92dbec74ba2e48ce7119e1fb0.gif"></p> <p style="text-align:center">BezierCurveShoppingCart.gif</p> <p> </p> <p> </p> <p> </p> <p> </p>