@sternelee/rlottie

Использование rlottie, pako и webworker позволяет реализовать на фронтенде анимационные эффекты Lottie. Например, можно воссоздать анимацию с сайта Telegram или запустить локальную демонстрацию через npm run dev.

Преимущества: меньший объём — требуется всего 835 КБ библиотечных файлов и около 10 КБ материалов.

Использование pako для сжатия json-файла с анимацией Lottie и создание ресурсов материалов

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>

2. Реализация анимации

Поместите файлы rlottie-worker.[hash].js и rlottie-wasm.wasm из каталога модуля в каталог статических ресурсов, чтобы упростить загрузку модулей. Файлы wasm преобразованы в base64 и включены в код.

import Rlottie from '@sternelee/rlottie'

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