写在前面
最近天气刚刚转热，心想应该淘点春装卖卖骚了，然后某宝逛的时候发现其加入购物车的动画效果不错，既完善了交互，又有功能导向作用，用户体验杠杠滴～作为一名前端汪，也想自己动手实现下此类酷炫的效果。抽空写了个demo，虽然完成的效果比较粗糙，但是拥有毛坯房总好过租房吧哈哈，日后再完善不迟。现在讲讲自己的经验，顺便理理思路，加深印象：）
准备开始开始只是在纸上作了草图，构思了下，才发现如果要一步到位实现像淘宝那样，有升有降，有快有慢的效果，还是比较吃力的，也比较花时间。所以，本文只是实现一个匀速的，单方向下落的抛物线效果。
原理y = ax² + bx + c
既然是作抛物线运动，想必这个公式你应该非常熟悉了。其实所有有规律的曲线运动，都符合某一种定律，那就是前辈总结的数学公式；想当年数学老师说的“学好数理化，走遍天下都不怕”，不是没有道理。
简单回忆下抛物线公式，其中的a,b,c三个参数为常量，标志着每条抛物线的特性:
a的正负表示抛物线的开口方向,正表示向上,负表示向下,a的大小反应抛物线的开口大小,a绝对值越大开口越小抛物线越陡；
b再除以负的两倍的a,就得到了抛物线的对称轴横坐标；-b加上c为抛物线的准线的纵坐标；
c当然就是截距了,就是抛物线在y轴上的横坐标；
分析因为我们只能获取商品位置和购物车位置两个坐标，若想以两个坐标位置求取三个未知参数abc显然是不可取的，所以为了实现初步简单的效果，我们假设抛物线经过原点(0,0), 此时c为0，这样就可以计算a和b了，运用初中数学知识就可以完美解决~
简单概括下思路：
获取商品位置和购物车位置的坐标；注意我们的坐标系Y轴向下为正（符合网页的坐标系）
点击商品时候加入购物车，执行函数中应该在body中创建一个div dom(运动点)，给它添加各种style， 然后起始坐标为商品按钮的右侧中点(稍加计算)，终点为购物车按钮的位置坐标
添加计时器，如果运动点的x坐标小于终点x坐标，则其自身每次执行循环自加一定像素，而y轴根据我们计算出的a、b值和x计算得出。
达到终点后（运动点x等于购物车位置坐标x）后清空计时器，移除运动点dom
实践其实在coding过程中，感觉有点阻碍的是计算a,b的值（因为以前学的数学知识都还给老师了-。-）,废话不多说，还是show you the code 吧~
基本功能是实现了，但是后期需要有更多的优化，比如说假如贝塞尔函数控制速度的快慢，将单一方向运动改为上抛曲线运动等等，视觉效果和用户体验更好，本文暂时就阐述到此，下一章将会加入优化~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116589.html
写在前面 最近天气刚刚转热，心想应该淘点春装卖卖骚了，然后某宝逛的时候发现其加入购物车的动画效果不错，既完善了交互，又有功能导向作用，用户体验杠杠滴～作为一名前端汪，也想自己动手实现下此类酷炫的效果。抽空写了个demo，虽然完成的效果比较粗糙，但是拥有毛坯房总好过租房吧哈哈，日后再完善不迟。现在讲讲自己的经验，顺便理理思路，加深印象：） 准备开始 开始只是在纸上作了草图，构思了下，才发现如果要一步...
摘要：上图即为归零后的坐标系，对称轴直线为在抛物线方程中，值得正负代表着抛物线的开口方向，那么值的绝对值也和抛物线的开口大小有着反比例的关系。 废话不多说,先上DEMO~http://jsrun.net/PxKKp?uid=483再上源码~https://github.com/Nelson2016... 运行的原理 很简单的一个小特效，接下来来说一下他的原理。 显而易见，这小东西肯定和抛物...
摘要：上图即为归零后的坐标系，对称轴直线为在抛物线方程中，值得正负代表着抛物线的开口方向，那么值的绝对值也和抛物线的开口大小有着反比例的关系。 废话不多说,先上DEMO~http://jsrun.net/PxKKp?uid=483再上源码~https://github.com/Nelson2016... 运行的原理 很简单的一个小特效，接下来来说一下他的原理。 显而易见，这小东西肯定和抛物...
阅读 2630·2021-10-14 09:47
阅读 4907·2021-09-22 15:52
阅读 3354·2019-08-30 15:53
阅读 1427·2019-08-30 15:44
阅读 669·2019-08-29 16:41
阅读 1644·2019-08-29 16:28
阅读 438·2019-08-29 15:23
阅读 1617·2019-08-26 12:20
