1. 思路一：
- 思路：考虑到平抛可以分解为水平方向的匀速运动，以及垂直方向的匀加速运动；
- 方法：利用JS，第一个想到的就是这个方法；通过setInterval()改变小球的top和left的值。需要注意的是要通过id手动清除setInterval()。
- 执行速度： 不成功！
- 关键代码
- 问题：其实这个代码并没有让小球动起来，我过了几遍逻辑没有找到问题。我要去问问学姐，一会儿会来改！
2. 思路二：
- 思路： 想到了CSS3的动画，这么完美的方法！请道歉怎么没有立刻想到！！（JS直接操作的DOM的方法以失败告终，当然我一会儿会会来改的！）
- 需要一个外层盒子，来改变水平方向的距离；
- 小球改变垂直方向的距离；
- 方法： animation, 注意兼容性问题~
- 执行速度：
- 关键代码：
3. 思路三：
- 思路： 同样是CSS3动画解决，这次使用的是transition。需要注意的是transition和animation的区别，transition是需要触发一个事件的，并且只有两帧；
- 方法：
- 只需要写一个小球，通过transition改变垂直（top）与水平（left）的距离；
-
执行速度：
-
关键代码：
-
比较（由于第一个方法没有成功，因此暂且比较CSS3的两种方法）：
- 渲染耗时：transition：38.00ms； animation：62.90ms；
- 原因分析：（在网上搜了一下）使用translate会触发硬件加速。缩短的绘制时间。transition没有利用到硬件加速，而且会触发多次repaint，所以会感觉有点卡顿，不够流畅。
- 总结：
- 其实绘制速度曲线的数学原理是贝塞尔函数，在实现一个目标时应该更加关注原理；
- 贝塞尔函数：是 animation-timing-function 和 transition-timing-function 中一个重要的内容。
cubic-bezier(<x1>, <y1>, <x2>, <y2>)
ease：cubic-bezier(.25, .1, .25, 1);
liner：cubic-bezier(0, 0, 1, 1) / cubic-bezier(1, 1, 0, 0);
ease-in：cubic-bezier(.42, 0, 1, 1);
ease-out：cubic-bezier(0, 0, .58, 1);
ease-in-out：cubic-bezier(.42, 0, .58, 1);
In Out . Back（来回的缓冲效果）：cubic-bezier(0.68, -0.55, 0.27, 1.55);
- 参考：W3School； MDN；
