实现加入购物车抛物线效果

写在前面

最近天气刚刚转热，心想应该淘点春装卖卖骚了，然后某宝逛的时候发现其加入购物车的动画效果不错，既完善了交互，又有功能导向作用，用户体验杠杠滴～作为一名前端汪，也想自己动手实现下此类酷炫的效果。抽空写了个demo，虽然完成的效果比较粗糙，但是拥有毛坯房总好过租房吧哈哈，日后再完善不迟。现在讲讲自己的经验，顺便理理思路，加深印象：）

准备开始

开始只是在纸上作了草图，构思了下，才发现如果要一步到位实现像淘宝那样，有升有降，有快有慢的效果，还是比较吃力的，也比较花时间。所以，本文只是实现一个匀速的，单方向下落的抛物线效果。

原理

y = ax² + bx + c

既然是作抛物线运动，想必这个公式你应该非常熟悉了。其实所有有规律的曲线运动，都符合某一种定律，那就是前辈总结的数学公式；想当年数学老师说的“学好数理化，走遍天下都不怕”，不是没有道理。

简单回忆下抛物线公式，其中的a,b,c三个参数为常量，标志着每条抛物线的特性:

1. a的正负表示抛物线的开口方向,正表示向上,负表示向下,a的大小反应抛物线的开口大小,a绝对值越大开口越小抛物线越陡；

2. b再除以负的两倍的a,就得到了抛物线的对称轴横坐标；-b加上c为抛物线的准线的纵坐标；

3. c当然就是截距了,就是抛物线在y轴上的横坐标；

分析

因为我们只能获取商品位置和购物车位置两个坐标，若想以两个坐标位置求取三个未知参数abc显然是不可取的，所以为了实现初步简单的效果，我们假设抛物线经过原点(0,0), 此时c为0，这样就可以计算a和b了，运用初中数学知识就可以完美解决~

简单概括下思路：

1. 获取商品位置和购物车位置的坐标；注意我们的坐标系Y轴向下为正（符合网页的坐标系）

2. 点击商品时候加入购物车，执行函数中应该在body中创建一个div dom(运动点)，给它添加各种style， 然后起始坐标为商品按钮的右侧中点(稍加计算)，终点为购物车按钮的位置坐标

3. 添加计时器，如果运动点的x坐标小于终点x坐标，则其自身每次执行循环自加一定像素，而y轴根据我们计算出的a、b值和x计算得出。

4. 达到终点后（运动点x等于购物车位置坐标x）后清空计时器，移除运动点dom

实践

其实在coding过程中，感觉有点阻碍的是计算a,b的值（因为以前学的数学知识都还给老师了-。-）,废话不多说，还是show you the code 吧~

<iframe height='190' scrolling='no' title='gwcpwx' src='//codepen.io/BenjaminShih/embed/mRZMPp/?height=190&theme-id=light&default-tab=js,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen gwcpwx by junnan shi (@BenjaminShih) on CodePen.
</iframe>

基本功能是实现了，但是后期需要有更多的优化，比如说假如贝塞尔函数控制速度的快慢，将单一方向运动改为上抛曲线运动等等，视觉效果和用户体验更好，本文暂时就阐述到此，下一章将会加入优化~