??最近做一個(gè)大DEMO去了厚者，把瀑布流躁劣，曝光，輪播籍救，跳轉(zhuǎn)习绢，回到首頁全部整理成了模塊，使用了require.js和r.js去整理了這些模塊蝙昙，最大的體會(huì)就是闪萄，看文章和教程，仿佛自己都會(huì)了奇颠，baseUrl,paths败去，define···最后上手的時(shí)候才真正記牢了；
??今天在微信一個(gè)公眾號(hào)文章里烈拒，說如何分析問題圆裕，給出了做一個(gè)拋物線的DEMO的需求考我們，不能比科班荆几，人家馬上就Google了對(duì)應(yīng)的公式吓妆，模塊，引入頁面··OK吨铸，完成了行拢；我這個(gè)非科班菜鳥只能老老實(shí)實(shí)分析，下面介紹一下我分析這個(gè)DEMO的思路诞吱；
- 1.一個(gè)拋物線舟奠，學(xué)過高中物理的都知道，分解成X軸和Y軸的運(yùn)動(dòng)房维，在這里X軸可以一直運(yùn)動(dòng)沼瘫，Y軸會(huì)在某一個(gè)點(diǎn)下降，最后停止咙俩；
- 2.抽象成數(shù)學(xué)模型耿戚，在一個(gè)二維空間中，球的移動(dòng)，其實(shí)就是不斷修改其位置坐標(biāo)溅话，如果時(shí)間粒度足夠小晓锻，那么用微積分的思維就可以理解成一個(gè)連貫的動(dòng)作歌焦；
- 3.回到代碼中：
- 1：一個(gè)球就是一個(gè)
div飞几，寬高設(shè)定相等，border-radius：50%; - 2：移動(dòng)就是讓父容器的
position:relative独撇，球的position：absolute屑墨；利用js修改其left及top就可以實(shí)現(xiàn)移動(dòng)； - 3：運(yùn)動(dòng)就是不斷的移動(dòng)纷铣，用上了
setInterval卵史，不斷循環(huán)去修改位置，就達(dá)到運(yùn)動(dòng)的效果搜立； - 4：最后拋物線會(huì)有一個(gè)頂點(diǎn)以躯，之后就下降，最后停止啄踊，JS的修改位置忧设，X軸上一直在修改，Y軸在到達(dá)頂點(diǎn)之后會(huì)下降颠通，最終X軸和Y軸雙方都停止修改址晕，完成一個(gè)拋物線，那么最終的結(jié)果就是清除這個(gè)
setInterval顿锰，世界重新回歸和平谨垃，贊美太陽；
- 1：一個(gè)球就是一個(gè)
其實(shí)我就做了上述三件微小的事情硼控，很慚愧刘陶；
??中間還有很多細(xì)節(jié)，例如球的初始位置牢撼，如何界定球到達(dá)碰撞邊界匙隔，如何切換Y軸上的位移，如何累加位移浪默，以及如何Debug···不過幸運(yùn)的是我花了牡直，我也不知道花了多久，反正思考和實(shí)現(xiàn)的過程是非衬删觯快的碰逸，也是非常享受的，最后我就放出DEMO觀看地址阔加，以及Github的代碼饵史；
