??最近做一個(gè)大DEMO去了，把瀑布流，曝光，輪播，跳轉(zhuǎn)，回到首頁全部整理成了模塊，使用了require.js和r.js去整理了這些模塊，最大的體會就是，看文章和教程，仿佛自己都會了，baseUrl,paths，define···最后上手的時(shí)候才真正記牢了；

??今天在微信一個(gè)公眾號文章里，說如何分析問題，給出了做一個(gè)拋物線的DEMO的需求考我們，不能比科班，人家馬上就Google了對應(yīng)的公式，模塊，引入頁面··OK，完成了；我這個(gè)非科班菜鳥只能老老實(shí)實(shí)分析，下面介紹一下我分析這個(gè)DEMO的思路；

• 1.一個(gè)拋物線，學(xué)過高中物理的都知道，分解成X軸和Y軸的運(yùn)動，在這里X軸可以一直運(yùn)動，Y軸會在某一個(gè)點(diǎn)下降，最后停止；
• 2.抽象成數(shù)學(xué)模型，在一個(gè)二維空間中，球的移動，其實(shí)就是不斷修改其位置坐標(biāo)，如果時(shí)間粒度足夠小，那么用微積分的思維就可以理解成一個(gè)連貫的動作；
• 3.回到代碼中：
  • 1：一個(gè)球就是一個(gè)div，寬高設(shè)定相等，border-radius：50%;
  • 2：移動就是讓父容器的position:relative，球的position：absolute；利用js修改其left及top就可以實(shí)現(xiàn)移動；
  • 3：運(yùn)動就是不斷的移動，用上了setInterval，不斷循環(huán)去修改位置，就達(dá)到運(yùn)動的效果；
  • 4：最后拋物線會有一個(gè)頂點(diǎn)，之后就下降，最后停止，JS的修改位置，X軸上一直在修改，Y軸在到達(dá)頂點(diǎn)之后會下降，最終X軸和Y軸雙方都停止修改，完成一個(gè)拋物線，那么最終的結(jié)果就是清除這個(gè)setInterval，世界重新回歸和平，贊美太陽；

其實(shí)我就做了上述三件微小的事情，很慚愧；

??中間還有很多細(xì)節(jié)，例如球的初始位置，如何界定球到達(dá)碰撞邊界，如何切換Y軸上的位移，如何累加位移，以及如何Debug···不過幸運(yùn)的是我花了，我也不知道花了多久，反正思考和實(shí)現(xiàn)的過程是非常快的，也是非常享受的，最后我就放出DEMO觀看地址，以及Github的代碼；

按DEMO可賽艇
Github代碼