前端 Spine 动画图片优化

在游戏官网中，经常需要展示动态的头图动画和角色立绘动画，以吸引玩家的注意力并提供丰富的视觉体验。相比于 GIF、CSS帧动画 和 APNG，Spine动画 在性能、动画质量和灵活性方面具有明显优势。它利用骨骼动画技术减小文件大小，允许在运行时动态调整动画属性，提供了更自然和流畅的动画效果。

E69CAAE591BDE5908DE5B08F-ezgif.com-loop-count.gif

图片资源问题

然而，如果要保持高清的质量，Spine 动画的图片资源通常会达到几 MB 的大小，这会严重影响网页的加载速度，从而损害用户体验。

企业微信20240814-152837@2x.png

为了解决这个问题，尝试了使用 tinyPNG 压缩图片大小，但还是需要 900KB，部分结果会导致动画出现明显的瑕疵痕迹。

AVIF 图片格式

解决思路是使用 AVIF（AV1 Image File Format）图像文件格式，基于 AV1 视频编码技术。与传统的 JPEG 和 PNG 格式相比，AVIF 提供了更高的压缩效率，可以在保持相同图像质量的同时显著降低文件大小。在实际测试中，图片大小从 5.9MB 减小至 488KB，同时保持了动画的清晰度。

Untitled 1.png

兼容性

⚠️ 注意，并非所有浏览器都支持 AVIF 格式：

Untitled 2.png

为了确保 Spine 动画在不同浏览器上都能正常工作，需要先检测浏览器是否兼容 AVIF 格式。如果不支持，则应降级使用 PNG 格式：

const checkImgCompat = () => {
    return new Promise((resolve) => {
        const avif = new Image();
        avif.src = "data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=";
        avif.onload = () => resolve('avif');
        avif.onerror = () => resolve('png');
    });
};

Spine 资源替换

最后，根据检测到的图片类型，通过 rawDataURIs 配置 Spine 动画的资源加载路径。

const loadSpine = async () => {
    const imgType = await checkImgCompat();
    new spine.SpinePlayer('player-container', {
        skelUrl: '../spine-models/c090_02.skel.bytes',
        atlasUrl: '../spine-models/c090_02_avif.atlas.txt',
        rawDataURIs: {
            '../spine-models/c090_02.png': `../spine-models/c090_02.${imgType}`
        }
    });
};

小结

通过使用 AVIF 格式，我们可以有效地优化 Spine 动画的图片资源，提升加载速度，并确保在所有浏览器上都能正常显示。

前端 Spine 动画图片优化