柚子快報(bào)激活碼778899分享：前端 用HTML5實(shí)現(xiàn)動畫
用HTML5實(shí)現(xiàn)動畫
要在HTML5中實(shí)現(xiàn)動畫，可以使用以下幾種方法：CSS動畫、使用
一、CSS動畫
CSS3 動畫：使用CSS3的動畫屬性和關(guān)鍵幀（keyframes）來創(chuàng)建動畫效果。通過定義動畫的開始狀態(tài)、結(jié)束狀態(tài)和過渡效果，可以實(shí)現(xiàn)平滑的動畫效果。
先看一個(gè)簡單的例子：
我這里命名為：CSS3簡單動畫.html
用瀏覽器打開，運(yùn)行效果：
下面給出一個(gè)小車動畫
由兩部分組成：
HTML文件和CSS文件，為方便使用，我將這兩個(gè)文件放在同一文件夾中。
HTML文件，我這里命名為：CSS3小車動畫.html，源碼如下：
CSS文件，我這里命名為：car.css，源碼如下：
/*定義動畫：從-400px的位置移動到1600px的位置 */
@keyframes carAnimation {
0% { left: -400px; } /* 指定初始位置*/
100% { left: 1600px; } /* 指定最終位置*/
}
#car {
position: absolute;
width: 400px;
height: 210px;
top: 300px;
left: 50px;
animation: carAnimation 10s infinite linear;
}
#chassis {
position: absolute;
width: 400px;
height: 130px;
background: #FF9900;
border: 2px solid #FF6600;
}
.tire {
position: absolute;
bottom: 0;
height: 120px;
width: 120px;
border-radius: 60px;
background: #0099FF;
border: 1px solid #3300FF;
animation: tyreAnimation 10s infinite linear;
}
#fronttire {
right: 20px;
}
#backtire {
left: 20px;
}
@keyframes tyreAnimation {
0% { transform: rotate(0); }
100% { transform: rotate(1800deg); }
}
#grass {
position: absolute;
width: 100%;
height: 130px;
bottom: 0;
background: linear-gradient(bottom, #33CC00, #66FF22);
}
.hr {
position: absolute;
background: #3300FF;
height: 2px;
width: 100%;
top: 60px;
}
.vr {
position: absolute;
background: #3300FF;
width: 2px;
height: 100%;
left: 60px;
top: 0;
}
我這里命名為：CSS3簡單動畫.html
用瀏覽器打開，運(yùn)行效果：
二、使用
先看一個(gè)簡單的例子：
我這里命名為：canvas+JS簡單動畫.html
運(yùn)行效果：
下面給出一個(gè)小車動畫
由兩部分組成
HTML文件和JavaScript文件，為方便使用，我將這兩個(gè)文件放在同一文件夾中。
HTML文件，我這里命名為：canvas+JS小車動畫.html，源碼如下：
JavaScript文件，我這里命名為：car.js，源碼如下：
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Set canvas full screen
canvas.width = window.innerWidth;
canvas.height = window.innerHeight-120; //
const car = {
x: 50,
y: canvas.height - 180, //
width: 200,
height: 100,
wheelRadius: 40,
wheelOffset: 25,
wheelRotation: 0
};
function drawCar(x, y, width, height, wheelRadius, wheelOffset, wheelRotation) {
// Draw car body
ctx.fillStyle = 'orange';
ctx.fillRect(x, y, width, height);
// Draw wheels
const wheelPositions = [
{ x: x + wheelOffset, y: y + height },
{ x: x + width - wheelOffset, y: y + height }
];
wheelPositions.forEach(wheelPos => {
ctx.save();
ctx.translate(wheelPos.x, wheelPos.y);
ctx.rotate(wheelRotation);
// Draw wheel
ctx.beginPath();
ctx.arc(0, 0, wheelRadius, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();
// Draw spokes
ctx.beginPath();
ctx.moveTo(-wheelRadius, 0);
ctx.lineTo(wheelRadius, 0);
ctx.moveTo(0, -wheelRadius);
ctx.lineTo(0, wheelRadius);
ctx.strokeStyle = 'white';
ctx.lineWidth = 4;
ctx.stroke();
ctx.restore();
});
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw ground
ctx.fillStyle = 'green';
ctx.fillRect(0, canvas.height - 50, canvas.width, 50);
// Update wheel rotation
car.wheelRotation += 0.05;
// Draw car
drawCar(car.x, car.y, car.width, car.height, car.wheelRadius, car.wheelOffset, car.wheelRotation);
// Move car
car.x += 2;
if (car.x > canvas.width) {
car.x = -car.width;
}
requestAnimationFrame(animate);
}
animate();
用瀏覽器打開，效果如下：
修改上面源碼，將兩個(gè)文件合二為一，并添加幾個(gè)控制按鈕“暫停/繼續(xù)”、“快”、“慢”，并實(shí)現(xiàn)相關(guān)功能：
點(diǎn)擊pauseResumeBtn按鈕會切換動畫的暫停和繼續(xù)狀態(tài)。
點(diǎn)擊speedUpBtn按鈕會增加小車的速度。
點(diǎn)擊speedDownBtn按鈕會減慢小車的速度，但速度不能小于1。
源碼如下：
我這里保存命名為：canvas+JS小車可控動畫.html
用瀏覽器打開，效果如下：
三、使用JavaScript動畫庫
使用JavaScript動畫庫（如Anime.js、Velocity.js、Three.js等）可以更方便地創(chuàng)建復(fù)雜的動畫效果，我沒有深入學(xué)習(xí)了解，在此就不介紹了。
附錄：
CSS3動畫詳解（圖文教程） https://www.cnblogs.com/qianguyihao/p/8435182.html
anime.js 簡單入門教程https://www.cnblogs.com/joyco773/p/10734850.html
Velocity.js 中文文檔https://www.cnblogs.com/guandekuan/p/6643988.html
柚子快報(bào)激活碼778899分享：前端 用HTML5實(shí)現(xiàn)動畫
文章鏈接
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
Snap跨境購物照
