添加商品到购物车-加减商品数量-过渡抛物线动画_网站前端开发_前端开发者

网站前端开发_前端开发者web前端

https://www.rokub.com

方法一

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.起始点坐标A、终点坐标B;(A点坐标是可由点击事件的pageX与PageY以及运动小球自身的大小综合求得,B点坐标可以屏幕高度以及购物车图标的宽高综合求得)
2.为了方便计算,运动轨迹圆弧的圆心设在以落点B的y坐标为值的直线L2上
从已知条件上,可以求出如下结果
1.直线AB的中垂线L1的直线方程,L1与L2的交点即是 运动圆弧的圆心(圆上任意两点的中垂线必过圆心),同时求得圆的半径长度BF;
2.<ABC的大小可以A点与B点的坐标求得(三角形ABC为直角三角形),由于线段AF与线段BF的长度相等,故旋转角为(180-2*<ABC)
至此,transform:rotate()的 旋转角以及transform-origin旋转中心都已经求得
代码如下:
在移动端模式下调试效果更好
html 代码

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

网站前端开发_前端开发者web前端

https://www.rokub.com

» 本文来自:前端开发者 » 《添加商品到购物车-加减商品数量-过渡抛物线动画_网站前端开发_前端开发者》
» 本文链接地址:https://www.rokub.com/2567.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!