задний план
Обычно используемой схемой анимации для загрузки в проекте Feishu является анимация Gif.
Существуют определенные проблемы с анимацией Gif. Файлы Gif, как правило, большие, а размер презентации фиксированный. Его нельзя масштабировать для соответствия большим экранам и экранам с высокой плотностью. Он склонен к алиасингу и не может управлять анимацией.
Другие часто используемые схемы анимации:
Png Sequence Frames: составные файлы спрайтов имеют большой размер и могут искажаться при разных разрешениях экрана.
Анимация SVG: высокая стоимость реализации и низкая степень воспроизведения анимации
В настоящее время проект нуждается в более простой, более эффективной, лучшей производительности и более воспроизводимой схеме анимации. Схема дизайна содействует схему конфигурации анимации экспорта AE + Bodymovin. После расследования, обнаружено, что Lottie Animation является очень осуществимой схемой Отказ
LottieAndroid,iOS,Web,React Nativeа такжеWindowsБиблиотека анимации, по сути, набор кроссплатформенных анимационных решений. Он обеспечивает полный набор потоков инструментов от AE до различных терминалов.Анимация, созданная дизайнером, экспортируется в набор определенных файлов json через плагин Bodymovin AE, а затем анимационные эффекты и анимация могут быть реализованы с помощью библиотек. каждого конца Лотти.100% степень уменьшения,Lottie-web Example.
инструкции
lottie-webПоддерживает большинство функций (воздух не NB.IO/Lottie/#/Su…), вы можете реализовывать более сложные анимации, управлять воспроизведением анимаций и отслеживать события на каждом этапе анимации (GitHub.com/air не NB/Lott…
lottie-webСуществует три метода рендеринга: svg, canvas, html, обычно используемый svg, canvas
lottie.loadAnimation({
container: element, // the dom element that will contain the animation
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json' // the path to the animation json
});
react-lottieЧтобы использовать (т.lottie-webупакован как компонент React)
import React from 'react'
import Lottie from 'react-lottie';
import * as animationData from './pinjump.json'
export default class LottieControl extends React.Component {
constructor(props) {
super(props);
this.state = {isStopped: false, isPaused: false};
}
render() {
const buttonStyle = {
display: 'block',
margin: '10px auto'
};
const defaultOptions = {
loop: true,
autoplay: true,
animationData: animationData,
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice'
}
};
return <div>
<Lottie options={defaultOptions}
height={400}
width={400}
isStopped={this.state.isStopped}
isPaused={this.state.isPaused}/>
<button style={buttonStyle} onClick={() => this.setState({isStopped: true})}>stop</button>
<button style={buttonStyle} onClick={() => this.setState({isStopped: false})}>play</button>
<button style={buttonStyle} onClick={() => this.setState({isPaused: !this.state.isPaused})}>pause</button>
</div>
}
}
Как управлять воспроизведением анимации:
| имя | описывать |
|---|---|
| animation.play | Воспроизвести анимацию, начиная с кадра, на котором она в данный момент остановлена. |
| stop | Хватит играть в анимацию назад к кадру 0 |
| pause | |
| goToAndStop | |
| goToAndPlay | |
| goToAndStop | animation.goToAndStop(30, true); перейти к кадру 30 и остановиться |
| playSegments | animation.playSegments(arr, forceFlag);arr может содержать два числа или массив из двух чисел, forceFlag указывает, следует ли принудительно воспроизводить сегмент немедленно animation.playSegments([10,20], false); после воспроизведения предыдущего сегмента , Воспроизведение 10-20 кадров animation.playSegments([[0,5],[10,18]], true); прямое воспроизведение 0-5 кадров и 10-18 кадров |
| setSpeed | анимация .setspeed (скорость); установить скорость воспроизведения, скорость 1 означает нормальную скорость |
| setDirection | Animation.SetDirection (направление); установить направление воспроизведения, 1 означает движение вперед воспроизведение, -1 означает обратное воспроизведение |
| destroy | animation.destroy(); Удалить анимацию, удалить соответствующую метку элемента и т. д. При размонтировании нужно вызвать этот метод |
Слушайте события:
| имя | описывать |
|---|---|
| data_ready | Загруженная JSON-анимация |
| complete | Воспроизведение завершено (не запускается при циклическом воспроизведении) |
| loopComplete | Запускается, когда воспроизведение в текущем цикле (циклическое воспроизведение/не циклическое воспроизведение) заканчивается |
| enterFrame | Он будет срабатывать каждый раз, когда вы вводите кадр, каждый кадр будет срабатывать один раз во время воспроизведения, а также срабатывает метод остановки. |
| segmentStart | Он будет срабатывать каждый раз, когда вы вводите кадр, каждый кадр будет срабатывать один раз во время воспроизведения, а также срабатывает метод остановки. |
| DOMLoaded | Запускается после того, как связанный с анимацией дом был добавлен в html |
| destroy |
Анимация частичной загрузки Lottie, Gif-анимация и сравнение анимации LottieПредставление GIF-анимации
1. Требует много времени для загрузки скомпилированных файлов библиотеки (блокирует запуск)
Среднее: 25 мс
2. Использование памяти самим файлом lottie-web
shadow size: 136B Retained Size: 1209553B
3. Длительное выполнение (с точки зрения трудоемкости выборка ЦП будет очень неточной, блокируя бизнес-логику, например, запуск чата)
Среднее: 15,4 мс
Анимационное представление Лотти
Как видно из приведенного выше рисунка, проверяются FPS, загрузка ЦП, загрузка ГП, сценарии, рендеринг, рисование и использование памяти для анимации Gif и схемы анимации Lottie.
| строить планы | размер | FPS | использование процессора | Использование графического процессора | ОЗУ |
|---|---|---|---|---|---|
| Анимированные GIF-файлы | 279KB | 8-60 кадров в секунду, максимальная частота кадров 50 кадров в секунду, частота кадров колеблется больше | 0% | 28.6MB | 94527 |
| Лотти Анимация | 4 КБ (файл json) 242,2 КБ (файл лотти-веб js) | 20-60 кадров в секунду, максимальная частота кадров составляет 59 кадров в секунду, частота кадров стабильна и меньше колебаний | 0% | 21.1MB | 94825 |
Из приведенного выше анализа данных видно, что файл конфигурации анимации Lottie небольшой, частота кадров высокая, использование графического процессора низкое, память не сильно отличается от анимации Gif, а производительность лучше.
Схема анимации Lottie проста, эффективна и имеет хорошую производительность, она может заменить традиционную GIF и покадровую анимацию, а также может управлять воспроизведением анимации, эффективно используя предоставленные свойства и методы.
Меры предосторожности
Летающие книги были спорадические случаи аномального увеличения ЦП, после расследования, чтобы определить местонахождение анимации ЦП Лотти не было вызвано удалением увеличения. На странице нет анимации, но Лотти вызывает requestAnimationFrame, что приводит к отсутствию каких-либо условий работы, загрузка ЦП увеличивается примерно до 2–5%, в общем случае при отсутствии каких-либо действий загрузка ЦП составляет от 0,1% до 0,2%.
Анимация Lottie вызывает компонент react-lottie, который уничтожит экземпляр анимации, когда компонент находится в componentWillUnmount.
Когда ЦП Feishu увеличился, было обнаружено, что в анимациях Lottie были экземпляры анимации, которые не были уничтожены, что привело к непрерывному вызову requestAnimationFrame, из-за чего ненормальная анимация была анимацией частичной загрузки. Модули, которые используют частично загруженные анимации в Feishu, включают в себя главный терминал (сеанс переключения, страница контактов, недавно добавленный контакт, робот, внешний контакт, onCall, всплывающее окно с запросом на обновление, добавление поиска контактов, всплывающее окно отправки файла облачного диска), список контактов, Анимация загрузки Docs Webview, переключение арендатора), календарь, центр приложений и т. д.
После позиционирования обнаруживается, что в центре приложений используется анимация частичной загрузки.Когда анимация не нужна, компонент не выгружается, а скрывается с помощью CSS, так что экземпляр анимации Lottie не уничтожается, и requestAnimationFrame всегда будет выполняться Код выглядит следующим образом:
// AppHome.js
<div className={!isLoaded ? 'app-home-loadingImg' : 'display-none'}><PartialLoading /></div>
Когда анимация не требует Лотти, Лотти выгружает компоненты анимации.
// AppHome.js
{
!!isLoading && (
<div className='app-home-loadingImg'>
<PartialLoading />
</div>
)
}