lottie-web 实现可以播放zip文件的播放器-CSDN博客

本文链接：https://blog.csdn.net/qq_35516360/article/details/122064423

本文介绍了如何使用lottie-web加载zip包中的动画资源，包括上传zip文件、使用jszip解压、以及实现逐帧控制播放。重点在于利用浏览器特性简化动画管理并提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文链接: lottie-web 实现可以播放zip文件的播放器

上一篇: 简单魔方的旋转 [todo]

下一篇: lottie-minify在线压缩lottie 的json数据

资源下载和相关链接

https://lottiefiles.com/

https://design.alipay.com/lolita

https://design.alipay.com/emotion/editor

https://www.npmjs.com/package/path-browserify

https://stuk.github.io/jszip/

一般下载zip包的好处是和图片一起的, 而且只需要一次下载行了, 如果lottie有图片, 只用一个json的话是需要重新请求下载图片的

使用jszip解压zip包

上传zip包后, 我们就能直接播放了, 可以逐帧控制, 以及暂停重置等

在mac环境下, 有时候会莫名其妙压缩进来一些系统文件, 可以加个判断去除含有__MACOSX的路径

浏览器端使用这个模拟node上的path https://www.npmjs.com/package/path-browserify

jszip中导出数据, 可以导出string然后在用json处理, 图片资源可以直接导出为blob, 但是可能会有类型问题, 到时候手动换一下, 我没换也不影响浏览器解析

zip.files[newPath].async("blob")

使用帧来控制, 相对于时间更加好控制一点, lottie-web支持跳转播放和跳转暂停, 所以可以简单实现滑动进度条播放, 记得加throttle, 不然会有点卡, 一般100ms就够了

const maxFrame = computed(() => state.ins?.totalFrames || 1);
const minFrame = computed(() => state.ins?.firstFrame || 0);
const frameRange = computed(() => maxFrame.value - minFrame.value + 1 || 1);

    state.ins.goToAndStop(f, isFrame);

  state.ins.goToAndPlay(f, isFrame);