@sternelee/rlottie

使用 rlottie + pako + webworker 在前端实现 lottie 的动画效果, 如 telegram 官网动画的效果, 或本地演示 npm run dev

Usage no npm install needed!

<script type="module">
  import sterneleeRlottie from 'https://cdn.skypack.dev/@sternelee/rlottie';
</script>

README

@sternelee/rlottie

使用 rlottie + pako + webworker 在前端实现 lottie 的动画效果, 如 telegram 官网动画的效果, 或本地演示 npm run dev

lottie 动画json文件使用 pako 压缩 生成素材资源

const pako = require('pako')
const fs = require('fs')
// 建议先把 json 文件压缩: jq -c . < input.json > input.mini.json
fs.readFile('./json/xxx.json', null, function (err, data) {
  if (err) {
    console.log(err)
  }
  try {
    const buffer = pako.deflate(data, { level: 9 });
    fs.writeFile('./json/xxx', buffer, 'binary', function (err) {
      console.log(err)
    })
  } catch (e) {
    console.log(e)
  }
})

前端使用

  1. 页面配置资源位置
<picture class="rlottie_image">
  <source type="application/x-rlottie" srcset="/xxx">
</picture>
  1. 实现动画

将模块目录下的 rlottie-worker.[hash].jsrlottie-wasm.wasm 放置在您的静态资源目录,方便模块加载

import Rlottie from '@sternelee/rlottie'

window.onload = () => {
  document.querySelectorAll('.rlottie_image').forEach(function (imgEl) {
    RLottie.init(imgEl, {});
  });
}