大家好,我是梦辛工作的是灵,最近在做一款购物的APP,然后客户要求有个加入商品时候,商品自动调入购物车的一个特效,之前没有做过的我一脸懵逼,毫无头绪,好吧,不得不承认我自己很菜,然后经过多次百度和查阅资料,大概知道了实现逻辑,就是 新建一个 ImageView 从 起点 到 终点 显示贝塞尔曲线的一个动画过程,动画实现完后,在将ImageView 移除,然后下面是实现代码(我也是参考其他大佬的):
/**
* 商品加入到购物车的动画效果
*/
private void addCart(Bitmap bitmap,View start,View end,RelativeLayout parentView) {
// 1.先创建 一个 用于执行动画的 ImageView
final ImageView goods = new ImageView(this);
goods.setImageBitmap(bitmap);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(50,50);
parentView.addView(goods, params);
//2.获得父视图的坐标
int[] parentLocation = new int[2];
parentView.getLocationInWindow(parentLocation);
//3.获得起点视图的坐标
int startLoc[] = new int[2];
start.getLocationInWindow(startLoc);
//4.获得终点视图的坐标
int endLoc[] = new int[2];
end.getLocationInWindow(endLoc);
//5.计算动画开始的坐标 结束的坐标
//开始掉落的商品的起始点:商品起始点 - 父布局起始点 + 该商品图片的一半
float startX = startLoc[0] - parentLocation[0] + start.getWidth() / 2;
float startY = startLoc[1] - parentLocation[1] + start.getHeight() / 2;
//商品掉落后的终点坐标:购物车起始点-父布局起始点+购物车图片的1/5
float endX = endLoc[0] - parentLocation[0] + end.getWidth() / 5;
float endY = endLoc[1] - parentLocation[1];
// 6.计算中间动画的插值坐标(贝塞尔曲线)(其实就是用贝塞尔曲线来完成起终点的过程)
//开始绘制贝塞尔曲线 路径
Path path = new Path();
//移动到起始点(贝塞尔曲线的起点)
path.moveTo(startX, startY);
//使用二次萨贝尔曲线:注意第一个起始坐标越大,贝塞尔曲线的横向距离就会越大,一般按照下面的式子取即可
path.quadTo((startX + endX) / 2, startY, endX, endY);
//mPathMeasure用来计算贝塞尔曲线的曲线长度和贝塞尔曲线中间插值的坐标,
// 如果是true,path会形成一个闭环
PathMeasure mPathMeasure = new PathMeasure(path, false);
//属性动画实现(从0到贝塞尔曲线的长度之间进行插值计算,获取中间过程的距离值)
ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, mPathMeasure.getLength());
valueAnimator.setDuration(300);
// 匀速线性插值器
valueAnimator.setInterpolator(new LinearInterpolator());
float[] mCurrentPosition = new float[2];
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会自动填充上坐标,这个方法很重要。
mPathMeasure.getPosTan(value, mCurrentPosition, null);
//mCurrentPosition此时就是中间距离点的坐标值
// 移动的商品图片(动画图片)的坐标设置为该中间点的坐标
goods.setTranslationX(mCurrentPosition[0]);
goods.setTranslationY(mCurrentPosition[1]);
}
});
// 7.执行动画
valueAnimator.start();
// 8.监听动画结束
valueAnimator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
}
//当动画结束后:
@Override
public void onAnimationEnd(Animator animation) {
// 移除视图
parentView.removeView(goods);
// 购物车的数量增加
doAddGoods();
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
}
这次学到了,大佬的代码有点乱,我重新整理和排布了下,顺带再次理解了下思路,争取后续能举一反三,大家一起加油吧
大佬传送门https://www.jb51.net/article/95991.htm