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

平時(shí)工作中會(huì)遇到需要實(shí)現(xiàn)一些存在動(dòng)畫(huà)的頁(yè)面。這里對(duì)動(dòng)畫(huà)的實(shí)現(xiàn)知識(shí)做一個(gè)整理。
頁(yè)面動(dòng)畫(huà)的實(shí)現(xiàn)可以分為兩類(lèi)：CSS動(dòng)畫(huà)、Canvas動(dòng)畫(huà)、JavaScript動(dòng)畫(huà)。JavaScript動(dòng)畫(huà)沒(méi)啥好講的，這里就不整理了。

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

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

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

使用transition可以實(shí)現(xiàn)較為簡(jiǎn)單的動(dòng)畫(huà)。如果需要實(shí)現(xiàn)比較復(fù)雜的動(dòng)畫(huà)，可以使用amination來(lái)實(shí)現(xiàn)。舉個(gè)例子：

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

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

@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è)置動(dòng)畫(huà)cssFrameAmination，其中每一關(guān)鍵幀都是精靈動(dòng)畫(huà)圖片的一幀圖片。然后在animation中設(shè)置animation-timing-function為step(5, start)表示動(dòng)畫(huà)分5幀。

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

canvas是一個(gè)HTML標(biāo)簽，用于提供給腳本進(jìn)行畫(huà)圖圖形的繪制。canvas的繪制主要由CanvasRenderingContext2D的實(shí)例來(lái)進(jìn)行繪制。CanvasRenderingContext2D 可以通過(guò)canvasDOM對(duì)象的getContext獲得，代碼如下：

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

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

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

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

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

調(diào)用fillStyle, strokeStyle等對(duì)接下來(lái)的路徑進(jìn)行樣式設(shè)置

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

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

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

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

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

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

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

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

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

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

路徑

繪制

清除

文字

樣式保存

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

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一樣對(duì)圖形進(jìn)行變形轉(zhuǎn)化。接口列表如下：

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

globalCompositeOperation: type

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

動(dòng)畫(huà)的幀率達(dá)到60幀每秒時(shí)，也就是16ms沒(méi)幀時(shí)，動(dòng)畫(huà)過(guò)程是流暢的。所以我們要對(duì)動(dòng)畫(huà)過(guò)程的繪制進(jìn)行控制。有三個(gè)方法可以進(jìn)行控制：

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

setTimeout。和setInterval類(lèi)似。

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

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

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

不要使用drawImage去縮放圖片。

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

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

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