Javascript作為一種前端開(kāi)發(fā)語(yǔ)言，在炫酷動(dòng)畫(huà)的應(yīng)用中比較常見(jiàn)。通過(guò)對(duì)javascript的學(xué)習(xí)和掌握，前端開(kāi)發(fā)者可以借助于它的各種強(qiáng)大的API，開(kāi)發(fā)出各種炫酷動(dòng)畫(huà)效果，增強(qiáng)網(wǎng)站的用戶(hù)交互性，達(dá)到吸引用戶(hù)的目的。下面我們就來(lái)一起了解一下javascript如何實(shí)現(xiàn)炫酷動(dòng)畫(huà)吧！

Javascript的動(dòng)畫(huà)效果主要可以分為兩大類(lèi): 一種是基于CSS的動(dòng)畫(huà)，另一種是基于canvas的動(dòng)畫(huà)。

對(duì)于基于CSS的動(dòng)畫(huà)，Javascript可以通過(guò)獲取DOM元素的樣式屬性，再改變他們的數(shù)值以實(shí)現(xiàn)動(dòng)態(tài)效果。比如下面的例子，我們可以將一個(gè)正方形DIV元素盒子的寬度從0到200px做一個(gè)過(guò)渡動(dòng)畫(huà)：

<div id="animation" style="width:0px;height:200px;background-color:green"></div>    
<button onclick="startAnimation()">Start Animation</button>
<script>
function startAnimation(){
var element = document.getElementById("animation");
var width = 0;
var id = setInterval(frame, 10);
function frame() {
if (width == 200) {
clearInterval(id);
} else {
width++;
element.style.width = width + 'px';
}
}
}
</script>

通過(guò)上述javascript代碼，我們便可以實(shí)現(xiàn)一個(gè)從0到200像素的寬度變化的動(dòng)畫(huà)效果。此外，CSS3現(xiàn)在也提供了許多動(dòng)畫(huà)相關(guān)的屬性（如transition、animation、transform等），這些屬性都可以通過(guò)javascript來(lái)控制實(shí)現(xiàn)更加炫酷生動(dòng)的動(dòng)畫(huà)效果。

另一種是基于canvas的動(dòng)畫(huà)。canvas比起瀏覽器中的其它元素具有極其強(qiáng)大的繪制能力，因?yàn)樗梢宰尦绦騿T自由的在畫(huà)布上繪制各種形狀，利用javascript的強(qiáng)大計(jì)算能力，我們可以實(shí)現(xiàn)各種復(fù)雜的動(dòng)畫(huà)效果。

下面，讓我們看一個(gè)canvas動(dòng)畫(huà)的示例。通過(guò)下面的代碼，我們可以畫(huà)出一個(gè)圓，然后將其使用javascript實(shí)現(xiàn)緩慢旋轉(zhuǎn)的動(dòng)畫(huà)效果：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 40;
var angle = 0;
function drawCircle() {
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#f5f5f5";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "#000000";
context.stroke();
}
function rotateCircle() {
angle += 0.04;
context.clearRect(0, 0, canvas.width, canvas.height);
context.save();
context.translate(centerX, centerY);
context.rotate(angle);
context.translate(-centerX, -centerY);
drawCircle();
context.restore();
requestAnimationFrame(rotateCircle);
}
drawCircle();
rotateCircle();
</script>

通過(guò)上述代碼，我們便可以得到一個(gè)炫酷的旋轉(zhuǎn)動(dòng)畫(huà)效果。需要注意的是，這個(gè)canvas動(dòng)畫(huà)效果使用了requestAnimationFrame API，這個(gè)API是瀏覽器提供的一種專(zhuān)門(mén)用于動(dòng)畫(huà)效果渲染的接口，能夠?qū)崿F(xiàn)更加優(yōu)秀的動(dòng)畫(huà)渲染效果。

總之javascript是一種非常強(qiáng)大的語(yǔ)言，通過(guò)對(duì)javascript的掌握和熟練應(yīng)用，前端開(kāi)發(fā)者可以實(shí)現(xiàn)各種動(dòng)畫(huà)相關(guān)的技術(shù)，提升自己的開(kāi)發(fā)效率和網(wǎng)站的用戶(hù)體驗(yàn)。以上我們介紹了javascript基于CSS和canvas實(shí)現(xiàn)炫酷動(dòng)畫(huà)的兩種方法，希望對(duì)大家的學(xué)習(xí)和練習(xí)有所幫助。