柚子快報(bào)激活碼778899分享：前端 用HTML5實(shí)現(xiàn)動(dòng)畫(huà)
柚子快報(bào)激活碼778899分享：前端 用HTML5實(shí)現(xiàn)動(dòng)畫(huà)
用HTML5實(shí)現(xiàn)動(dòng)畫(huà)
要在HTML5中實(shí)現(xiàn)動(dòng)畫(huà)，可以使用以下幾種方法：CSS動(dòng)畫(huà)、使用
一、CSS動(dòng)畫(huà)
CSS3 動(dòng)畫(huà)：使用CSS3的動(dòng)畫(huà)屬性和關(guān)鍵幀（keyframes）來(lái)創(chuàng)建動(dòng)畫(huà)效果。通過(guò)定義動(dòng)畫(huà)的開(kāi)始狀態(tài)、結(jié)束狀態(tài)和過(guò)渡效果，可以實(shí)現(xiàn)平滑的動(dòng)畫(huà)效果。
先看一個(gè)簡(jiǎn)單的例子：
我這里命名為：CSS3簡(jiǎn)單動(dòng)畫(huà).html
用瀏覽器打開(kāi)，運(yùn)行效果：
下面給出一個(gè)小車(chē)動(dòng)畫(huà)
由兩部分組成：
HTML文件和CSS文件，為方便使用，我將這兩個(gè)文件放在同一文件夾中。
HTML文件，我這里命名為：CSS3小車(chē)動(dòng)畫(huà).html，源碼如下：
CSS文件，我這里命名為：car.css，源碼如下：
/*定義動(dòng)畫(huà)：從-400px的位置移動(dòng)到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簡(jiǎn)單動(dòng)畫(huà).html
用瀏覽器打開(kāi)，運(yùn)行效果：
二、使用
先看一個(gè)簡(jiǎn)單的例子：
我這里命名為：canvas+JS簡(jiǎn)單動(dòng)畫(huà).html
運(yùn)行效果：
下面給出一個(gè)小車(chē)動(dòng)畫(huà)
由兩部分組成
HTML文件和JavaScript文件，為方便使用，我將這兩個(gè)文件放在同一文件夾中。
HTML文件，我這里命名為：canvas+JS小車(chē)動(dòng)畫(huà).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();
用瀏覽器打開(kāi)，效果如下：
修改上面源碼，將兩個(gè)文件合二為一，并添加幾個(gè)控制按鈕“暫停/繼續(xù)”、“快”、“慢”，并實(shí)現(xiàn)相關(guān)功能：
點(diǎn)擊pauseResumeBtn按鈕會(huì)切換動(dòng)畫(huà)的暫停和繼續(xù)狀態(tài)。
點(diǎn)擊speedUpBtn按鈕會(huì)增加小車(chē)的速度。
點(diǎn)擊speedDownBtn按鈕會(huì)減慢小車(chē)的速度，但速度不能小于1。
源碼如下：
我這里保存命名為：canvas+JS小車(chē)可控動(dòng)畫(huà).html
用瀏覽器打開(kāi)，效果如下：
三、使用JavaScript動(dòng)畫(huà)庫(kù)
使用JavaScript動(dòng)畫(huà)庫(kù)（如Anime.js、Velocity.js、Three.js等）可以更方便地創(chuàng)建復(fù)雜的動(dòng)畫(huà)效果，我沒(méi)有深入學(xué)習(xí)了解，在此就不介紹了。
附錄：
CSS3動(dòng)畫(huà)詳解（圖文教程） https://www.cnblogs.com/qianguyihao/p/8435182.html
anime.js 簡(jiǎn)單入門(mén)教程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)動(dòng)畫(huà)
文章鏈接
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Snap跨境購(gòu)物照
