使用二階貝塞爾曲線實現新增購物車動畫

張欽發表於2018-08-07

動畫

一、引入

其實之前一直以為像餓了麼或者是美團外賣那種把商品新增到購物車的動畫會很難做，但是實際做起來好像並沒有想象中的那麼難哈哈。
佈局主要使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+TabLayout+ViewPager
動畫主要使用二階貝塞爾曲線與屬性動畫
訊息傳遞使用EventBus普通事件

二、大致思路

如圖所示主要有三個點，起點、終點、以及貝塞爾曲線的控制點
起點即點選的View的位置，一般來說用如下方式即可取得。startPosition[0]為x軸開始座標，startPosition[1]為Y軸終點座標，兩點可以看作對角線上面的兩個端點（左上角x座標，右下角y座標）
```
//貝塞爾起始資料點
int[] startPosition = new int[2];
view.getLocationOnScreen(startPosition);
複製程式碼
```

終點即購物車籃子的位置，與起點類似

mShoppingCart.getLocationInWindow(endPosition);
複製程式碼

控制點，我選的控制點為上圖的C點，即A點的y座標，B點的X座標

controlPosition[0] = endPosition[0];
controlPosition[1] = startPosition[1];
複製程式碼

需要注意的地方，我不清楚是不是因為我的佈局的問題，獲取到的點選的A點總是會有一個偏移，後來經同事提醒，減去了TabLayout的座標的y軸座標即位置才可以。

// 起點
int[] startPosition;
// 終點
int[] endPosition = new int[2];
// 貝塞爾控制點
int[] controlPosition = new int[2];
// tablayout位置
int[] tablayoutPosition = new int[2];

startPosition = data.getStartPosition();
mShoppingCart.getLocationInWindow(endPosition);
mTabLayout.getLocationInWindow(tablayoutPosition);
// 處理起點y座標偏移的問題
startPosition[1] = startPosition[1] - tablayoutPosition[1] - mTabLayout.getHeight();
// 終點進行一下居中處理
endPosition[0] = endPosition[0] + (mShoppingCart.getWidth() / 2);
controlPosition[0] = endPosition[0];
controlPosition[1] = startPosition[1];
複製程式碼

通過Path的quadTo方法繪製貝塞爾曲線，使用PathMeasure獲取點的座標（藉助ValueAnimator.ofFloat()配合getPosTan()來獲取座標）

Path path = new Path();
path.moveTo(startPosition[0], startPosition[1]);
path.quadTo(controlPosition[0], controlPosition[1], endPosition[0], endPosition[1]);
PathMeasure pathMeasure = new PathMeasure();
// false表示path路徑不閉合
pathMeasure.setPath(path, false);

// ofFloat是一個生成器
ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, pathMeasure.getLength());
// 勻速線性插值器
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.setDuration(800);
valueAnimator.addUpdateListener(animation -> {
    float value = (Float) animation.getAnimatedValue();
    pathMeasure.getPosTan(value, currentPosition, null);
    imageView.setX(currentPosition[0]);
    imageView.setY(currentPosition[1]);
});
valueAnimator.start();
複製程式碼

下面是用屬性動畫給購物車籃子做了一個放大縮小的動畫效果

// mShoppingCart是View
ObjectAnimator shoppingCartX = ObjectAnimator.ofFloat(mShoppingCart, "scaleX", 1.0f, 1.3f, 1.0f);
ObjectAnimator shoppingCartY = ObjectAnimator.ofFloat(mShoppingCart, "scaleY", 1.0f, 1.3f, 1.0f);
shoppingCartX.setInterpolator(new AccelerateInterpolator());
shoppingCartY.setInterpolator(new AccelerateInterpolator());
AnimatorSet shoppingCart = new AnimatorSet();
shoppingCart
        .play(shoppingCartX)
        .with(shoppingCartY);
shoppingCart.setDuration(800);
shoppingCart.start();
複製程式碼

三、稍完整的大部分程式碼

private void AddAnimation(AddEventBean data) {
    // 起點
    int[] startPosition;
    // 終點
    int[] endPosition = new int[2];
    // 貝塞爾控制點
    int[] controlPosition = new int[2];
    // 當前位置
    float[] currentPosition = new float[2];
    // tablayout位置
    int[] tablayoutPosition = new int[2];

    startPosition = data.getStartPosition();
    mShoppingCart.getLocationInWindow(endPosition);
    mTabLayout.getLocationInWindow(tablayoutPosition);
    // 處理起點y座標偏移的問題
    startPosition[1] = startPosition[1] - tablayoutPosition[1] - mTabLayout.getHeight();
    // 終點進行一下居中處理
    endPosition[0] = endPosition[0] + (mShoppingCart.getWidth() / 2);
    controlPosition[0] = endPosition[0];
    controlPosition[1] = startPosition[1];


    final ImageView imageView = new ImageView(this);
    mConView.addView(imageView);
    imageView.setImageResource(R.drawable.specialadd);
    imageView.getLayoutParams().width = getResources().getDimensionPixelSize(R.dimen.dp_px_30);
    imageView.getLayoutParams().height = getResources().getDimensionPixelSize(R.dimen.dp_px_30);
    imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
    imageView.setVisibility(View.VISIBLE);
    imageView.setX(startPosition[0]);
    imageView.setY(startPosition[1]);

    Path path = new Path();
    path.moveTo(startPosition[0], startPosition[1]);
    path.quadTo(controlPosition[0], controlPosition[1], endPosition[0], endPosition[1]);
    PathMeasure pathMeasure = new PathMeasure();
    // false表示path路徑不閉合
    pathMeasure.setPath(path, false);

    // ofFloat是一個生成器
    ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, pathMeasure.getLength());
    // 勻速線性插值器
    valueAnimator.setInterpolator(new LinearInterpolator());
    valueAnimator.setDuration(800);
    valueAnimator.addUpdateListener(animation -> {
        float value = (Float) animation.getAnimatedValue();
        pathMeasure.getPosTan(value, currentPosition, null);
        imageView.setX(currentPosition[0]);
        imageView.setY(currentPosition[1]);
    });
    valueAnimator.start();

    ObjectAnimator shoppingCartX = ObjectAnimator.ofFloat(mShoppingCart, "scaleX", 1.0f, 1.3f, 1.0f);
    ObjectAnimator shoppingCartY = ObjectAnimator.ofFloat(mShoppingCart, "scaleY", 1.0f, 1.3f, 1.0f);
    shoppingCartX.setInterpolator(new AccelerateInterpolator());
    shoppingCartY.setInterpolator(new AccelerateInterpolator());
    AnimatorSet shoppingCart = new AnimatorSet();
    shoppingCart
            .play(shoppingCartX)
            .with(shoppingCartY);
    shoppingCart.setDuration(800);
    shoppingCart.start();

    valueAnimator.addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {

        }

        //當動畫結束後：
        @Override
        public void onAnimationEnd(Animator animation) {
            goodsChange(data);
        }

        @Override
        public void onAnimationCancel(Animator animation) {

        }

        @Override
        public void onAnimationRepeat(Animator animation) {

        }
    });
}
複製程式碼

四、大致寫下佈局（同時也算留做備份）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    ... ...>

    <RelativeLayout
        ... ...>

        頂部常駐的toolbar

    </RelativeLayout>

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <android.support.design.widget.AppBarLayout
            ... ...>

            <android.support.design.widget.CollapsingToolbarLayout
                ... ...
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <LinearLayout
                    ... ...>

                    TabLayout上面的View
                    
                </LinearLayout>

            </android.support.design.widget.CollapsingToolbarLayout>

            <android.support.design.widget.TabLayout
                ... ... />

        </android.support.design.widget.AppBarLayout>

        <RelativeLayout
            ... ...
            android:fillViewport="true"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <android.support.v4.view.ViewPager
                android:id="@+id/view_pager"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </RelativeLayout>

    </android.support.design.widget.CoordinatorLayout>

    <LinearLayout
        ... ...>

        最下面的購物車一欄
        
    </LinearLayout>
</LinearLayout>
複製程式碼

五、推薦資源

貝塞爾曲線的css實現——淘寶加入購物車基礎動畫
2019-02-17
CSS動畫
Android-貝塞爾曲線實現水波紋動畫
2021-09-09
Android動畫
貝塞爾曲線
2020-12-14
canvas 二次貝塞爾曲線quadraticCurveTo()
2018-08-09
Canvas
貝塞爾曲線(Bezier curve)實現節點連線
2020-09-25
貝塞爾曲線原理、推導及Matlab實現
2024-07-04
Matlab
VBA，Shapes.AddCurve SafeArrayOfPoints:=pts 畫貝塞爾曲線
2021-01-02
webGL入門-四階貝塞爾曲線繪製
2018-03-05
Web
貝塞爾曲線基礎部分
2020-09-24
Flutter 自定義元件之貝塞爾曲線畫波浪球
2019-07-05
Flutter元件
【Flutter高階玩法】貝塞爾曲線的表象認知
2020-03-28
Flutter
貝塞爾曲線理解與應用
2018-10-19
canvas基礎[二]教你編寫貝塞爾曲線工具
2020-11-12
Canvas
canvas bezierCurveTo() 三次貝塞爾曲線
2019-08-29
Canvas
如何理解並應用貝塞爾曲線
2019-03-14
Flutter 實戰 - 用貝塞爾曲線畫一個帶文字的波浪球 Widget
2019-10-27
Flutter
SVG之Path路徑詳解(二)，全面解析貝塞爾曲線
2024-08-08
SVG
加入購物車動畫效果實現
2018-08-15
動畫
自定義View合輯（6）-波浪（貝塞爾曲線）
2019-05-08
View
iOS動畫專題·UIView二維形變動畫與CAAnimation核心動畫（transform動畫，基礎，關鍵幀，組動畫，路徑動畫，貝塞爾曲線）
2018-07-02
iOS動畫UIViewORM
Flutter BottomAppBar 自定義路徑 + 貝塞爾曲線實現閒魚底部導航
2021-07-28
FlutterAPP
Android日常學習：OpenGL 實踐之貝塞爾曲線繪製
2019-11-13
Android
一個貝塞爾曲線編輯工具(2d)
2024-07-28
jQuery新增到購物車動畫特效外掛
2024-11-23
jQuery動畫特效
【flutter高階玩法】貝塞爾實戰1 - 波浪
2020-04-04
Flutter
自定義View合輯（8）-跳躍的小球（貝塞爾曲線）
2019-05-11
View
用Provider實現商品加入購物車的動畫效果
2020-03-04
IDE動畫
Android繪圖最終篇之大戰貝塞爾三次曲線
2018-11-20
Android繪圖
白話經典貝塞爾曲線及其在 Android 中的應用
2019-05-10
Android
【乾貨滿滿】貝塞爾曲線(Bézier curve)——什麼神仙操作
2019-02-03
Android教你一步一步從學習貝塞爾曲線到實現波浪進度條
2019-02-04
Android
用貝塞爾曲線自己寫的一個電量顯示的控制元件
2019-09-16
控制元件
購物車的實現原理
2019-03-10
購物車原理以及實現
2018-08-19
Vue實現購物車效果
2020-10-12
Vue
CSS transition animation的使用（內含貝賽爾曲線詳解）
2019-10-16
CSS
Android實現商城購物車功能
2019-06-19
Android
【jquery】實現購物車加減
2020-11-30
jQuery