今天整理一下购物车动画,整理一下,方便以后使用.
咱们定外卖的的时候,添加商品,可以看一个加入购物车的动画,下面就实现这个效果,也是从网上找了好多方法,下面是我徐在选择一种,参考一下.
使用了PathMeasure和Path实现,绘制贝塞尔曲线绘制成功的
上代码吧:
首先是activity的布局文件,里面包括了一个relativeLayout,和recycleView和购物车的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设置适配器.
```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;
/**
* 购物车动画
*/
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("购物车动画");
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();
}
}
下面是适配器的代码(重点)
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);
//获取到图片,用于绘制贝塞尔曲线(一定要设置,不然显示不出来)
mview.setImageDrawable(imageView.getDrawable());
//设置这个承载图片的容器,以及设置大小
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(50, 50);
//添加进去
mRootRl.addView(mview, layoutParams);
//二、计算动画开始/结束点的坐标的准备工作
//得到父布局的起始点坐标（用于辅助计算动画开始/结束时的点的坐标）
int[] parentLoc = new int[2];
mRootRl.getLocationInWindow(parentLoc);
//得到商品图片的坐标（用于计算动画开始的坐标）
int startLoc[] = new int[2];
imageView.getLocationInWindow(startLoc);
//得到购物车图片的坐标(用于计算动画结束后的坐标)
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;
//商品掉落后的终点坐标：购物车起始点-父布局起始点+购物车图片的1/5
float toX = endLoc[0] - parentLoc[0] + mCarImageView.getWidth() / 5;
float toY = endLoc[1] - parentLoc[1];
//开始绘制贝塞尔曲线
Path path = new Path();
path.moveTo(startX, startY);
//使用二次萨贝尔曲线：注意第一个起始坐标越大，贝塞尔曲线的横向距离就会越大，一般按照下面的式子取即可
path.quadTo((startX + toX) / 2, startY, toX, toY);
mPathMeasure = new PathMeasure();
mPathMeasure.setPath(path, false);
//属性动画
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);
//给图片设置位移坐标
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) {
// 购物车的数量加1
// 把移动的图片imageview从父布局里移除
mRootRl.removeView(mview);
//shopImg 开始一个放大动画
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();
}
}
可以看到,使用
//开始绘制贝塞尔曲线
Path path = new Path();
path.moveTo(startX, startY);
//使用二次萨贝尔曲线：注意第一个起始坐标越大，贝塞尔曲线的横向距离就会越大，一般按照下面的式子取即可
path.quadTo((startX + toX) / 2, startY, toX, toY);
mPathMeasure = new PathMeasure();
mPathMeasure.setPath(path, false);
mPathMeasure.setPath(path, false);第二个参数设置成true,则绘制成闭合的曲线,可以看到绘制这个动画代码量不大,主要是交给PathMeasure来进行绘制路线了.
下面是对PathMeasure的一些知识点,可以了解一下
PathMeasure是用来操作Path的，初始化
mPathMeasure = new PathMeasure();
mPathMeasure.setPath(path, false);
//forceClosed 就是Path最终是否需要闭合，如果为True的话，则不管关联的Path是否是闭合的，都会被闭合 PathMeasure的计算就会包含最后一段闭合的路径
得到path长度，可以这样理解，不管实际 Path 多么的复杂，PathMeasure 都相当于做了一个事情，就是把 Path “拉直”，然后给了我们一个接口(getLength)告诉我们path的总长度
mPathMeasure.getLength()
注意 这里得到的length是当前mPathMeasure指向线段的长度，并不是path总长度，如果要得到总长度需要通过nextContour来遍历mPathMeasure，得到每段长度再加起来
得到Path中的某一点或某一段
getPosTan(float distance, float[] pos, float[] tan)
getSegment(float startD, float stopD, Path dst, boolean startWithMoveTo)
这里要注意的是得到的线段是添加进 dst中的，并不是给dst重新赋值，如果想要重新生成一个线段，可以先重置dst path.reset(). startWithMoveTo
为true：再次截取，起始点为0时，还是原path的起始点。
为false：再次截取，起始点为0时，为上次截取的终点。
startD stopD 是当前PathMeasure指向线段的开始和起始位置
Path 可以由多条曲线构成，但不论是 getLength , getgetSegment 或者是其它方法，都只会在其中第一条线段上运行，而这个 nextContour 就是用于跳转到下一条曲线到方法，如果跳转成功，则返回 true， 如果跳转失败，则返回 false。
这里要注意开始时直接调用 mPathMeasure.nextContour ()会跳到第一条线段，但如果你操作了mPathMeasure，如getLength，它会自动跳到第一条线段。
