在HTML5中插入动态图，最直接的方式是用img标签引用GIF或APNG文件；而创建动态图则需要借助CSS动画、Canvas或SVG等技术实现帧动画或补间动画。参考2
html5如何插入动态图：三种主流方式
直接使用img标签插入GIF
这是最基础的方法，将GIF文件路径放入<img src="example.gif">，浏览器就会自动播放，但GIF的颜色限制和文件大小一直是个问题，对于简单的图标或表情，GIF仍然适用，如果你需要插入动态图但不想管理文件，也可以使用Base64编码直接嵌入，不过这会使HTML体积增大，GIF兼容所有浏览器，是循环播放小动画的稳妥选择,但画质和性能并非最优。
利用APNG实现更高画质
APNG是GIF的现代替代品，支持24位颜色和8位透明度，动画效果远超GIF，近年来，相当一部分现代浏览器已经支持APNG，包括最新版Chrome、Firefox、Safari，使用<picture>元素可以让浏览器自动选择APNG或回退到GIF：
<picture> <source type="image/png" srcset="animation.png"> <img src="animation.gif" alt="动态图"> </picture>
这样，不支持APNG的浏览器会显示GIF版本，实现渐进增强，对于要求高色彩和透明背景的场景,APNG是GIF的理想替代。
用CSS动画或SVG动画替代传统图片
CSS动画完全不需要外部资源，仅通过样式表即可实现动态效果,一个呼吸效果的光圈：
.pulse {
width: 100px;
height: 100px;
background: #09f;
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.1); opacity: 1; }
}
SVG动画则适合图形化的动态图，比如图标旋转或路径描边，它使用<animate>元素，直接嵌入在SVG中，无需JavaScript，对于矢量内容，这两种方式不仅文件小巧,还能缩放任意尺寸。
| 格式 |
优点 | 缺点 | 浏览器支持 |
|---|---|---|---|
| GIF | 兼容性最好，制作简单 | 颜色有限，文件较大 | 全部支持 |
| APNG | 色彩丰富，支持透明 | 部分旧浏览器不支持 | 主流现代浏览器 |
| CSS动画 | 无额外请求，可交互 | 实现复杂动画较困难 | 现代浏览器 |
| SVG动画 | 矢量缩放，小巧 | 不适合照片级内容 | 广泛支持 |
创建动态图html5代码的完整示例
使用CSS @keyframes制作旋转加载动画
假设我们需要一个旋转的加载图标,HTML结构如下：
<div class="spinner"></div>
CSS代码：
.spinner {
width: 40px;
height: 40px;
border: 4px solid #ddd;
border-top-color: #333;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
这种动画无需加载外部图片，且性能良好，适合移动端使用，通过添加类切换,可以控制动画的暂停与继续。
使用Canvas逐帧绘制动画：模拟火焰粒子效果
Canvas可以绘制每一帧的内容,下面是一个火焰粒子效果的简化实现：
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const particles = [];
function createParticle() {
return {
x: 200, y: 300,
vx: Math.random() 2 - 1,
vy: -Math.random() 5 - 2,
life: 1,
size: Math.random() 10 + 5
};
}
function update() {
ctx.clearRect(0, 0, 400, 400);
if (particles.length < 30) particles.push(createParticle());
for (let i = particles.length - 1; i >= 0; i--) {
const p = particles[i];
p.x += p.vx; p.y += p.vy;
p.life -= 0.02;
ctx.globalAlpha = p.life;
ctx.fillStyle = '#f80';
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI2);
ctx.fill();
if (p.life <= 0) particles.splice(i, 1);
}
requestAnimationFrame(update);
}
update();
参考2
使用requestAnimationFrame代替setInterval，能让动画与浏览器刷新率同步,避免不必要的重复绘制。
使用第三方库快速构建复杂动画
如果你不想手动处理帧循环，GSAP是一个强大的选择，它提供了时间线、缓动和插件,可以轻松串联多个动画：
gsap.to('.box', { duration: 2, x: 300, rotation: 360, repeat: -1, yoyo: true });
一行代码就能实现一个持续往返的动画，类似的库还有Anime.js和Motion One，它们提供丰富的缓动函数和时间线控制,能大幅提升开发效率。
动态图html5性能优化技巧
优先使用CSS动画而非JavaScript动画
CSS动画由浏览器引擎优化，通常比JavaScript动画更流畅，对于简单的属性变化，CSS是首选，尽量使用transform和opacity属性，这些属性可以触发GPU合成,减少CPU负担。
减少Canvas中的重绘
在Canvas动画中，避免在每一帧绘制过多元素，可以使用离屏Canvas缓存静态部分，只绘制变化的部分,从而降低CPU消耗。
控制帧率与按需加载
对于视觉效果要求不高的动画，可以降低帧率到30fps，通过requestAnimationFrame的计数控制，对于不在视口内的动态图，采用懒加载策略。<img loading="lazy">可以延迟加载图片,减少初始页面负载。
使用视频格式替代大型GIF
当动态图文件超过数MB时，考虑使用视频，H.264编码的视频在同等画质下，文件大小通常远小于GIF，使用<video autoplay loop muted>即可模拟动态图，且支持拖拽进度，据统计,多数情况下视频比GIF更节省带宽。
场景对比：视频vs动态图html5，该选哪个？
需要透明背景时
GIF不支持透明，APNG和CSS动画支持透明背景，如果你需要动态图叠加在其他内容上，APNG或CSS动画是更好的选择，SVG动画同样支持透明,且缩放无损。
需要交互响应时
HTML5动画可以轻松绑定事件，点击按钮切换动画状态，或者根据滚动位置改变动画进度，这些是GIF无法做到的，如果你希望用户能控制动画,必须使用CSS动画或Canvas。参考2
需要跨平台兼容时
GIF的兼容性最好，但代价是画质和性能，如果目标用户全部使用现代浏览器，APNG和CSS动画是更好的选择，对于旧版浏览器，可以提供GIF作为fallback，业内专家指出，根据项目目标选择技术方案，不必拘泥于单一格式，文章开头提到的几种方法,可以灵活组合使用。
常见问题解答
html5如何插入动态图并控制播放？
使用<img>标签插入GIF会自动播放，如果需要控制播放，可以使用<canvas>逐帧控制，或者使用CSS动画的animation-play-state属性，对于视频模拟的动态图，可以使用JavaScript控制play()和pause()，对于GIF本身，无法通过原生方式控制暂停,需借助JavaScript库或替换为其他技术。
创建动态图html5代码复杂吗？
复杂度取决于目标，简单的CSS动画只需几行代码，而复杂的Canvas动画可能需要数百行，但许多在线工具提供可视化界面，导出HTML5动画代码，例如使用免费的html5动态图生成器，可以快速完成需求，对于初学者，推荐从CSS关键帧开始,逐步过渡到Canvas。
动态图html5与GIF哪个性能更好？
在多数情况下，CSS动画和视频的性能优于GIF，GIF解码消耗CPU，且文件较大，容易导致页面卡顿，HTML5动画可以利用GPU加速，更加流畅，但要注意，Canvas动画如果绘制复杂，也可能消耗较多资源，此时视频更优，行业共识认为，对于现代网页，优先考虑CSS动画或轻量级Canvas动画,仅在必要时使用GIF。
掌握HTML5动态图的插入与创建技术，能让你在网页设计中游刃有余，无论是简单的GIF还是复杂的Canvas动画，合理选择并优化，才能为用户带来快速流畅的体验，从今天开始，尝试用现代方法替代老旧的GIF,你会发现网页性能提升明显。
首发原创文章，作者：王坚，如若转载，请注明出处：https://test.idctop.com/article/531650.html
