Лотти, сделай анимацию простой~

JavaScript
Лотти, сделай анимацию простой~

предисловие

Поделитесь подключаемым модулем анимации — Lottie-web, веб-ветвь серии airbnb/Lottie, конечно же, поддерживает несколько терминалов, и вы можете посмотреть на других членов семьи, если вам интересно;Члены семьи Лотти

Что касается GIF, то в реальной разработке некоторые сложные анимационные технологии часто не имеют времени и сил заниматься.В основном босс дизайна бросает несколько GIF для воспроизведения.Это воспроизведение может стоить сотни килобайт или даже M.Можно сказать что это совсем не весело, так что есть Лотти Можно сказать, что появление Лотти существенно решает проблему применимости и использования ресурсов GIF на всех концах болевой точки;

руководство

Функции

 适用性： 一段json多端使用（ios、Android、windows、web）
 利用率： git转json，资源节约

Демонстрация эффекта

Пример использования ВУЭ

 import lottie from 'lottie-web'
 startLottie () {
  // start
  dome = lottie.loadAnimation({
    container: this.$refs.lottie, // the dom element that will contain the animation
    renderer: 'svg', // 'svg' / 'canvas' / 'html' to set the renderer
    loop: true, //
    autoplay: true, // autoplay
    path: './data.json' // the path to the animation json
  })
},
 endLottie () {
  // end
  dome.destroy()
 }

Больше советов

Performance

Поскольку он существует для решения проблемы производительности, производительность должна быть наибольшей проблемой.Давайте посмотрим на рабочие точки приведенных выше демонстрационных примеров.В целом, ЦП, 4-кратное замедление, скорость, память и fps - все это стабильные яппи, и он также имеет проверено давно, проблем нет, можно начинать с уверенностью~

Эпилог

Собственный пакет зависимостей Lottie min имеет размер более 100 КБ, поэтому в целях экономии ресурсов GIF не забудьте оптимизировать сам пакет зависимостей; Использование cdn или gzip — лучший способ, и заинтересованные друзья могут подробно изучить его ~

Категории