原文链接: lottie-web 实现可以播放zip文件的播放器
上一篇: 简单魔方的旋转 [todo]
下一篇: lottie-minify在线压缩lottie 的json数据
资源下载和相关链接
https://design.alipay.com/lolita
https://design.alipay.com/emotion/editor
https://www.npmjs.com/package/path-browserify
一般下载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);