前言
由于项目首页中新添加了2个页面 涉及到购物车和商品购买 其中一个页面实现效果如下:
只是一个Toast的提示文字,并没有加入购物车的动画,总觉得少了点什么。之前有看到过很多购物app 像饿了吗,美团,京东,淘宝一些购物app都会有一个商品加入购物车的动画演示效果。每次看到自己都在想,要是我也能实现这个效果就好了。这次机会来了。
想到这里,不禁让我想起来了 郭霖大神
的一句名言在这里借用一下,与其共励!
实现效果如gif图:
好了,看完效果图,说说这个加入购物车的动画效果,我是真心觉得挺棒的,然后我就开始搜资料 看大神们的博文demo
然后我了解到一个贝塞尔曲线的名词
手写的从前:
x3、y3
代表控制点的x、y
,即上图动态中的P1
,x2、y2
代表目标点的x、y
,即上图动态中的P2
。绘制路径轨迹已经找到了对应的类与方法,接下来就是在自己项目里的具体应用了。如下图:
首先是商品添加到购物车的轨迹,类似于一条抛物线,Android已经为我们提供了相关的方法–Path类(封装了贝塞尔曲线)。
如果还有不太清楚 可以百度一下贝塞尔曲线
概念,或者自己打开贝塞尔曲线绘制网址 看下效果
或是打开此链接自己试一下效果,会受到启迪---------------------贝塞尔曲线练习网址
思路:
- 确定动画的起终点
- 在起终点之间使用二次贝塞尔曲线填充起终点之间的点的轨迹
- 设置属性动画,ValueAnimator插值器,获取中间点的坐标
- 将执行动画的控件的x、y坐标设为上面得到的中间点坐标
- 开启属性动画
- 当动画结束时的操作
如何获取控件在屏幕中的绝对坐标?
int[] parentLocation = new int[2];
parentView.getLocationInWindow(parentLocation);
1.moveTo(float,float)
用于设置移动路径的起始点Point(x,y),对于android系统来说,屏幕的左上角的坐标是 (0,0) , 我们在做一些操作的时候默认基准点也是 (0,0)。Path 的moveTo 方法可以与此进行一个类比
就是为了改变 Path 的起始点。
2.quadTo(float x1, float y1, float x2, float y2 )
android 只对低阶贝塞尔曲线进行了封装,这是用于设置二次贝塞尔曲线的方法
Path path = new Path();
path.moveTo(startX, startY);
path.quadTo((startX + toX) / 2, startY, toX, toY);
封装工具类
public final class AnimatorUtils {
public static void doCartAnimator(Activity activity, ImageView imageView,
View cartView, final ViewGroup parentView,
final OnAnimatorListener listener) {
//第一步:
//创造出执行动画的主题---imageView
//代码new一个imageView,图片资源是上面的imageView的图片
// (这个图片就是执行动画的图片,从开始位置出发,经过一个抛物线(贝塞尔曲线),移动到购物车里)
if (activity == null || imageView == null || cartView == null || parentView == null) return;
final ImageView goods = new ImageView(activity);
goods.setPadding(1, 1, 1, 1);
//图片切割方式
goods.setScaleType(ImageView.ScaleType.CENTER_CROP);
//获取图片资源
goods.setImageDrawable(imageView.getDrawable());
//设置RelativeLayout容器(这里必须设置RelativeLayout 设置LinearLayout动画会失效)
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(100, 100);
//把动画view添加到动画层
parentView.addView(goods, params);
//第二步:
//得到父布局的起始点坐标(用于辅助计算动画开始/结束时的点的坐标)
int[] parentLocation = new int[2];
//获取购买按钮的在屏幕的X、Y坐标(这也是动画开始的坐标)
parentView.getLocationInWindow(parentLocation);
int startLoc[] = new int[2];
//获取商品图片在屏幕中的位置
imageView.getLocationInWindow(startLoc);
//得到购物车图片的坐标(用于计算动画结束后的坐标)
int endLoc[] = new int[2];
cartView.getLocationInWindow(endLoc);
//第三步:
//正式开始计算动画开始/结束的坐标
//开始掉落的商品的起始点:商品起始点-父布局起始点+该商品图片的一半
float startX = startLoc[0] - parentLocation[0] + imageView.getWidth() / 2;// 动画开始的X坐标
float startY = startLoc[1] - parentLocation[1] + imageView.getHeight() / 2;//动画开始的Y坐标
//商品掉落后的终点坐标:购物车起始点-父布局起始点+购物车图片的1/5
float toX = endLoc[0] - parentLocation[0] + cartView.getWidth() / 5;
float toY = endLoc[1] - parentLocation[1];
//第四步:
//计算中间动画的插值坐标,绘制贝塞尔曲线
Path path = new Path();
//移动到起始点(贝塞尔曲线的起点)
path.moveTo(startX, startY);
//第一个起始坐标越大,贝塞尔曲线的横向距离就会越大 toX,toY:为终点
path.quadTo((startX + toX) / 2, startY, toX, toY);
final PathMeasure pathMeasure = new PathMeasure(path, false);
//实现动画具体博客可参考 鸿洋大神的https://blog.csdn.net/lmj623565791/article/details/38067475
ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, pathMeasure.getLength());
//设置动画时间
valueAnimator.setDuration(700);
//LinearInterpolator补间器:它的主要作用是可以控制动画的变化速率,比如去实现一种非线性运动的动画效果
//具体可参考郭霖大神的:https://blog.csdn.net/guolin_blog/article/details/44171115
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) { //更新动画
float value = (Float) animation.getAnimatedValue();
float[] currentPosition = new float[2];
pathMeasure.getPosTan(value, currentPosition, null);
goods.setTranslationX(currentPosition[0]);//改变了ImageView的X位置
goods.setTranslationY(currentPosition[1]);//改变了ImageView的Y位置
}
});
//第五步:
//开始执行动画
valueAnimator.start();
//第六步:
//对动画添加监听
valueAnimator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
//onAnimationStart()方法会在动画开始的时候调用
}
//onAnimationEnd()方法会在动画结束的时候调用
@Override
public void onAnimationEnd(Animator animation) {
//把移动的图片imageView从父布局里移除
parentView.removeView(goods);
if (listener != null) {
listener.onAnimationEnd(animation);
}
}
@Override
public void onAnimationCancel(Animator animation) {
//onAnimationCancel()方法会在动画被取消的时候调用
}
@Override
public void onAnimationRepeat(Animator animation) {
//onAnimationRepeat()方法会在动画重复执行的时候调用
}
});
}
//封装的旋转动画方法
public static void viewRotate(Context context, View view) {
if (view == null) return;
//加载动画
Animation animation = AnimationUtils.loadAnimation(context, R.anim.anim_round_rotate);
//LinearInterpolator补间器:它的主要作用是可以控制动画的变化速率,比如去实现一种非线性运动的动画效果
//具体可参考郭霖大神的:https://blog.csdn.net/guolin_blog/article/details/44171115
LinearInterpolator interpolator = new LinearInterpolator();
animation.setInterpolator(interpolator);
//设置动画
view.startAnimation(animation);
}
public interface OnAnimatorListener {
void onAnimationEnd(Animator animator);
}
}
Tips
工具类中涉及到的相关博文地址如下 有兴趣可以一观:
鸿洋大神的实现动画具体博文
郭霖大神的LinearInterpolator补间器博文
Android属性动画完全解析,属性动画的基本用法
工具使用方法:
@BindView(R.id.container)
ConstraintLayout mConstraintLayout;
@BindView(R.id.iv_shopping_cart)
ImageView mIvShoppingCart;
ImageView imageView = (ImageView) adapter.getViewByPosition(position + 1, R.id.iv_img);
mPresenter.addToCart(1, goodsModel.getGoodsId(), true, false);
//在接口返回数据之后调用此方法
AnimatorUtils.doCartAnimator(this, imageView, mIvShoppingCart, mConstraintLayout, null);
总结:
属性动画实现的核心-----ValueAnimator
ValueAnimator是整个属性动画机制当中最核心的一个类,前面我们已经提到了,属性动画的运行机制是通过不断地
对值进行操作来实现的,而初始值和结束值之间的动画过渡就是由ValueAnimator这个类来负责计算的。它的内部使用一种时间循环的机制来计算值与值之间的动画过渡,我们只需要将初始值和结束值提供给ValueAnimator,并且告诉它动画所需运行的时长,那么ValueAnimator就会自动帮我们完成从初始值平滑地过渡到结束值这样的效果。除此之外,ValueAnimator还负责管理动画的播放次数、播放模式、以及对动画设置监听器等,确实是一个非常重要的类。
其实添加购物车的动画实现就是对商品的x,y坐标不断赋值,不断更新,达到抛物线的效果。
1.调用ValueAnimator的ofFloat()方法就可以构建出一个ValueAnimator的实例,ofFloat()方法当中允许传入多个float类型的参数,这里传入0和mPathMeasure.getLength()就表示将值从0平滑过渡到mPathMeasure.getLength()。
2.通过addUpdateListener()方法来添加一个动画的监听器,在动画执行的过程中会不断地进行回调,我们只需要在回调方法当中通过mPathMeasure.getPosTan()方法将当前的值取出并设置给商品,就可以达到动画效果了。
3.addListener方法来监听动画完成以后的操作,移除动态添加的view。
有问题欢迎探讨!
与君共勉
我要一步一步往上爬
在最高点乘着叶片往前飞
任风吹干流过的泪和汗
我要一步一步往上爬
等待阳光静静看着它的脸
小小的天有大大的梦想
我有属于我的天
任风吹干流过的泪和汗
总有一天我有属于我的天