貝塞爾曲線之購物車動畫效果

時間 2019-11-05

標籤曲線購物車動畫效果简体版

原文原文鏈接

question

貝塞爾曲線是什麼？
貝塞爾曲線能夠作什麼?
怎麼作？

what is it？

貝塞爾曲線在百度定義是貝塞爾曲線(Bézier curve)，又稱貝茲曲線或貝濟埃曲線，是應用於二維圖形應用程序的數學曲線。javascript

do what?

貝塞爾曲線根據不一樣點實現不一樣動態效果：java

一階貝塞爾曲線（兩點），繪製成一條直線

二階貝塞爾曲線（三點）

三階貝塞爾曲線（四點）

四階貝塞爾曲線（五點）

五階貝塞爾曲線（六點）

看了上面貝塞爾曲線不一樣點不一樣效果後，相信你們都清楚貝塞爾曲線能幹什麼？沒錯，貝塞爾曲線能造高逼格動畫~~ 就筆者目前瞭解的採用貝塞爾曲線實現的知名開源項目有：android

QQ拖拽清除效果
紙飛機刷新動畫
滴油刷新動畫
波浪動畫

到此你們是否是很興奮，想更多瞭解如何造一個高逼格貝塞爾曲線動畫。接下來我就給你們講述如何造一個基於貝塞爾曲線實現的購物車動畫，你們擦亮眼睛啦~~git

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)複製代碼

三階接口：

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 int[2]; view.getLocationInWindow(location); 獲得view在屏幕中的絕對座標。
理解屬性動畫插值器ValueAnimator

code

首先寫購物車佈局xml，代碼以下：github

<?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>複製代碼

而後寫購物車適配器、實體類，代碼以下：ide

/** * @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);
    }
}複製代碼

而後寫添加數據源以及設置適配器，代碼以下：函數

// 購物車父佈局
    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);
    }複製代碼

接下來寫最重要的一塊，添加商品到購物車，代碼以下：佈局

/** * 添加商品到購物車 * @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) {
            }
        });
    }複製代碼