點擊右上角的關注，不定期前端幹貨分享！！

我的前端圖形學系列文章終于迎來了激動人心的時刻，我們要進入物理世界去探索了。主今天的主題，【運動】

在進入物理世界之前，我們所有的運動都是作用在一個小球身上，所以我們的當務之急就是封裝一個小球類，貼代碼：

es6類的基礎、解構賦值Canvas基礎這裡就不過多的贅述了

勻速直線運動

路程(s) = 時間(t) * 速度(v) 路程随着時間的增加而增加，因為速度恒定。

很簡單的公式，這是初中的知識，也很容易理解，那麼如果把它應用到前端中，我們來模拟下這個過程。

var canvas = document.querySelector('canvas'); var context = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var {width,height} = canvas; var ball = new Ball({ x:50, y:100 }).render(context); var speed = 1; (function move(){ context.clearRect(0,0,width,height); window.requestAnimationFrame(move); ball.x = speed; ball.render(context); })();

效果：

一個很最最基礎的動畫就是這樣的

這裡解釋一下：這裡我們把路程作用在小球對象的X屬性上，speed參數作為速度，因為是勻速運動，所以speed恒定不變，而時間我們則是用requestAnimationFrame來模拟。這樣我們就可以把這個最簡單的公式應用在我們的圖形上了。

正弦曲線運動

好吧，又要杠上這騷氣的正弦曲線了，接下來我們讓小球沿着正弦曲線來運動。效果：

正弦曲線變化的小球

canvas.width = window.innerWidth; canvas.height = window.innerHeight; var {width,height} = canvas; var ball = new Ball({ x:50, y:100, fillStyle:'#f90' }).render(context); var amplitude = 100;//振幅 var vx = 1; var angle = 0; (function move(){ context.clearRect(0,0,width,height); window.requestAnimationFrame(move); ball.x = vx; ball.y = Math.sin(angle) * amplitude 120; angle =0.05; angle%=Math.PI*2; ball.render(context); })();

這裡我們實例化了一個小球，然後設置了水平方向的速度vx為1，y軸的速度則為正弦曲線。amplitude為振幅，120為常數，将小球往下平移120。

這裡angle為弧度，我們知道正弦曲線的周期是Math.PI*2 所以angle不用大于Math.PI*2

所以我設置了angle %= Math.PI*2

脈沖運動

前面兩個小的demo，我們都是慣性思維，什麼意思呢？就是我們總是想着把速度作用在x,y坐标上，事實上，它可以運用在其它的屬性上，可以達到意想不到的效果哦。

接下來要說到的就是脈運動了。先來看效果：

這裡我們是将運動屬性賦值給了小球的scaleX和scaleY屬性上，我們将正弦曲線變換作用在了小球的縮放屬性上了，形成了上面的效果，代碼如下：

感覺正弦曲線快被我玩兒壞了^_^

總結

1、結合初中的簡單的物理學公式，映射到了前端圖形學的界面開發中，給物理公式公式賦能。

2、當然今天隻是前端圖形學與物理最簡單的結合，後面繼續深入物理學與圖形學更多美妙的結合，看看物理學和圖形學究竟能擦出什麼樣的火花。

3、正弦曲線靈活運用。

這裡是【暢哥聊技術】前端圖形學相關技術文章，更多精彩内容敬請關注。未完待續...

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部