資訊專欄INFORMATION COLUMN
摘要：每周一點(diǎn)動(dòng)畫是一個(gè)系列文章，本文并不對(duì)的做過多的介紹，我默認(rèn)你已經(jīng)了解基本的繪圖，并在此告訴你如何使用簡單的數(shù)學(xué)與物理知識(shí)創(chuàng)建相當(dāng)酷炫的動(dòng)畫。下一節(jié)，我們就正式開始我們的動(dòng)畫之旅
《每周一點(diǎn)canvas動(dòng)畫》是一個(gè)系列文章，本文并不對(duì)canvas的API做過多的介紹，我默認(rèn)你已經(jīng)了解基本的canvas繪圖API，并在此告訴你如何使用簡單的數(shù)學(xué)與物理知識(shí)創(chuàng)建相當(dāng)酷炫的動(dòng)畫。一說到物理和數(shù)學(xué)知識(shí)各位騷年們是不是感覺蛋疼(原諒我說臟話了)，不過我要告訴你，我們用到的數(shù)學(xué)和物理知識(shí)真的很簡單，一點(diǎn)都不可怕。
1.支持情況canvas作為H5中最為重要的新增特性，使開發(fā)者可以用它來創(chuàng)作各種令人驚嘆的作品。但開發(fā)者最關(guān)心的問題肯定是瀏覽器的支持情況（圖片來自張鑫旭博客）！
2.本文主要內(nèi)容本系列文章主要介紹Canvas 2D動(dòng)畫原理，以及簡單的如何在2D平面模仿3D效果的方法，中間可能會(huì)穿插一些與其他技術(shù)相結(jié)合的DEMO和項(xiàng)目。首先，我們創(chuàng)作動(dòng)畫的基本文檔結(jié)構(gòu)如下。
canvas動(dòng)畫序
在此我們需要明白動(dòng)畫的基本概念：
動(dòng)畫其實(shí)是由不同的靜態(tài)畫面組成，每一幅靜態(tài)畫面我們叫做一幀（frame），當(dāng)眾多的靜態(tài)畫面按照一定的規(guī)則快速運(yùn)動(dòng)時(shí)，我們的眼睛就會(huì)欺騙我們的大腦，從而形成物體運(yùn)動(dòng)的假象。在這里先給大家展示用Canvas創(chuàng)作的兩個(gè)酷炫動(dòng)畫，看看它是否夠簡潔，夠酷炫！
第一個(gè)動(dòng)畫是一個(gè)用Canvas做的百分比加載動(dòng)畫（根據(jù)讀者的建議，已經(jīng)對(duì)錯(cuò)誤的代碼做了修改）。codePen地址
var canvas = document.getElementById("canvas"), //獲取canvas元素
context = canvas.getContext("2d"), //獲取畫圖環(huán)境，指明為2d
centerX = canvas.width/2, //Canvas中心點(diǎn)x軸坐標(biāo)
centerY = canvas.height/2, //Canvas中心點(diǎn)y軸坐標(biāo)
rad = Math.PI*2/100, //將360度分成100份，那么每一份就是rad度
speed = 0.1; //加載的快慢就靠它了
//繪制藍(lán)色外圈
function blueCircle(n){
context.save();
context.beginPath();
context.strokeStyle = "#49f";
context.lineWidth = 12;
context.arc(centerX, centerY, 100 , -Math.PI/2, -Math.PI/2 + n*rad, false);
context.stroke();
context.restore();
}
//繪制白色外圈
function whiteCircle(){
context.save();
context.beginPath();
context.strokeStyle = "#A5DEF1";
context.lineWidth = 12;
context.arc(centerX, centerY, 100 , 0, Math.PI*2, false);
context.stroke();
context.closePath();
context.restore();
}
//百分比文字繪制
function text(n){
context.save();
context.fillStyle = "#F47C7C";
context.font = "40px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText(n.toFixed(0)+"%", centerX, centerY);
context.restore();
}
//動(dòng)畫循環(huán)
(function drawFrame(){
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
whiteCircle();
text(speed);
blueCircle(speed);
if(speed > 100) speed = 0;
speed += 0.1;
}());