一个抛物线的思考

  最近做一个大DEMO去了，把瀑布流，曝光，轮播，跳转，回到首页全部整理成了模块，使用了require.js和r.js去整理了这些模块，最大的体会就是，看文章和教程，仿佛自己都会了，baseUrl,paths，define···最后上手的时候才真正记牢了；

---

  今天在微信一个公众号文章里，说如何分析问题，给出了做一个抛物线的DEMO的需求考我们，不能比科班，人家马上就Google了对应的公式，模块，引入页面··OK，完成了；我这个非科班菜鸟只能老老实实分析，下面介绍一下我分析这个DEMO的思路；

• 1.一个抛物线，学过高中物理的都知道，分解成X轴和Y轴的运动，在这里X轴可以一直运动，Y轴会在某一个点下降，最后停止；
• 2.抽象成数学模型，在一个二维空间中，球的移动，其实就是不断修改其位置坐标，如果时间粒度足够小，那么用微积分的思维就可以理解成一个连贯的动作；
• 3.回到代码中：
  • 1：一个球就是一个div，宽高设定相等，border-radius：50%;
  • 2：移动就是让父容器的position:relative，球的position：absolute；利用js修改其left及top就可以实现移动；
  • 3：运动就是不断的移动，用上了setInterval，不断循环去修改位置，就达到运动的效果；
  • 4：最后抛物线会有一个顶点，之后就下降，最后停止，JS的修改位置，X轴上一直在修改，Y轴在到达顶点之后会下降，最终X轴和Y轴双方都停止修改，完成一个抛物线，那么最终的结果就是清除这个setInterval，世界重新回归和平，赞美太阳；

其实我就做了上述三件微小的事情，很惭愧；

  中间还有很多细节，例如球的初始位置，如何界定球到达碰撞边界，如何切换Y轴上的位移，如何累加位移，以及如何Debug···不过幸运的是我花了，我也不知道花了多久，反正思考和实现的过程是非常快的，也是非常享受的，最后我就放出DEMO观看地址，以及Github的代码；

按DEMO可赛艇
Github代码