canvas：摸得著的前端動畫_dkplus

你在凝望深淵的時候，深淵也在凝望你。——Who（你猜

這也是互動嗎？

什麼叫互動

看電影是互動嗎？不是，你的行為影響不了畫面（你把螢幕砸壞的行為除外

玩遊戲是互動嗎？是的，你能控制遊戲角色的行為。

你的行為，比如移動滑鼠、敲下鍵盤、在攝像頭前搖搖頭、喊一聲Siri，通過輸入裝置能對畫面產生變化的，就叫互動。

事件與監聽

你的特定行為能被電腦感知，是因為觸發（emit）了特定事件，同時電腦有監聽（on）這一事件，並執行鍼對這一事件發生後的對應操作（callback）。

你移動滑鼠，畫面就會有個滑鼠跟著你的行為移動；

你點選圖示，畫面上的圖示就會是選中狀態；

你拿著滑鼠摳腳，畫面根本不會有什麼反應，因為它沒有監聽你用滑鼠摳腳這種事件。

滑鼠事件獲取互動資料

我們拿滑鼠事件舉例，簡單講講滑鼠與螢幕的互動。

滑鼠事件的目的大多數是根據事件型別（按下、鬆開、移動）獲取所在的位置（x，y）。

``` mousedown mouseup mouseenter mouseleave mouseout mouseover ...

```

試下在任意一個網頁的控制檯輸入並執行window.onmousedown = console.log，再點選網頁的任意位置，就會輸出以下資訊：

我截取了部分即便是非程式設計師也多少能看得懂的屬性

``` altKey: true // 是否同時按下alt鍵 button: 0 // 左鍵、滾輪鍵or右鍵 ctrlKey: false // 是否同時按下ctrl鍵 shiftKey: false // 是否同時按下shift鍵 x: 852 y: 180

```

x、y就是滑鼠位置，用於判斷點是否在形狀之內，比如有沒有選中圖示
button就是按鍵型別，玩CS的右鍵瞄準、左鍵攻擊
點滑鼠的時候同時點選ctrl能選中多個檔案

除了滑鼠事件以外，還有其他輸入裝置產生互動的事件，比如鍵盤（keydown、keyup）、觸控屏（touchstart、touchend），這些事件存在的意義就是讓我們瞭解使用者互動行為的詳細資訊，然後寫一些對應的操作，比如動畫。

互動對資料的影響

如果資料也符合牛頓第一定律，那麼資料一開始是靜止的，它發生變化一定是受到了外力的作用，這個外力就是互動。

互動會觸發事件，事件記錄當時的互動資料，互動資料和其他資料之間會有運算。

移動滑鼠，滑鼠的位置（x，y）必然變化，屬於互動資料的變化
畫面有一個按鈕，屬於其他資料
滑鼠來到按鈕上，兩者之間的運算得出一個結果：isIntersected: true，這就是互動對資料的影響

你喜歡怎麼表達這個運算結果都可以，溫柔點，你可以讓按鈕變色；粗暴點，你可以讓它爆炸。

資料的變化引起的動畫

畫面的本質是資料，資料發生變化，畫面隨之變化。

我們遵循以下規則：

互動->資料，通過互動改變資料
資料->繪製，根據當前的資料繪製畫面

也就是說，互動不直接呼叫繪製函式，第1條是本篇文章的核心，第2條是上一篇的核心，資料靜止就是靜態畫面，資料變化就變成了動畫。

實踐

上一篇，我們寫了一個簡單的二維運動，我們在這個二維運動的基礎上加入滑鼠互動：圓心在滑鼠方圓五百里內（換算一下就是100px，當然這是我瞎扯的）的粒子變大

獲取互動資料

這裡的互動資料是滑鼠位置，設一個全域性變數mouse

``` const mouse = { x: 0; y: 0; }

```

監聽滑鼠移動事件，移動時更新mouse

``` window.addEventListener('mousemove', (e) => { mouse.x = e.x; mouse.y = e.y; });

```

通過互動更新資料

沿用上一篇文章的結構，粒子類有個update函式，在這裡更新互動帶來的資料影響。

在此增加minR和maxR作為粒子變大變小的極值。

``` class Particle { ... update() { ... // 勾股定理，兩點距離<100，粒子變大，否則變小 if (Math.sqrt((mouse.x - this.x) 2 + (mouse.y - this.y) 2) <= 100) { if (this.r < this.maxR) { this.r += 1; } } else if (this.r > this.minR) { this.r -= 1; }

this.x += this.dx;
this.y += this.dy;
this.draw();

} }

```

效果如下：

如果你覺得這個不是很有趣，不妨看看下面這個效果：

滑鼠鬆開的時候做拋體運動
滑鼠按下的時候做向心加速運動

可以提前思考一下這個效果怎麼實現，如無意外，後兩篇就是介紹向量和力的可視化了。

つづく

本文簡單介紹並實現了互動事件在canvas中的運用，喜歡的朋友可以點個贊，也歡迎大家關注dkplus公眾號，沒東西寫的時候說不定就開始畫畫了。