Встречайте s1-lottie: легкий компонент-оболочку для веб-библиотеки лотерей airbnb.
Несколько недель назад я опубликовал статью в блоге SentinelOne, в которой описал, как мы использовали lottie web lib airbnb для реализации некоторых передовых анимаций.
Я действительно рекомендую прочитать статью, чтобы лучше понять мотивацию, которая возникла у нас, когда мы решили использовать лотерею, и наш общий подход к анимации и микровзаимодействию.
В этом посте я хочу быстро рассмотреть некоторые технические части крошечного компонента Angular, который мы опубликовали в домене SentinelOne - s1-lottie.
Цель s1-lottie - проксировать функциональные возможности экземпляра lottie для безопасного использования в вашем приложении Angular. (Если вы не знакомы с Lottie lib, вкратце: она позволяет отображать анимацию после эффектов в Интернете и управлять ими с помощью javascript).
Давайте рассмотрим методы, которые мы использовали для того, чтобы сделать компонент lottie «готовым к Angular» и который так легко интегрировать:
- Мы принимаем во внимание крючки жизненного цикла Angular, ссылаясь на хост игрока lottie после инициализации его контейнера (ngAfterViewInit).
- Мы оптимизируем производительность, избегая обнаружения изменений Angular при любой загрузке анимации (необязательно, передав логическое значение).
- Мы уничтожаем экземпляр lottie после разрушения компонента.
- Для правильного набора текста мы использовали официальный lottie / types (Typescript).
- Мы не перегружали компонент избыточными абстракциями. мы просто проксируем возможности лотерей / пользовательские события как есть - легко отлаживать.
- Мы устанавливаем для вас веб-лотерею в качестве взаимозависимости.
- Мы приостанавливаем игру в лотерею, когда элемент хоста не виден пользователю.
Добро пожаловать в репо, поиграйте с кодом и внесите свой вклад, если хотите :)
Ваше здоровье,
Лирон.
