一、引入

  1. 其实之前一直以为像饿了么或者是美团外卖那种把商品添加到购物车的动画会很难做，但是实际做起来好像并没有想象中的那么难哈哈。

  2. 布局主要使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+TabLayout+ViewPager

  3. 动画主要使用二阶贝塞尔曲线与属性动画

  4. 消息传递使用EventBus普通事件

使用二阶贝塞尔曲线实现添加购物车动画 - 图1

二、大致思路

使用二阶贝塞尔曲线实现添加购物车动画 - 图2

  1. 如图所示主要有三个点，起点、终点、以及贝塞尔曲线的控制点

  2. 起点即点击的View的位置，一般来说用如下方式即可取得。startPosition[0]为x轴开始坐标，startPosition[1]为Y轴终点坐标，两点可以看作对角线上面的两个端点（左上角x坐标，右下角y坐标）

  1. //贝塞尔起始数据点
  2. int[] startPosition = new int[2];
  3. view.getLocationOnScreen(startPosition);
  1. 终点即购物车篮子的位置，与起点类似
  1. mShoppingCart.getLocationInWindow(endPosition);
  1. 控制点，我选的控制点为上图的C点，即A点的y坐标，B点的X坐标
  1. controlPosition[0] = endPosition[0];
  2. controlPosition[1] = startPosition[1];
  1. 需要注意的地方，我不清楚是不是因为我的布局的问题，获取到的点击的A点总是会有一个偏移，后来经同事提醒，减去了TabLayout的坐标的y轴坐标即位置才可以。
  1. // 起点
  2. int[] startPosition;
  3. // 终点
  4. int[] endPosition = new int[2];
  5. // 贝塞尔控制点
  6. int[] controlPosition = new int[2];
  7. // tablayout位置
  8. int[] tablayoutPosition = new int[2];
  10. startPosition = data.getStartPosition();
  11. mShoppingCart.getLocationInWindow(endPosition);
  12. mTabLayout.getLocationInWindow(tablayoutPosition);
  13. // 处理起点y坐标偏移的问题
  14. startPosition[1] = startPosition[1] - tablayoutPosition[1] - mTabLayout.getHeight();
  15. // 终点进行一下居中处理
  16. endPosition[0] = endPosition[0] + (mShoppingCart.getWidth() / 2);
  17. controlPosition[0] = endPosition[0];
  18. controlPosition[1] = startPosition[1];
  1. 通过Path的quadTo方法绘制贝塞尔曲线，使用PathMeasure获取点的坐标（借助ValueAnimator.ofFloat()配合getPosTan()来获取坐标）
  1. Path path = new Path();
  2. path.moveTo(startPosition[0], startPosition[1]);
  3. path.quadTo(controlPosition[0], controlPosition[1], endPosition[0], endPosition[1]);
  4. PathMeasure pathMeasure = new PathMeasure();
  5. // false表示path路径不闭合
  6. pathMeasure.setPath(path, false);
  8. // ofFloat是一个生成器
  9. ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, pathMeasure.getLength());
  10. // 匀速线性插值器
  11. valueAnimator.setInterpolator(new LinearInterpolator());
  12. valueAnimator.setDuration(800);
  13. valueAnimator.addUpdateListener(animation -> {
  14.     float value = (Float) animation.getAnimatedValue();
  15.     pathMeasure.getPosTan(value, currentPosition, null);
  16.     imageView.setX(currentPosition[0]);
  17.     imageView.setY(currentPosition[1]);
  18. });
  19. valueAnimator.start();
  1. 下面是用属性动画给购物车篮子做了一个放大缩小的动画效果
  1. // mShoppingCart是View
  2. ObjectAnimator shoppingCartX = ObjectAnimator.ofFloat(mShoppingCart, "scaleX", 1.0f, 1.3f, 1.0f);
  3. ObjectAnimator shoppingCartY = ObjectAnimator.ofFloat(mShoppingCart, "scaleY", 1.0f, 1.3f, 1.0f);
  4. shoppingCartX.setInterpolator(new AccelerateInterpolator());
  5. shoppingCartY.setInterpolator(new AccelerateInterpolator());
  6. AnimatorSet shoppingCart = new AnimatorSet();
  7. shoppingCart
  8.         .play(shoppingCartX)
  9.         .with(shoppingCartY);
  10. shoppingCart.setDuration(800);
  11. shoppingCart.start();

三、稍完整的大部分代码

  1. private void AddAnimation(AddEventBean data) {
  2.     // 起点
  3.     int[] startPosition;
  4.     // 终点
  5.     int[] endPosition = new int[2];
  6.     // 贝塞尔控制点
  7.     int[] controlPosition = new int[2];
  8.     // 当前位置
  9.     float[] currentPosition = new float[2];
  10.     // tablayout位置
  11.     int[] tablayoutPosition = new int[2];
  13.     startPosition = data.getStartPosition();
  14.     mShoppingCart.getLocationInWindow(endPosition);
  15.     mTabLayout.getLocationInWindow(tablayoutPosition);
  16.     // 处理起点y坐标偏移的问题
  17.     startPosition[1] = startPosition[1] - tablayoutPosition[1] - mTabLayout.getHeight();
  18.     // 终点进行一下居中处理
  19.     endPosition[0] = endPosition[0] + (mShoppingCart.getWidth() / 2);
  20.     controlPosition[0] = endPosition[0];
  21.     controlPosition[1] = startPosition[1];
  24.     final ImageView imageView = new ImageView(this);
  25.     mConView.addView(imageView);
  26.     imageView.setImageResource(R.drawable.specialadd);
  27.     imageView.getLayoutParams().width = getResources().getDimensionPixelSize(R.dimen.dp_px_30);
  28.     imageView.getLayoutParams().height = getResources().getDimensionPixelSize(R.dimen.dp_px_30);
  29.     imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
  30.     imageView.setVisibility(View.VISIBLE);
  31.     imageView.setX(startPosition[0]);
  32.     imageView.setY(startPosition[1]);
  34.     Path path = new Path();
  35.     path.moveTo(startPosition[0], startPosition[1]);
  36.     path.quadTo(controlPosition[0], controlPosition[1], endPosition[0], endPosition[1]);
  37.     PathMeasure pathMeasure = new PathMeasure();
  38.     // false表示path路径不闭合
  39.     pathMeasure.setPath(path, false);
  41.     // ofFloat是一个生成器
  42.     ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, pathMeasure.getLength());
  43.     // 匀速线性插值器
  44.     valueAnimator.setInterpolator(new LinearInterpolator());
  45.     valueAnimator.setDuration(800);
  46.     valueAnimator.addUpdateListener(animation -> {
  47.         float value = (Float) animation.getAnimatedValue();
  48.         pathMeasure.getPosTan(value, currentPosition, null);
  49.         imageView.setX(currentPosition[0]);
  50.         imageView.setY(currentPosition[1]);
  51.     });
  52.     valueAnimator.start();
  54.     ObjectAnimator shoppingCartX = ObjectAnimator.ofFloat(mShoppingCart, "scaleX", 1.0f, 1.3f, 1.0f);
  55.     ObjectAnimator shoppingCartY = ObjectAnimator.ofFloat(mShoppingCart, "scaleY", 1.0f, 1.3f, 1.0f);
  56.     shoppingCartX.setInterpolator(new AccelerateInterpolator());
  57.     shoppingCartY.setInterpolator(new AccelerateInterpolator());
  58.     AnimatorSet shoppingCart = new AnimatorSet();
  59.     shoppingCart
  60.             .play(shoppingCartX)
  61.             .with(shoppingCartY);
  62.     shoppingCart.setDuration(800);
  63.     shoppingCart.start();
  65.     valueAnimator.addListener(new Animator.AnimatorListener() {
  66.         @Override
  67.         public void onAnimationStart(Animator animation) {
  69.         }
  71.         //当动画结束后：
  72.         @Override
  73.         public void onAnimationEnd(Animator animation) {
  74.             goodsChange(data);
  75.         }
  77.         @Override
  78.         public void onAnimationCancel(Animator animation) {
  80.         }
  82.         @Override
  83.         public void onAnimationRepeat(Animator animation) {
  85.         }
  86.     });
  87. }

四、大致写下布局（同时也算留做备份）

使用二阶贝塞尔曲线实现添加购物车动画 - 图3

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     ... ...>
  6.     <RelativeLayout
  7.         ... ...>
  9.         顶部常驻的toolbar
  11.     </RelativeLayout>
  13.     <android.support.design.widget.CoordinatorLayout
  14.         android:layout_width="match_parent"
  15.         android:layout_height="0dp"
  16.         android:layout_weight="1">
  18.         <android.support.design.widget.AppBarLayout
  19.             ... ...>
  21.             <android.support.design.widget.CollapsingToolbarLayout
  22.                 ... ...
  23.                 app:layout_scrollFlags="scroll|exitUntilCollapsed">
  25.                 <LinearLayout
  26.                     ... ...>
  28.                     TabLayout上面的View
  30.                 </LinearLayout>
  32.             </android.support.design.widget.CollapsingToolbarLayout>
  34.             <android.support.design.widget.TabLayout
  35.                 ... ... />
  37.         </android.support.design.widget.AppBarLayout>
  39.         <RelativeLayout
  40.             ... ...
  41.             android:fillViewport="true"
  42.             app:layout_behavior="@string/appbar_scrolling_view_behavior">
  44.             <android.support.v4.view.ViewPager
  45.                 android:id="@+id/view_pager"
  46.                 android:layout_width="match_parent"
  47.                 android:layout_height="match_parent" />
  48.         </RelativeLayout>
  50.     </android.support.design.widget.CoordinatorLayout>
  52.     <LinearLayout
  53.         ... ...>
  55.         最下面的购物车一栏
  57.     </LinearLayout>
  58. </LinearLayout>

五、推荐资源

  1. View的位置参数

  2. Path之贝塞尔曲线