在购物网站中,加入购物车的功能是必须的功能,比较大的购物网站(例如:某宝、某东)在点击加入购物车的时候,会将选中商品以抛物线方式弹入购物车内,提高用户体验。网上也有现成的插件和教程,但是感觉写的不是很清楚,自己就摸索了一下,写一写笔记。
实现方法大致分为两种:
1、js计算坐标实现
以点击添加按钮位置作为坐标原点建立坐标系(这里坐标的Y轴与常见坐标系的Y轴方向相反),然后就近取一个坐标点,最后一个点为购物车位置,三个点建立一个y=ax²+bx+c的抛物线,然后水平方向匀速移动改变x值,根据公式计算出y值,改变小球的位置,在视觉暂留的时间段内不停改变小球的位置,实现抛物线特效,特效截图:GitHub地址
2、css利用transition动画实现
将小球的抛物线分解成水平方向和垂直方向,然后小球用两个div(暂定为outer和inner)来实现,outer控制水平方向匀速移动,inner控制垂直方向利用贝塞尔曲线进行变速运动,css设置好transition的transform,然后改变outer和inner的位置(使用translate3d),最后,就能合成一个抛物线的路径,效果图如下:Github地址
两种方法比较:
js方法:
优势:利用js计算坐标,兼容性比较好
劣势:计算比较复杂,肯定也没有css动画来得流畅
css方法:
优势:丝般柔顺,实现简单
劣势:兼容性比较差,要兼容css3的属性
扫描二维码关注公众号,回复:
4869998 查看本文章