JavaScript动画通过JavaScript代码控制页面元素的样式变化,如位置、大小、颜色等,从而产生动画效果。在JavaScript中创建动画效果，你可以使用多种方法，例如通过修改元素的CSS属性，使用requestAnimationFrame方法，或者使用第三方库如Animate.css或GSAP。
一、javascript动画效果代码html
以下是一个简单的 JavaScript 动画效果 的 HTML 代码示例，使用 requestAnimationFrame 实现元素平滑移动：
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 动画示例</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; // 移动速度
25
26 function animate() {
27 position += speed;
28 box.style.left = position + 'px';
29
30 // 如果元素未超出屏幕，继续动画
31 if (position < window.innerWidth - 50) {
32 requestAnimationFrame(animate);
33 }
34 }
35
36 // 启动动画
37 animate();
38 </ｓｃｒｉｐｔ>
39</body>
40</html>
代码说明：
HTML 部分：定义一个 div 元素。
CSS 部分：设置元素的初始位置和样式。
JavaScript 部分：
使用 requestAnimationFrame 实现高性能动画。
通过修改 style.left 属性让元素水平移动。
动画在元素到达屏幕右侧时停止。
扩展：点击触发动画
如果需要点击按钮触发动画，可以这样修改：
html1<button onclick="startAnimation()">开始动画</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</ｓｃｒｉｐｔ>
关键点：
requestAnimationFrame：浏览器优化的动画 API，适合实现平滑效果。
性能优化：避免直接操作 style 频繁触发重绘，复杂动画可用 CSS transform 或 WebGL。
如果需要更复杂的动画，可以结合 CSS 过渡或动画库。
二、动画效果如何保持持续?
在 JavaScript 中实现持续动画效果，可以通过 requestAnimationFrame 循环调用动画函数，并通过条件控制动画的启停。以下是详细代码示例和保持动画持续的方法：
1. 基础持续动画代码
html1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="UTF-8">
5 <title>持续动画示例</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()">暂停/继续</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; // 暂停时停止更新
30
31 position += speed;
32 // 循环移动(到达右侧后回到起点)
33 if (position > window.innerWidth - 50) {
34 position = 0;
35 }
36 box.style.left = position + 'px';
37
38 // 递归调用，实现持续动画
39 animationId = requestAnimationFrame(animate);
40 }
41
42 // 启动动画
43 animate();
44
45 // 暂停/继续动画
46 function toggleAnimation() {
47 isPaused = !isPaused;
48 if (!isPaused) {
49 animate(); // 恢复时重新启动
50 } else {
51 cancelAnimationFrame(animationId); // 暂停时取消动画帧
52 }
53 }
54 </ｓｃｒｉｐｔ>
55</body>
56</html>
二、关键点解析
(1) 如何保持动画持续?
requestAnimationFrame 递归调用：在动画函数末尾再次调用自身，形成无限循环。
循环逻辑：通过条件判断避免动画终止。
(2) 如何暂停/恢复动画?
cancelAnimationFrame：取消之前注册的动画帧，停止递归。
状态控制：用 isPaused 变量标记动画状态，恢复时重新调用 animate()。
(3) 性能优化
避免在动画中频繁操作 DOM 或计算复杂逻辑。
使用 transform: translateX() 替代 left 属性。
3. 进阶：多动画持续运行
如果需要多个独立持续动画，可以分开管理动画帧：
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(); // 启动旋转动画
18changeColor(); // 启动颜色变化
4. 替代方案：CSS 动画 + JS 控制
如果动画较简单，可以用 CSS 实现持续效果，通过 JS 动态控制类名：
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'); // 启动动画
13 // 暂停：box.classList.remove('moving');
14</ｓｃｒｉｐｔ>
总结
持续动画核心：requestAnimationFrame 递归 + 循环逻辑。
控制动画：通过状态变量和 cancelAnimationFrame 实现暂停/恢复。
优化建议：复杂动画优先使用 CSS 或 WebGL。
以上是创建JavaScript动画效果的一些基本方法。你可以根据自己的需求选择最合适的方法。对于复杂的动画或高级效果，使用像GSAP这样的库通常是最方便和强大的选择。
