加入购物车抛物线效果的基本实现(一)

写在前面

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

准备开始

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

原理

y = ax² + bx + c

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

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

1. a的正负表示抛物线的开口方向,正表示向上,负表示向下,a的大小反应抛物线的开口大小,a绝对值越大开口越小抛物线越陡；
2. b再除以负的两倍的a,就得到了抛物线的对称轴横坐标；-b加上c为抛物线的准线的纵坐标；
3. c当然就是截距了,就是抛物线在y轴上的横坐标；

分析

因为我们只能获取商品位置和购物车位