摘要：然后在節(jié)點上設(shè)置了動畫屬性，并將其設(shè)為前面定義的動畫，每一次動畫秒，表示無限循環(huán)，表示緩動方式，兩個關(guān)鍵幀之間的變化是方式逐步變化的。

平時工作中會遇到需要實現(xiàn)一些存在動畫的頁面。這里對動畫的實現(xiàn)知識做一個整理。
頁面動畫的實現(xiàn)可以分為兩類：CSS動畫、Canvas動畫、JavaScript動畫。JavaScript動畫沒啥好講的，這里就不整理了。

CSS3中提供了一個屬性transition，用來實現(xiàn)CSS樣式的平滑變化。舉個例子:

.box {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 1s;
}
.box:hover {
  width: 300px;
}

當(dāng)鼠標(biāo)hover到.box元素時，元素會在1s內(nèi)逐漸的將寬度變化到300px。
具體效果可以去這里查看。

使用transition可以實現(xiàn)較為簡單的動畫。如果需要實現(xiàn)比較復(fù)雜的動畫，可以使用amination來實現(xiàn)。舉個例子：

@keyframes cssAmination {
  0%   {background: red; transform: skew(0deg);}
  25%  {background: yellow; transform: skew(-20deg);}
  50%  {background: blue; transform: skew(0deg);}
  75%  {background: green; transform: skew(20deg);}
  100% {background: red; transform: skew(0deg);}
}
.amin {
  animation: cssAmination 1s infinite ease;
}

在上的例子中，首先由keyframes定義一個動畫叫做: cssAnimation。在cssAnimation中定義了動畫過程中關(guān)鍵的5幀。每一幀都設(shè)置了當(dāng)前幀的樣式特征。然后在.amin節(jié)點上設(shè)置了動畫屬性animation，并將其設(shè)為前面定義的動畫cssAnimation，每一次動畫1秒，infinite表示無限循環(huán)，ease表示緩動方式，兩個關(guān)鍵幀之間的變化是ease方式逐步變化的。
具體效果可以到這里查看

animation的緩動函數(shù)有很多類型的值，有一個值比較特別就是step[n[, start | end]]。step的效果是將keyframes中的每一個關(guān)鍵幀之間的切換并不是逐步變化的，而是到達某一關(guān)鍵幀后直接變化成新的關(guān)鍵幀樣式，并保持不變，直到下一關(guān)鍵幀。所以使用step可以實現(xiàn)CSS3的幀動畫。寫法如下：

@keyframes cssFrameAmination {
  0% {background-position: 0 0;}
  25% {background-position: -100px 0;}
  50% {background-position: -200px 0;}
  75% {background-position: -300px 0;}
  100% {background-position: -400px 0;}
}
.amin-frame {
  background: url("./sprite.png") 0 0 no-repeat;
  animation: cssFrameAmination 1s infinite step(5, start);
}

在上面的例子中，設(shè)置動畫cssFrameAmination，其中每一關(guān)鍵幀都是精靈動畫圖片的一幀圖片。然后在animation中設(shè)置animation-timing-function為step(5, start)表示動畫分5幀。

有關(guān)CSS3動畫相關(guān)的知識細(xì)節(jié)可以去這里了解。

canvas是一個HTML標(biāo)簽，用于提供給腳本進行畫圖圖形的繪制。canvas的繪制主要由CanvasRenderingContext2D的實例來進行繪制。CanvasRenderingContext2D 可以通過canvasDOM對象的getContext獲得，代碼如下：

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

getContext的參數(shù)是指在畫布上繪制的類型，"2d"表示繪制二維圖形。目前三維還沒有實現(xiàn)，所以參數(shù)只支持"2d"。

canvas的上下文提供了眾多的繪制方法。當(dāng)你繪制一個圖形時，基本思路是這樣的：

調(diào)用save方法保存之前的樣式狀態(tài)

調(diào)用beginPath表示開始設(shè)置路徑

調(diào)用fillStyle, strokeStyle等對接下來的路徑進行樣式設(shè)置

調(diào)用moveTo，lineTo, rect, arc等設(shè)置路徑

調(diào)用closePath閉合路徑

調(diào)用fill或者stroke對路徑進行繪制

調(diào)用restore恢復(fù)之前保存的樣式狀態(tài)

上面過程中的save和restore的作用是將已經(jīng)設(shè)置的樣式進行保存和恢復(fù)。當(dāng)存在多個圖形時，前面的樣式如果不恢復(fù)為默認(rèn)樣式，會影響到第二個圖形的樣式。使用save和restore可以保證每一個圖形在繪制開始時，都是默認(rèn)的樣式。當(dāng)然，你也可以不調(diào)用save和restore，而是通過將前面已經(jīng)設(shè)置過的所有樣式進行逐個的還原。
save可以保存的樣式類型有：

當(dāng)前應(yīng)用的變形（即移動，旋轉(zhuǎn)和縮放）

strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值

當(dāng)前的裁切路徑（clipping path）

步驟5closePath盡量不要忘記。原因和save，restore類似，如果忘記調(diào)用closePath就會導(dǎo)致前后圖形間多繪制一根線。
我寫了一個時鐘的例子：github

下面對各類接口做了一個整理
樣式設(shè)置

路徑

繪制

清除

文字

樣式保存

canvas雖然可以繪制圖形，但是最常用的應(yīng)該是繪制圖片。圖片的繪制和圖形的繪制類似。
canvas使用接口drawImage()進行接口繪制，接口定義如下:

drawImage(image, x, y, width, height, dx, dy, dWidth, dHeight);

其中的參數(shù)定義如下：

image可以使HTMLImageElement, HTMLVideoElement（Video元素的某一幀）, HTMLCanvasElement, ImageBitmap。

x, y是指圖片截取的起始位置。

width, height是指圖片截取的寬高。

dx, dy是目標(biāo)在Canvas中的起始坐標(biāo)。

dWidth, dHeight用于控制canvas繪制的圖片的縮放大小。

canvas還可以和CSS一樣對圖形進行變形轉(zhuǎn)化。接口列表如下：

前面的例子中，當(dāng)兩個圖形重疊后，都是由后面繪制的圖形覆蓋住前面繪制的圖形。有時候需要改變這種情況。這種時候就可以使用globalCompositeOperation來進行設(shè)置（還可以用來遮蓋，清除某些區(qū)域）。具體參數(shù)可以去這里查看

globalCompositeOperation: type

使用上面的接口可以在canvas上繪制圖片，但是都是固定的。當(dāng)我們不斷的對canvas進行重繪時，就可以達到動畫的而效果。

動畫的幀率達到60幀每秒時，也就是16ms沒幀時，動畫過程是流暢的。所以我們要對動畫過程的繪制進行控制。有三個方法可以進行控制：

setInterval。設(shè)置每16ms執(zhí)行一次繪制過程。但是該方法存在一個問題，開始運行繪制函數(shù)的時間點可能處于某一幀的快結(jié)束時間點。這個時候繪制過程需要小于16ms才可以達到流暢。

setTimeout。和setInterval類似。

requestAnimationFrame。該方法會在瀏覽器每一次繪制結(jié)束后調(diào)用一次。使用該方法可以很好的避免setInterval和setTimeout出現(xiàn)的運行繪制函數(shù)時間不在每一幀開始的時間點。

創(chuàng)建一個離屏canvas, 預(yù)先對復(fù)雜圖形進行繪制。

避免浮點數(shù)的坐標(biāo)點, 使用Math.floor()對坐標(biāo)取整。

不要使用drawImage去縮放圖片。

使用多canvas繪制復(fù)雜場景。

使用CSS設(shè)置大背景圖。

查了很多資料，發(fā)現(xiàn)Chrome 44版本之前是有Canvas調(diào)試功能的，但是Chrome 44之后，將Canvas調(diào)試功能去除了，并以擴展接口的方式提供功能。找了很久沒有找到調(diào)試Canvas的擴展。另外，F(xiàn)irefox有提供專門的Canvas調(diào)試面板。試用了下，功能太少，對定位問題并沒什么軟用。
所以，關(guān)于調(diào)試的問題，只能試用傳統(tǒng)的設(shè)斷點，并逐步運行看效果進行調(diào)試。