歡迎來到【暢哥聊技術】前端圖形學相關技術文章，更多精彩內容持續更新中,敬請關注。

前面我們說到了小球的彈跳運動，通過一個方向的加速度和摩擦力去影響小球的動畫，其目標點也是一個固定不變的，似乎有些單調。

那么我們今天繼續小球的彈跳運動的深入，先來看下面的示例：

傲嬌的小球

相信以上的類似動畫大家應該看見過很多，這樣的動畫很容易被大家所接受，原因很簡單，因為它完全符合我們現實生活中的物理現象。

接下來我帶著大家來分析一下這種動畫的制作過程。

分析

小球是和我們的鼠標進行交互的，因此我們在兼聽畫布元素的鼠標移動事件，并獲取鼠標相對于畫布的坐標。

把鼠標轉換后的坐標作為小球的運動目標點Target

定義彈跳系數，摩擦系數和重力。

分別計算X軸和Y軸的加速度。

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

從上面的gif圖可以看出，小球中心點和鼠標有一定的距離，這個距離我們就以重力去表示了。

最后去繪制小球和鼠標兩點的連線。

核心代碼：

//鼠標起始位置。var mouse = {x:0,y:0};//兼聽畫布的鼠標移動事件，并計算出鼠標相對于畫布的坐標。canvas.onmousemove = function(e){mouse.x = e.pageX - canvas.offsetLeft;mouse.y = e.pageY - canvas.offsetTop; }//定義彈動系數，摩擦系數，重力常量var easeing = 0.15,k = .9,g = 15;//兩個方向的加速度的計算方法(和昨天一樣)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;//由于小球和鼠標有重力的影響，所以我們給y軸的速度一個重力的作用。ball.vy += g;

最終全部代碼：

源碼索取請私信我

其實看代碼數量并不多，大家剛開始可能是被鼠標晃暈了頭，其實可以這樣想，鼠標操作是一個循環的操作，假如鼠標就動一下，把這個過程的動畫實現了，其它的就好辦了。

總結：

其實不難發現，任何看看似復雜的動畫，細心的去分析，拆解找到其中的原理，我們也可制作我們自己想要的動畫。

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

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

以上就是今天的分享的內容，喜歡的點贊關注，不喜歡的解散。。。

這里是【暢哥聊技術】前端圖形學相關技術文章，更多精彩內容持續更新中。。。

未完待續。。。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。