歡迎來(lái)到【暢哥聊技術(shù)】前端圖形學(xué)相關(guān)技術(shù)文章，更多精彩內(nèi)容持續(xù)更新中,敬請(qǐng)關(guān)注。

前面我們說(shuō)到了小球的彈跳運(yùn)動(dòng)，通過(guò)一個(gè)方向的加速度和摩擦力去影響小球的動(dòng)畫，其目標(biāo)點(diǎn)也是一個(gè)固定不變的，似乎有些單調(diào)。

那么我們今天繼續(xù)小球的彈跳運(yùn)動(dòng)的深入，先來(lái)看下面的示例：

傲嬌的小球

相信以上的類似動(dòng)畫大家應(yīng)該看見過(guò)很多，這樣的動(dòng)畫很容易被大家所接受，原因很簡(jiǎn)單，因?yàn)樗耆衔覀儸F(xiàn)實(shí)生活中的物理現(xiàn)象。

接下來(lái)我?guī)е蠹襾?lái)分析一下這種動(dòng)畫的制作過(guò)程。

分析

小球是和我們的鼠標(biāo)進(jìn)行交互的，因此我們?cè)诩媛牣嫴荚氐氖髽?biāo)移動(dòng)事件，并獲取鼠標(biāo)相對(duì)于畫布的坐標(biāo)。

把鼠標(biāo)轉(zhuǎn)換后的坐標(biāo)作為小球的運(yùn)動(dòng)目標(biāo)點(diǎn)Target

定義彈跳系數(shù)，摩擦系數(shù)和重力。

分別計(jì)算X軸和Y軸的加速度。

分別將小球的速度*摩擦系數(shù)，這樣才能便小球速度不斷變小，最終停下來(lái)。

從上面的gif圖可以看出，小球中心點(diǎn)和鼠標(biāo)有一定的距離，這個(gè)距離我們就以重力去表示了。

最后去繪制小球和鼠標(biāo)兩點(diǎn)的連線。

核心代碼：

//鼠標(biāo)起始位置。var mouse = {x:0,y:0};//兼聽畫布的鼠標(biāo)移動(dòng)事件，并計(jì)算出鼠標(biāo)相對(duì)于畫布的坐標(biāo)。canvas.onmousemove = function(e){mouse.x = e.pageX - canvas.offsetLeft;mouse.y = e.pageY - canvas.offsetTop; }//定義彈動(dòng)系數(shù)，摩擦系數(shù)，重力常量var easeing = 0.15,k = .9,g = 15;//兩個(gè)方向的加速度的計(jì)算方法(和昨天一樣)var ax = (mouse.x - ball.x ) * easeing;var ay = (mouse.y - ball.y ) * easeing;//將加速度附加到小球的速度上ball.vx += ax ;ball.vy +=ay;//給小球加上摩擦力的影響。ball.vx *= k;ball.vy *= k;//將小球的最終速度作用在小球的xy屬性上。ball.x += ball.vx;ball.y += ball.vy;//由于小球和鼠標(biāo)有重力的影響，所以我們給y軸的速度一個(gè)重力的作用。ball.vy += g;

最終全部代碼：

源碼索取請(qǐng)私信我

其實(shí)看代碼數(shù)量并不多，大家剛開始可能是被鼠標(biāo)晃暈了頭，其實(shí)可以這樣想，鼠標(biāo)操作是一個(gè)循環(huán)的操作，假如鼠標(biāo)就動(dòng)一下，把這個(gè)過(guò)程的動(dòng)畫實(shí)現(xiàn)了，其它的就好辦了。

總結(jié)：

其實(shí)不難發(fā)現(xiàn)，任何看看似復(fù)雜的動(dòng)畫，細(xì)心的去分析，拆解找到其中的原理，我們也可制作我們自己想要的動(dòng)畫。

任何項(xiàng)目的開發(fā)，動(dòng)畫的交互造成不能天馬行空，一定要符合物理現(xiàn)象，只有這樣才能被用戶所接受。

物理學(xué)中的重力、摩擦力、加速度在圖形學(xué)中被廣泛應(yīng)用。多嘗試、理解方可熟能生巧。

以上就是今天的分享的內(nèi)容，喜歡的點(diǎn)贊關(guān)注，不喜歡的解散。。。

這里是【暢哥聊技術(shù)】前端圖形學(xué)相關(guān)技術(shù)文章，更多精彩內(nèi)容持續(xù)更新中。。。

未完待續(xù)。。。

總結(jié)

以上是生活随笔為你收集整理的前端图片上坐标连线_前端图形学（十三）——弹跳运动的深入之傲娇的小球的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。