h5实现动图
H5 实现动图的方法
在 HTML5 中，可以通过多种方式实现动图效果，以下是常见的几种方法：
使用 GIF 动图
GIF 是最简单的动图实现方式，直接通过 <img> 标签引入即可：
<img src="example.gif" alt="GIF 动图">GIF 支持多帧动画，但文件体积较大且色彩表现有限。
使用 CSS 动画
通过 CSS 的 @keyframes 和 animation 属性可以实现元素动画效果：
<div class="animated-box"></div>
<style>
.animated-box {
width: 100px;
height: 100px;
background: red;
animation: move 2s infinite;
}
@keyframes move {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
}
</style>使用 JavaScript 控制动画
通过 JavaScript 动态修改 DOM 元素的样式或位置，可以实现更复杂的动画效果：
<div id="box"></div>
<script>
let box = document.getElementById('box');
let pos = 0;
setInterval(() => {
pos = (pos + 5) % 200;
box.style.transform = `translateX(${pos}px)`;
}, 50);
</script>使用 Canvas 绘制动画
Canvas 提供了强大的绘图 API，适合实现复杂的动画效果：
<canvas id="canvas" width="300" height="150"></canvas>
<script>
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let x = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, 50, 50, 50);
x = (x + 2) % 250;
requestAnimationFrame(draw);
}
draw();
</script>使用 SVG 动画
SVG 也支持多种动画效果，可以通过 <animate> 标签实现：
<svg width="300" height="100">
<rect x="0" y="0" width="50" height="50" fill="blue">
<animate attributeName="x" from="0" to="250" dur="3s" repeatCount="indefinite"/>
</rect>
</svg>使用 WebGL 实现 3D 动画
对于高性能的 3D 动画，可以使用 WebGL 技术：
<canvas id="glCanvas"></canvas>
<script>
let canvas = document.getElementById('glCanvas');
let gl = canvas.getContext('webgl');
// WebGL 代码实现动画
</script>使用视频替代动图
对于复杂的动画场景，可以考虑使用 <video> 标签：
<video autoplay loop muted>
<source src="animation.mp4" type="video/mp4">
</video>每种方法都有其适用场景：GIF 适合简单小动画，CSS 适合 UI 元素动画，Canvas 和 WebGL 适合复杂交互式动画，视频适合高质量动画展示。选择方法时应考虑性能需求、兼容性要求和开发复杂度。
