JavaScript動(dòng)畫通過JavaScript代碼控制頁面元素的樣式變化,如位置、大小、顏色等,從而產(chǎn)生動(dòng)畫效果。在JavaScript中創(chuàng)建動(dòng)畫效果，你可以使用多種方法，例如通過修改元素的CSS屬性，使用requestAnimationFrame方法，或者使用第三方庫如Animate.css或GSAP。
一、javascript動(dòng)畫效果代碼html
以下是一個(gè)簡(jiǎn)單的 JavaScript 動(dòng)畫效果 的 HTML 代碼示例，使用 requestAnimationFrame 實(shí)現(xiàn)元素平滑移動(dòng)：
html1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>JavaScript 動(dòng)畫示例</title>
7 <style>
8 #box {
9 width: 50px;
10 height: 50px;
11 background-color: red;
12 position: absolute;
13 left: 0;
14 top: 50px;
15 }
16 </style>
17</head>
18<body>
19 <div id="box"></div>
20
21 <ｓｃｒｉｐｔ>
22 const box = document.getElementById('box');
23 let position = 0;
24 const speed = 2; // 移動(dòng)速度
25
26 function animate() {
27 position += speed;
28 box.style.left = position + 'px';
29
30 // 如果元素未超出屏幕，繼續(xù)動(dòng)畫
31 if (position < window.innerWidth - 50) {
32 requestAnimationFrame(animate);
33 }
34 }
35
36 // 啟動(dòng)動(dòng)畫
37 animate();
38 </ｓｃｒｉｐｔ>
39</body>
40</html>
代碼說明：
HTML 部分：定義一個(gè) div 元素。
CSS 部分：設(shè)置元素的初始位置和樣式。
JavaScript 部分：
使用 requestAnimationFrame 實(shí)現(xiàn)高性能動(dòng)畫。
通過修改 style.left 屬性讓元素水平移動(dòng)。
動(dòng)畫在元素到達(dá)屏幕右側(cè)時(shí)停止。
擴(kuò)展：點(diǎn)擊觸發(fā)動(dòng)畫
如果需要點(diǎn)擊按鈕觸發(fā)動(dòng)畫，可以這樣修改：
html1<button onclick="startAnimation()">開始動(dòng)畫</button>
2<ｓｃｒｉｐｔ>
3 function startAnimation() {
4 const box = document.getElementById('box');
5 let position = 0;
6 const speed = 2;
7
8 function animate() {
9 position += speed;
10 box.style.left = position + 'px';
11 if (position < window.innerWidth - 50) {
12 requestAnimationFrame(animate);
13 }
14 }
15 animate();
16 }
17</ｓｃｒｉｐｔ>
關(guān)鍵點(diǎn)：
requestAnimationFrame：瀏覽器優(yōu)化的動(dòng)畫 API，適合實(shí)現(xiàn)平滑效果。
性能優(yōu)化：避免直接操作 style 頻繁觸發(fā)重繪，復(fù)雜動(dòng)畫可用 CSS transform 或 WebGL。
如果需要更復(fù)雜的動(dòng)畫，可以結(jié)合 CSS 過渡或動(dòng)畫庫。
二、動(dòng)畫效果如何保持持續(xù)?
在 JavaScript 中實(shí)現(xiàn)持續(xù)動(dòng)畫效果，可以通過 requestAnimationFrame 循環(huán)調(diào)用動(dòng)畫函數(shù)，并通過條件控制動(dòng)畫的啟停。以下是詳細(xì)代碼示例和保持動(dòng)畫持續(xù)的方法：
1. 基礎(chǔ)持續(xù)動(dòng)畫代碼
html1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="UTF-8">
5 <title>持續(xù)動(dòng)畫示例</title>
6 <style>
7 #box {
8 width: 50px;
9 height: 50px;
10 background-color: red;
11 position: absolute;
12 left: 0;
13 top: 50px;
14 }
15 </style>
16</head>
17<body>
18 <div id="box"></div>
19 <button onclick="toggleAnimation()">暫停/繼續(xù)</button>
20
21 <ｓｃｒｉｐｔ>
22 const box = document.getElementById('box');
23 let position = 0;
24 let animationId = null;
25 let isPaused = false;
26 const speed = 2;
27
28 function animate() {
29 if (isPaused) return; // 暫停時(shí)停止更新
30
31 position += speed;
32 // 循環(huán)移動(dòng)(到達(dá)右側(cè)后回到起點(diǎn))
33 if (position > window.innerWidth - 50) {
34 position = 0;
35 }
36 box.style.left = position + 'px';
37
38 // 遞歸調(diào)用，實(shí)現(xiàn)持續(xù)動(dòng)畫
39 animationId = requestAnimationFrame(animate);
40 }
41
42 // 啟動(dòng)動(dòng)畫
43 animate();
44
45 // 暫停/繼續(xù)動(dòng)畫
46 function toggleAnimation() {
47 isPaused = !isPaused;
48 if (!isPaused) {
49 animate(); // 恢復(fù)時(shí)重新啟動(dòng)
50 } else {
51 cancelAnimationFrame(animationId); // 暫停時(shí)取消動(dòng)畫幀
52 }
53 }
54 </ｓｃｒｉｐｔ>
55</body>
56</html>
二、關(guān)鍵點(diǎn)解析
(1) 如何保持動(dòng)畫持續(xù)?
requestAnimationFrame 遞歸調(diào)用：在動(dòng)畫函數(shù)末尾再次調(diào)用自身，形成無限循環(huán)。
循環(huán)邏輯：通過條件判斷避免動(dòng)畫終止。
(2) 如何暫停/恢復(fù)動(dòng)畫?
cancelAnimationFrame：取消之前注冊(cè)的動(dòng)畫幀，停止遞歸。
狀態(tài)控制：用 isPaused 變量標(biāo)記動(dòng)畫狀態(tài)，恢復(fù)時(shí)重新調(diào)用 animate()。
(3) 性能優(yōu)化
避免在動(dòng)畫中頻繁操作 DOM 或計(jì)算復(fù)雜邏輯。
使用 transform: translateX() 替代 left 屬性。
3. 進(jìn)階：多動(dòng)畫持續(xù)運(yùn)行
如果需要多個(gè)獨(dú)立持續(xù)動(dòng)畫，可以分開管理動(dòng)畫幀：
javascript1let rotation = 0;
2let colorIndex = 0;
3const colors = ['red', 'blue', 'green'];
4
5function rotateElement() {
6 rotation += 1;
7 box.style.transform = `rotate(${rotation}deg)`;
8 requestAnimationFrame(rotateElement);
9}
10
11function changeColor() {
12 colorIndex = (colorIndex + 1) % colors.length;
13 box.style.backgroundColor = colors[colorIndex];
14 setTimeout(changeColor, 1000); // 每秒切換一次顏色
15}
16
17rotateElement(); // 啟動(dòng)旋轉(zhuǎn)動(dòng)畫
18changeColor(); // 啟動(dòng)顏色變化
4. 替代方案：CSS 動(dòng)畫 + JS 控制
如果動(dòng)畫較簡(jiǎn)單，可以用 CSS 實(shí)現(xiàn)持續(xù)效果，通過 JS 動(dòng)態(tài)控制類名：
html1<style>
2 .moving {
3 animation: move 3s linear infinite;
4 }
5 @keyframes move {
6 from { left: 0; }
7 to { left: calc(100% - 50px); }
8 }
9</style>
10
11<ｓｃｒｉｐｔ>
12 box.classList.add('moving'); // 啟動(dòng)動(dòng)畫
13 // 暫停：box.classList.remove('moving');
14</ｓｃｒｉｐｔ>
總結(jié)
持續(xù)動(dòng)畫核心：requestAnimationFrame 遞歸 + 循環(huán)邏輯。
控制動(dòng)畫：通過狀態(tài)變量和 cancelAnimationFrame 實(shí)現(xiàn)暫停/恢復(fù)。
優(yōu)化建議：復(fù)雜動(dòng)畫優(yōu)先使用 CSS 或 WebGL。
以上是創(chuàng)建JavaScript動(dòng)畫效果的一些基本方法。你可以根據(jù)自己的需求選擇最合適的方法。對(duì)于復(fù)雜的動(dòng)畫或高級(jí)效果，使用像GSAP這樣的庫通常是最方便和強(qiáng)大的選擇。
