今天整理一下購(gòu)物車(chē)動(dòng)畫(huà),整理一下,方便以后使用.
咱們定外賣(mài)的的時(shí)候,添加商品,可以看一個(gè)加入購(gòu)物車(chē)的動(dòng)畫(huà),下面就實(shí)現(xiàn)這個(gè)效果,也是從網(wǎng)上找了好多方法,下面是我徐在選擇一種,參考一下.
使用了PathMeasure和Path實(shí)現(xiàn),繪制貝塞爾曲線(xiàn)繪制成功的
上代碼吧:
首先是activity的布局文件,里面包括了一個(gè)relativeLayout,和recycleView和購(gòu)物車(chē)的imageView .

            android:id="@+id/ll_contants"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <android.support.v7.widget.RecyclerView
                android:id="@+id/recycle_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="100">

            </android.support.v7.widget.RecyclerView>
            <ImageView
                android:layout_alignParentBottom="true"
                android:id="@+id/img_shop_cart"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginRight="10dp"
                android:background="@mipmap/touxiang" />
        </RelativeLayout>```
activity的代碼,主要視為recycleView設(shè)置適配器.
```package com.example.wll.ceshitablayout.animation;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.example.wll.ceshitablayout.R;
import com.example.wll.ceshitablayout.adapter.ShopCartAdapter;
import com.example.wll.ceshitablayout.bean.AnimationBean;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;

/**
 * 購(gòu)物車(chē)動(dòng)畫(huà)
 */
public class ShopCartActivity extends AppCompatActivity implements View.OnClickListener {

    @BindView(R.id.iv_back)
    ImageView ivBack;
    @BindView(R.id.tv_back)
    TextView tvBack;
    @BindView(R.id.rl_back)
    RelativeLayout rlBack;
    @BindView(R.id.tv_title)
    TextView tvTitle;
    @BindView(R.id.tv_select)
    TextView tvSelect;
    @BindView(R.id.rl_select)
    RelativeLayout rlSelect;
    @BindView(R.id.rl_title_bg)
    RelativeLayout rlTitleBg;
    @BindView(R.id.recycle_view)
    RecyclerView recycleView;
    @BindView(R.id.img_shop_cart)
    ImageView imgShopCart;
    @BindView(R.id.ll_contants)
    RelativeLayout llContants;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_shop_cart);
        ButterKnife.bind(this);
        ivBack.setVisibility(View.VISIBLE);
        rlBack.setVisibility(View.VISIBLE);
        tvTitle.setText("購(gòu)物車(chē)動(dòng)畫(huà)");
        rlBack.setOnClickListener(this);
        List<AnimationBean> mlist = new ArrayList<>();
        for (int i = 0; i < 20; i++) {
            AnimationBean bena = new AnimationBean();
            bena.setName("商品" + i);
            Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.common_tab);
            bena.setBitmap(bitmap);
            mlist.add(bena);
        }
        recycleView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false));
        ShopCartAdapter shopCartadapter = new ShopCartAdapter(this, mlist, llContants, imgShopCart);
        recycleView.setAdapter(shopCartadapter);
        shopCartadapter.notifyDataSetChanged();
    }

    @Override
    public void onClick(View v) {
        finish();
    }
}

下面是適配器的代碼(重點(diǎn))

package com.example.wll.ceshitablayout.adapter;

import android.animation.Animator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Path;
import android.graphics.PathMeasure;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.LinearInterpolator;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.example.wll.ceshitablayout.R;
import com.example.wll.ceshitablayout.bean.AnimationBean;

import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;

/**
 * Created by wll on 2018/7/4.
 */

public class ShopCartAdapter extends RecyclerView.Adapter {
    private Context mContext;
    private List<AnimationBean> mList;
    private PathMeasure mPathMeasure;
    private RelativeLayout mRootRl;
    private ImageView mCarImageView;
    private float[] mCurrentPosition = new float[2];

    public ShopCartAdapter(Context mContext, List<AnimationBean> mList, RelativeLayout mRootRl, ImageView mCarImageView) {
        this.mContext = mContext;
        this.mList = mList;
        this.mRootRl = mRootRl;
        this.mCarImageView = mCarImageView;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        ViewHolder viewHolder = null;
        View view = LayoutInflater.from(mContext).inflate(R.layout.shop_cart_itream, null);
        viewHolder = new ViewHolder(view);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int i) {
        final ViewHolder holder = (ViewHolder) viewHolder;
        AnimationBean animationBean = mList.get(i);
        holder.tvName.setText(animationBean.getName() + "");
        holder.imgCommondity.setImageBitmap(animationBean.getBitmap());
        holder.imgCommondity.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                addGoodToCar(holder.imgCommondity);
            }
        });
    }

    @Override
    public int getItemCount() {
        return mList != null ? mList.size() : 0;
    }

    static class ViewHolder extends RecyclerView.ViewHolder {
        @BindView(R.id.img_commondity)
        ImageView imgCommondity;
        @BindView(R.id.tv_name)
        TextView tvName;

        ViewHolder(View view) {
            super(view);
            ButterKnife.bind(this, view);
        }
    }

    private void addGoodToCar(final ImageView imageView) {
        //拿到商品的圖片
        final ImageView mview = new ImageView(mContext);
        //獲取到圖片,用于繪制貝塞爾曲線(xiàn)(一定要設(shè)置,不然顯示不出來(lái))
        mview.setImageDrawable(imageView.getDrawable());
        //設(shè)置這個(gè)承載圖片的容器,以及設(shè)置大小
        RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(50, 50);
        //添加進(jìn)去
        mRootRl.addView(mview, layoutParams);

        //二斑唬、計(jì)算動(dòng)畫(huà)開(kāi)始/結(jié)束點(diǎn)的坐標(biāo)的準(zhǔn)備工作
        //得到父布局的起始點(diǎn)坐標(biāo)（用于輔助計(jì)算動(dòng)畫(huà)開(kāi)始/結(jié)束時(shí)的點(diǎn)的坐標(biāo)）
        int[] parentLoc = new int[2];
        mRootRl.getLocationInWindow(parentLoc);

        //得到商品圖片的坐標(biāo)（用于計(jì)算動(dòng)畫(huà)開(kāi)始的坐標(biāo)）
        int startLoc[] = new int[2];
        imageView.getLocationInWindow(startLoc);

        //得到購(gòu)物車(chē)圖片的坐標(biāo)(用于計(jì)算動(dòng)畫(huà)結(jié)束后的坐標(biāo))
        int endLoc[] = new int[2];
        mCarImageView.getLocationInWindow(endLoc);

        float startX = startLoc[0] - parentLoc[0] + imageView.getWidth() / 2;
        float startY = startLoc[1] - parentLoc[1] + imageView.getHeight() / 2;

        //商品掉落后的終點(diǎn)坐標(biāo)：購(gòu)物車(chē)起始點(diǎn)-父布局起始點(diǎn)+購(gòu)物車(chē)圖片的1/5
        float toX = endLoc[0] - parentLoc[0] + mCarImageView.getWidth() / 5;
        float toY = endLoc[1] - parentLoc[1];

        //開(kāi)始繪制貝塞爾曲線(xiàn)
        Path path = new Path();
        path.moveTo(startX, startY);
        //使用二次薩貝爾曲線(xiàn)：注意第一個(gè)起始坐標(biāo)越大市埋，貝塞爾曲線(xiàn)的橫向距離就會(huì)越大黎泣，一般按照下面的式子取即可
        path.quadTo((startX + toX) / 2, startY, toX, toY);
        mPathMeasure = new PathMeasure();
        mPathMeasure.setPath(path, false);

        //屬性動(dòng)畫(huà)
        float length = mPathMeasure.getLength();
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, length);
        valueAnimator.setDuration(1000);
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (float) animation.getAnimatedValue();
                mPathMeasure.getPosTan(value, mCurrentPosition, null);
                //給圖片設(shè)置位移坐標(biāo)
                mview.setTranslationX(mCurrentPosition[0]);
                mview.setTranslationY(mCurrentPosition[1]);
            }
        });
        valueAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                // 購(gòu)物車(chē)的數(shù)量加1

                // 把移動(dòng)的圖片imageview從父布局里移除
                mRootRl.removeView(mview);

                //shopImg 開(kāi)始一個(gè)放大動(dòng)畫(huà)
                Animation scaleAnim = AnimationUtils.loadAnimation(mContext, R.anim.shop_car_scale);
                mCarImageView.startAnimation(scaleAnim);
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        valueAnimator.start();
    }
}

可以看到,使用

 //開(kāi)始繪制貝塞爾曲線(xiàn)
        Path path = new Path();
        path.moveTo(startX, startY);
        //使用二次薩貝爾曲線(xiàn)：注意第一個(gè)起始坐標(biāo)越大，貝塞爾曲線(xiàn)的橫向距離就會(huì)越大缤谎，一般按照下面的式子取即可
        path.quadTo((startX + toX) / 2, startY, toX, toY);
        mPathMeasure = new PathMeasure();
        mPathMeasure.setPath(path, false);

mPathMeasure.setPath(path, false);第二個(gè)參數(shù)設(shè)置成true,則繪制成閉合的曲線(xiàn),可以看到繪制這個(gè)動(dòng)畫(huà)代碼量不大,主要是交給PathMeasure來(lái)進(jìn)行繪制路線(xiàn)了.
下面是對(duì)PathMeasure的一些知識(shí)點(diǎn),可以了解一下
PathMeasure是用來(lái)操作Path的抒倚，初始化

mPathMeasure = new PathMeasure();
mPathMeasure.setPath(path, false);

//forceClosed 就是Path最終是否需要閉合，如果為T(mén)rue的話(huà)坷澡，則不管關(guān)聯(lián)的Path是否是閉合的托呕，都會(huì)被閉合 PathMeasure的計(jì)算就會(huì)包含最后一段閉合的路徑

得到path長(zhǎng)度，可以這樣理解频敛，不管實(shí)際 Path 多么的復(fù)雜项郊，PathMeasure 都相當(dāng)于做了一個(gè)事情，就是把 Path “拉直”斟赚，然后給了我們一個(gè)接口(getLength)告訴我們path的總長(zhǎng)度

 mPathMeasure.getLength()  

注意 這里得到的length是當(dāng)前mPathMeasure指向線(xiàn)段的長(zhǎng)度着降，并不是path總長(zhǎng)度，如果要得到總長(zhǎng)度需要通過(guò)nextContour來(lái)遍歷mPathMeasure拗军，得到每段長(zhǎng)度再加起來(lái)

得到Path中的某一點(diǎn)或某一段
getPosTan(float distance, float[] pos, float[] tan)
getSegment(float startD, float stopD, Path dst, boolean startWithMoveTo)

這里要注意的是得到的線(xiàn)段是添加進(jìn) dst中的任洞，并不是給dst重新賦值，如果想要重新生成一個(gè)線(xiàn)段发侵，可以先重置dst path.reset(). startWithMoveTo
為true：再次截取交掏，起始點(diǎn)為0時(shí)，還是原path的起始點(diǎn)刃鳄。
為false：再次截取耀销，起始點(diǎn)為0時(shí)，為上次截取的終點(diǎn)铲汪。
startD stopD 是當(dāng)前PathMeasure指向線(xiàn)段的開(kāi)始和起始位置

Path 可以由多條曲線(xiàn)構(gòu)成熊尉，但不論是 getLength , getgetSegment 或者是其它方法，都只會(huì)在其中第一條線(xiàn)段上運(yùn)行掌腰，而這個(gè) nextContour 就是用于跳轉(zhuǎn)到下一條曲線(xiàn)到方法狰住，如果跳轉(zhuǎn)成功，則返回 true齿梁， 如果跳轉(zhuǎn)失敗催植，則返回 false。

這里要注意開(kāi)始時(shí)直接調(diào)用 mPathMeasure.nextContour ()會(huì)跳到第一條線(xiàn)段勺择，但如果你操作了mPathMeasure创南，如getLength，它會(huì)自動(dòng)跳到第一條線(xiàn)段省核。