评论走起

添加商品至购物车---加减数量--小球抛物线动画---个人实现的一种思路-js

在很多电商类网站中,特别是移动端购物类、外卖类网站,常见的有一种交互:点击数量加减按钮(本文专指增加),会有一个小球以抛物线的轨迹添加至购物篮中。上图来得更加清楚,图片如下:

如果单纯想实现这种效果,暂不考虑应用环境及需求,有很多种方式可以实现这种动画:

方法一

1.运用js中setInterval函数,设置时间间隔是20ms(参考值);
2.获取小球运动起始点坐标以及终点坐标,两者都是可以直接求得;
3.运动轨迹模拟弹射过程(分为水平方向和垂直方向);
4.记录每一个时刻的坐标值,分别赋值给小球的top和left
5.此方法回引起元素的位置变化,从而导致多次重绘和重新

方法二

1.运用js中的canvas;
2.然后进行绘图,运动轨迹可以利用贝塞尔曲线;
3.绘制符合条件的曲线图;

方法三

1.运用css中的trasnform:rotate(N deg);
2.与此进行配合的是transform-origin属性;
3.运动轨迹可以通过“画一个圆”来实现;

到底是选用哪一种方法,大多都会结合需求和性能两方面来考虑。
[ol]
[li]a.对于运动轨迹比较多样化且对运动时间和运动速度都有要求的需求来说,使用canvas绘图会更加有效率一些,再结合canvas库,能够绘制出很多酷炫的效果[/li]
[li]b.如果需求相对来说比较简单的话,对运动曲线的要求不是那么丰富的话,采用方法一和方法三是比较高效的方法。本文的侧重点是比较方法一和方法三这两种方法,比较的指标的页面的性能。[/li]
[/ol]
页面的性能优化是一个移动端页面考虑的重要方向之一,其中页面频繁重绘和重排会显著增加浏览器的压力,降低性能。其中,动态改变一个Dom元素的宽高以及在页面中所处于的位置就明显导致页面的重绘重排。所以方法一会加大页面的绘制压力。在css3属性中,transform属性能够独立生成一个RenderLayer,触发GPU加速,使得性能消耗降到最低。详细参考见《CSS Animation性能优化
在方法三中,属性rotate和transform-origin起到了关键作用,能够直接体现一个元素旋转的角度以及旋转的中心,这就出现圆弧轨迹的原因。
transform-origin:旋转位置的基准点,默认值是(50%,50%),以左上角为(0,0)
由于我们想要的是一段圆弧,那么如何来确定旋转中心以及旋转角度呢,让落点刚好在“购物车”那个图标中心点,通过如下几何图形会更加明了一些:

注:
1.代码中真正和本文讲的方法直接关联的是以下对象/方法:flyBall。其中用到了动态改变style样式
2.要学习的东西还有很多,欢迎批评指正,共同进步.

应@15589205052的提议,现附上数学推导过程,见下图:

受排版限制,可运行以上代码,即可看到完整的推导过程


打赏
评论