加入购物车动画效果实现
2018-08-15 本文已影响69人
Android_Jian
不知道大家有没有发现，主流的电商类APP添加商品到购物车时，都会伴随一个小的“添加”动画。你有没有想过它是怎么实现的呢？今天我们就一起来学习下。
其实实现这个效果很简单，主要涉及到两个知识点：贝塞尔曲线和自定义Evaluator估值器。下面我先简单介绍下这两个知识点，如果你之前有了解过这两块的话，可以直接翻到下面看下实现代码。
贝塞尔曲线是数值分析领域的重要参数曲线，在我们的生活中随处都可以看到它的影子，比如：QQ聊天气泡的拖拽效果、直播室送花点赞效果、电量水波纹效果等等。贝塞尔曲线可以分为一阶贝塞尔曲线、二阶贝塞尔曲线、三阶贝塞尔曲线 .....。在这里我们用到了二阶贝塞尔曲线，下面我们先来看下它的计算公式：
公式.jpg
公式中，B(t) 的值随时间 t 变化，B(t)运动点的运动轨迹就形成了二阶贝塞尔曲线，P0是起始点，P1是控制点，P2是终点。这里我找了一个二阶贝塞尔曲线的动画，更直观一些：https://img-blog.csdn.net/20160328202508739。
相信大家在开发过程中都有用到过属性动画吧，属性动画中有两个很重要的知识点，那就是差值器Interpolator和估值器Evaluator。简单来讲，差值器就类似于我们物理中所学的“加速度”，比如我们的执行动画需要先加速再减速。Android系统为我们内置了几种常见的差值器，在某些特定情况下不能满足需要的话，我们就需要实现TimeInterpolator接口实现自定义差值器。估值器Evaluator其实就是一个转换器，他能把小数进度转换成对应的具体数值，我们可以实现TypeEvaluator接口来自定义估值器。
我们先思考一下，加入购物车动画效果就相当于数学中常见的抛物线，可以借助二阶贝塞尔曲线来实现，那我们怎么确定起始点P0、控制点P1、终点P2的位置呢？起始点P0的位置就是我们的商品添加按钮所在位置，终点P2位置就是界面左下角购物车Icon图标所在的位置，控制点的位置要怎么选取呢？在这里我们可以沿添加按钮水平向左，沿购物车Icon图标竖直向上，两条线的交点处正可以作为我们的控制点坐标，到此三个点正好构成一个倒立的直角三角形。控制点P1的横坐标等于终点P2的横坐标，控制点P1的纵坐标等于起始点P0的纵坐标。下面我们就可以进行编码工作了。
首先自定义估值器CartEvaluator：
public class CartEvaluator implements TypeEvaluator<PointF>{
private PointF pointCur;
private PointF mControlPoint;
public CartEvaluator(PointF mControlPoint) {
this.mControlPoint = mControlPoint;
pointCur = new PointF();
}
@Override
public PointF evaluate(float fraction, PointF startValue, PointF endValue) {
// 将二阶贝塞尔曲线的计算公式直接代入即可
pointCur.x = (1 - fraction) * (1 - fraction) * startValue.x
+ 2 * fraction * (1 - fraction) * mControlPoint.x + fraction * fraction * endValue.x;
pointCur.y = (1 - fraction) * (1 - fraction) * startValue.y
+ 2 * fraction * (1 - fraction) * mControlPoint.y + fraction * fraction * endValue.y;
return pointCur;
}
}
在这里我们创建了一个pointCur对象，专门用来存储当前移动点的坐标。
下面看下Demo中的布局文件效果，代码就不贴出来了，就是布局左下角放置了一个购物车图标，右上角放置了三个添加按钮，用来模拟添加商品操作：
布局文件
最后看下Activity中的代码实现：
public class MainActivity extends AppCompatActivity {
private ImageView mAddOne;
private ImageView mAddTwo;
private ImageView mAddThree;
private ImageView mCart;
private ViewGroup mRootView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initListener();
}
// 初始化控件
private void initView(){
mRootView = (ViewGroup) getWindow().getDecorView();
mCart = findViewById(R.id.mCart);
mAddOne = findViewById(R.id.mAddOne);
mAddTwo = findViewById(R.id.mAddTwo);
mAddThree = findViewById(R.id.mAddThree);
}
// 初始化监听
private void initListener(){
mAddOne.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
playAnim(view);
}
});
mAddTwo.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
playAnim(view);
}
});
mAddThree.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
playAnim(view);
}
});
}
// 执行动画
private void playAnim(final View view){
//创建int数组，用来接收贝塞尔起始点坐标和终点坐标值
int[] startPosition = new int[2];
int[] endPosition = new int[2];
view.getLocationInWindow(startPosition);
mCart.getLocationInWindow(endPosition);
PointF startF = new PointF(); //起始点 startF
PointF endF = new PointF(); //终点 endF
PointF controlF = new PointF(); //控制点 controlF
startF.x = startPosition[0];
startF.y = startPosition[1] ;
endF.x = endPosition[0]+mCart.getWidth()/2-view.getWidth()/2; //微调处理，确保动画执行完毕“添加”图标中心点与购物车中心点重合
endF.y = endPosition[1]+mCart.getHeight()/2 - view.getHeight()/2;
controlF.x = endF.x;
controlF.y = startF.y;
// 创建执行动画的“添加”图标
final ImageView imageView = new ImageView(this);
mRootView.addView(imageView);
imageView.setImageResource(R.mipmap.cartadd);
imageView.getLayoutParams().width = view.getMeasuredWidth();
imageView.getLayoutParams().height = view.getMeasuredHeight();
ValueAnimator valueAnimator = ValueAnimator.ofObject(new CartEvaluator(controlF), startF, endF);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
PointF pointF = (PointF) animation.getAnimatedValue();
imageView.setX(pointF.x);
imageView.setY(pointF.y);
}
});
valueAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
// 动画执行完毕，将执行动画的“添加”图标移除掉
mRootView.removeView(imageView);
// 执行购物车缩放动画
AnimatorSet animatorSet = new AnimatorSet();
ObjectAnimator animatorX = ObjectAnimator.ofFloat(mCart, "scaleX", 1f, 1.2f, 1f);
ObjectAnimator animatorY = ObjectAnimator.ofFloat(mCart, "scaleY", 1f, 1.2f, 1f);
animatorSet.play(animatorX).with(animatorY);
animatorSet.setDuration(400);
animatorSet.start();
}
});
valueAnimator.setDuration(800);
valueAnimator.start();
}
}
luping.gif
