以前經常看到這種效果：在網頁右下角放一個人，然後他的眼珠會跟著滑鼠轉，效果如下：
這個例子來自於CodePen，它是根據滑鼠的位置設定兩個眼球的transform: rotate屬性做的效果。
這種跟著滑鼠移動的小互動一般都比較好玩，所以我突然想到，能不能做一隻會跟著滑鼠走的小狗，最後的效果如下所示：
我們一步步來實現這個效果。
1. 小狗走的動畫
小狗走的動畫應該怎麼實現呢？如果用一張gif，然後根據滑鼠的位置移動這張gif，那麼當滑鼠停下來小狗不動的效果就做不了，因為gif一直在迴圈播放程式碼控制不了這個行為。所以這種簡單方案是不可行的。
然後又想到之前用CSS的animation做過這種逐幀動畫：
所以就有思路了，小狗的動畫也是使用逐幀的動畫，並且用JS控制它的播放。
在網上搜羅了一番，還沒有人做過類似的動畫，不過找到了小狗的素材，這位老兄在教人怎麼畫行走的動物，剛好可以拿來當做我們的素材，把小狗摳出來：
2. 畫一隻在原地踏步的小狗
動畫的第一步先讓小狗原地踏步，即先讓這個動畫能播放起來，然後再做移動的動畫。所謂逐幀動畫就是每隔一小會就播放一幀，這樣連起來就是在動了。
寫一個canvas標籤，然後把它固定到頁面的底部：
<canvas id="dog-walking" style="position:fixed;left:0;bottom:0"></canvas>複製程式碼然後設定寬度為頁面的100%：
let canvas = document.querySelector("#dog-walking");
canvas.width = window.innerWidth;
canvas.height = 200;複製程式碼這樣我們就有一個畫布了。接著要把圖片畫讓去，先要把圖片載入下來，上面我們準備了9張png：0.png ~ 8.png，其中0.png是小狗停住不動的圖片，1.png ~ 8.png是小狗在走的圖片。
在JS裡面怎麼載入圖片呢，用新建一個Image例項的方式，如下程式碼所示：
let img = new Image();
img.onload = function() {
beginDraw(img);
};
img.src = "dog/0.png";複製程式碼由於圖片比較多，我們用類的方式組織我們的程式碼，把資料當作類的屬性，方便存取。如下程式碼所示：
class DogAnimation {
constructor(canvas) {
canvas.width = window.innerWidth;
canvas.height = 200;
// 存放載入後狗的圖片
this.dogPictures = [];
// 圖片目錄
this.RES_PATH = "./dog";
this.IMG_COUNT = 8;
this.start();
}
start() {
this.loadResources();
}
loadResources() {
}
}
let canvas = document.querySelector("#dog-walking");
let dogAnimation = new DogAnimation(canvas);
dogAnimation.start();複製程式碼把狗的圖片放到dogPictures陣列裡面，在loadResources裡面進行載入，如下程式碼所示：
// 載入圖片
loadResources() {
let imagesPath = [];
// 準備圖片的src
for (let i = 0; i <= this.IMG_COUNT; i++) {
imagesPath.push(`${this.RES_PATH}/${i}.png`);
}
let works = [];
imagesPath.forEach(imgPath => {
// 圖片載入完之後觸發Promise的resolve
works.push(new Promise(resolve => {
let img = new Image();
img.onload = () => resolve(img);
img.src = imgPath;
}));
});
return new Promise(resolve => {
// 藉助Promise.all知道了所有圖片都載入好了
Promise.all(works).then(dogPictures => {
this.dogPictures = dogPictures;
resolve();
});
}); // 這裡再套一個Promise是為了讓呼叫者能夠知道處理好了
}複製程式碼這段載入圖片的程式碼藉助了Promise，把每張圖片的載入都當作一個Promise的任務，統一放到一個陣列裡面，然後再借助Promise.all就知道所有的任務都完成了。這樣就拿到了所有已onload的img物件，然後就可以拿來畫了。
在start函式裡面新增一個畫的函式walk的執行：
async start() {
// 等待資源載入完
await this.loadResources();
this.walk();
}
walk() {
}複製程式碼實際上為了畫逐幀動畫，我們要使用window.requestAnimationFrame，這個函式在瀏覽器畫它自己的動畫的下一幀之前會先調一下這個函式，理想情況下，1s有60幀，即幀率為60 fps。因為不管是播放視訊還是瀏覽網頁它們都是逐幀的，例如往下滾動網頁的時候就是一個滾動的動畫，所以瀏覽器本身也是在不斷地在畫動畫，只是當你的網頁停止不動時（且頁面沒有動畫元素），它可能會降低幀率減少資源消耗。
所以程式碼改成這樣：
async start() {
await this.loadResources();
// 給下一幀註冊一個函式
window.requestAnimationFrame(this.walk.bind(this));
}
walk() {
// 繪製狗的圖片
// 繼續給下一幀註冊一個函式
window.requestAnimationFrame(this.walk.bind(this));
}複製程式碼我們使用了一個bind(this)，它的作用是讓walk函式的執行上下文還是指向當前類的例項。
現在怎麼讓狗動起來呢？最簡單的我們可以每隔0.1s就畫一幀，這樣就會連起來，形成一個動畫，為此我們需要記錄上一次畫的時間，然後判斷當前時間與上一次的時間是否大於0.1s，如果是的話就畫下一幀，否則什麼也不用幹。因為上文提過，1s最多有60幀，每一幀間隔 1s / 60 = 16.67ms。如下程式碼所示，先在constructor新增幾個變數，包括一個記錄上一幀時間的變數：
constructor(canvas) {
this.canvas = canvas;
this.ctx = canvas.getContext("2d");
// 記錄上一幀的時間
this.lastWalkingTime = Date.now();
// 記錄當前畫的圖片索引
this.keyFrameIndex = -1;
this.start();
}複製程式碼然後在walk函式裡面進行繪製，在畫的時候每次畫都取下張圖片，即下一幀的圖片，不斷迴圈：
walk() {
// 繪製狗的圖片，每過100ms就畫一張
let now = Date.now();
if (now - this.lastWalkingTime > 100) {
// 先清掉上一次畫的內容
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
// 獲取下一張圖片的索引
let keyFrameIndex = ++this.keyFrameIndex % this.IMG_COUNT;
let img = this.dogPictures[keyFrameIndex + 1];
// img, sx, sy, swidth, sheight
this.ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight,
// dx = 20, dy, dwidth, dheight
20, 20, 186, 162);
this.lastWalkingTime = now;
}
// 繼續給下一幀註冊一個函式
window.requestAnimationFrame(this.walk.bind(this));
}複製程式碼這樣我們就有了一隻在原地踏步的小狗：
然後讓它往前走。
3. 讓小狗往前走
上面在drawImage的傳參固定dx = 20，如果不斷加大這個dx，那麼它就往前走了。為此在建構函式裡面新增一個變數記錄當前的位移，並設定小狗的速度：
constructor(canvas) {
// 小狗的速度
this.dogSpeed = 0.1;
// 小狗當前的位移
this.currentX = 0;
}複製程式碼然後在walk函式裡面計算當前累加的位移：
// 計算位移 = 時間 * 速度
let distance = (now - this.lastWalkingTime) * this.dogSpeed;
this.currentX += distance;
this.ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight,
// dx, dy, dwidth, dheight
this.currentX, 20, 186, 162);複製程式碼但是這樣我們發現小狗走起路來一卡一卡的，不是很連貫：
這個是因為每0.1s畫一幀，幀率只有10fps，所以一走起來就不太行了。方法一是讓它走慢點，這樣可以減緩，但是如果想保持速度甚至提高速度的話，我們得想辦法優化一下。
4. 演算法優化
考慮到狗的控制引數比較集中，把它們寫到一個dog的Object裡面：
constructor (canvas) {
this.dog = {
// 一步10px
stepDistance: 10,
// 狗的速度
speed: 0.15,
// 滑鼠的x座標
mouseX: -1
};
}複製程式碼主要有兩個引數，一個是狗的速度另一個是每一步走的位移，然後計算距離方式變成：
let now = Date.now();
let distance = (now - this.lastWalkingTime) * this.dog.speed;
if (distance < this.dog.stepDistance) {
window.requestAnimationFrame(this.walk.bind(this));
return;
}複製程式碼每一步至少走10px，如果小於這個數的話就不走了。通過每步的位移和速度這兩個引數可以很方便地控制狗走的快慢和幀率，例如把stepDistance改小點，speed提高就會走得比較頻繁，能提高幀率，上面設定的幀率是14 fps. 不過幀率低的根本原因還是在於小狗走路的圖片較少。
5. 走到滑鼠的位置停下
給小狗新增一個停留的位置，包括往前走和往後走的，因為一個是滑鼠在圖片前面，一個是滑鼠在圖片的後面，需要區分：
this.dog = {
// 往前走停留的位置
frontStopX: -1,
// 往回走停留的位置,
backStopX: window.innerWidth,
};複製程式碼然後新增一個記錄滑鼠位置的函式，主要是監聽mousemove事件：
async start () {
await this.loadResources();
this.pictureWidth = this.dogPictures[0].naturalWidth / 2;
this.recordMousePosition();
window.requestAnimationFrame(this.walk.bind(this));
}
// 記錄滑鼠位置
recordMousePosition() {
window.addEventListener("mousemove", event => {
// 如果沒減掉圖片的寬度，小狗就跑到滑鼠後面去了，因為圖片的寬度還要佔去空間
this.dog.frontStopX = event.clientX - this.pictureWidth;
this.dog.backStopX = event.clientX;
});
}複製程式碼然後在walk函式裡面用一個變數stopWalking表示小狗是否停下來，和一個direct表示小狗的方向：
this.keyFrameIndex = ++this.keyFrameIndex % this.IMG_COUNT;
let direct = -1,
stopWalking = false;
// 如果滑鼠在狗的前面則往前走
if (this.dog.frontStopX > this.dog.mouseX) {
direct = 1;
}
// 如果滑鼠在狗的後面則往回走
else if (this.dog.backStopX < this.dog.mouseX) {
direct = -1;
}
// 如果滑鼠在狗在位置
else {
stopWalking = true;
// 如果停住的話用0.png（後面還會加1）
this.keyFrameIndex = -1;
}複製程式碼如果小狗沒有停，計算位置的時候乘以direct：
// 計算位置
if (!stopWalking) {
this.dog.mouseX += this.dog.stepDistance * direct;
}複製程式碼如果小狗停了，則mouseX還是上次的值。
滑鼠停留在小狗位置的那段程式碼可以做個優化，如果滑鼠在小狗中間的右邊，則方向調整為正，否則為負：
// 如果滑鼠在狗在位置
else {
stopWalking = true;
// 如果滑鼠在小狗圖片中間的右邊，則direct為正，否則為負
direct = this.dog.backStopX - this.dog.mouseX
> this.pictureWidth / 2 ? 1 : -1;
this.keyFrameIndex = -1;
}複製程式碼這樣滑鼠在小狗左右來回移動時，小狗會轉頭。
得到小狗的位置和方向之後就是畫上去，正方向的還好，反方向的由於沒圖片，我們通過canvas的翻轉flip進行繪製，如下程式碼所示：
ctx.save();
if (direct === -1) {
// 左右翻轉繪製
ctx.scale(direct, 1);
}
let img = this.dogPictures[this.keyFrameIndex + 1];
let drawX = 0;
// 左右翻轉繪製的位置需要計算一下
drawX = this.dog.mouseX * direct -
(direct === -1 ? this.pictureWidth : 0);
ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight,
drawX, 20, 186, 162);
ctx.restore();複製程式碼這樣基本上就完成了，最後一個問題是小狗初始化位置的擺放，如果你要把它擺在右邊的話，那需要把它的方向反轉一下，擺在最左邊也需要。不然你會發現小狗擺在左邊，但它的頭朝左了，需要轉一下放在右邊。
一個完整的Demo：Walking Dog.
圖片的素材和繪製過程已說得很詳細，讀者可以自行實現，或者想其它一些跟著滑鼠動的互動效果。
相關閱讀：
【號外】《高效前端》已經開始預售，很快就上市，在京東和早讀課都可以買到。
