Использование в Angular

Интеграция Lottie Web в Angular

Для работы с анимациями Lottie в Angular используется библиотека lottie-web, а также один из удобных Angular-обёрток, чаще всего ngx-lottie. Базовая установка выполняется через npm:

npm install lottie-web
npm install ngx-lottie

Анимации Lottie представляют собой JSON-файлы, экспортируемые из Adobe After Effects через Bodymovin-плагин. Эти файлы становятся основой для дальнейшего рендеринга.

После установки необходимо подключить модуль в Angular-приложении.

Подключение ngx-lottie в Angular модуле

В классическом модульном подходе Angular используется следующий импорт:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LottieModule } from 'ngx-lottie';
import player from 'lottie-web';

export function playerFactory() {
  return player;
}

@NgModule({
  declarations: [],
  imports: [
    BrowserModule,
    LottieModule.forRoot({ player: playerFactory })
  ],
  bootstrap: []
})
export class AppModule {}

Функция playerFactory необходима для передачи экземпляра lottie-web в обёртку Angular.

Использование в компоненте

После подключения модуля появляется возможность использовать компонент ng-lottie:

<ng-lottie
  [options]="options"
  [width]="300"
  [height]="300">
</ng-lottie>

В компоненте Angular задаются параметры анимации:

import { Component } from '@angular/core';
import { AnimationOptions } from 'ngx-lottie';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  options: AnimationOptions = {
    path: '/assets/animations/loading.json',
    autoplay: true,
    loop: true
  };
}

Параметр path указывает путь к JSON-файлу анимации, который обычно размещается в папке assets.

Управление анимацией через API

Lottie предоставляет программный доступ к управлению проигрыванием. В Angular это реализуется через событие animationCreated:

<ng-lottie
  [options]="options"
  (animationCreated)="onAnimationCreated($event)">
</ng-lottie>
import { AnimationItem } from 'lottie-web';

export class AppComponent {
  private animationItem!: AnimationItem;

  onAnimationCreated(animationItem: AnimationItem): void {
    this.animationItem = animationItem;
  }

  play(): void {
    this.animationItem.play();
  }

  pause(): void {
    this.animationItem.pause();
  }

  stop(): void {
    this.animationItem.stop();
  }
}

Такой подход позволяет полностью контролировать жизненный цикл анимации.

Загрузка анимации из объекта

Помимо загрузки по пути, можно использовать JSON напрямую:

import animationData from '../assets/animations/loading.json';

options: AnimationOptions = {
  animationData,
  autoplay: true,
  loop: true
};

Этот вариант полезен при сборке через bundler, когда требуется минимизировать количество HTTP-запросов.

Интеграция без ngx-lottie

В некоторых проектах предпочтительно использовать чистый lottie-web без обёрток Angular.

Создание контейнера:

<div #lottieContainer></div>

И инициализация в компоненте:

import { AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import lottie, { AnimationItem } from 'lottie-web';

export class AppComponent implements AfterViewInit {
  @ViewChild('lottieContainer', { static: true })
  container!: ElementRef;

  animation!: AnimationItem;

  ngAfterViewInit(): void {
    this.animation = lottie.loadAnimation({
      container: this.container.nativeElement,
      renderer: 'svg',
      loop: true,
      autoplay: true,
      path: 'assets/animations/loading.json'
    });
  }
}

Этот способ даёт полный контроль над конфигурацией и исключает зависимость от сторонних Angular-обёрток.

Выбор рендерера

Lottie поддерживает несколько типов рендеринга:

  • svg — основной и наиболее качественный вариант
  • canvas — подходит для тяжёлых анимаций
  • html — используется реже, для специфичных случаев

Пример:

renderer: 'canvas'

SVG остаётся стандартом благодаря масштабируемости и качеству отображения.

Работа с жизненным циклом Angular

Важно корректно управлять ресурсами, особенно при переходе между компонентами.

Очистка анимации:

ngOnDestroy(): void {
  if (this.animation) {
    this.animation.destroy();
  }
}

Это предотвращает утечки памяти и лишнюю нагрузку на DOM.

Управление скоростью и состоянием

Lottie позволяет управлять скоростью воспроизведения:

this.animation.setSpeed(2);

Также доступны методы:

  • goToAndPlay(frame, isFrame)
  • goToAndStop(frame, isFrame)
  • setDirection(direction)
  • setSubframe(useSubFrames)

Эти методы позволяют создавать интерактивные сценарии анимаций.

Использование сервисного слоя

Для масштабных Angular-приложений логично выносить работу с Lottie в сервис.

import { Injectable } from '@angular/core';
import { AnimationItem } from 'lottie-web';

@Injectable({ providedIn: 'root' })
export class LottieService {
  private animation?: AnimationItem;

  register(animation: AnimationItem) {
    this.animation = animation;
  }

  play() {
    this.animation?.play();
  }

  pause() {
    this.animation?.pause();
  }
}

Использование сервиса позволяет централизовать управление анимациями.

Lazy loading анимаций

При большом количестве JSON-анимаций целесообразно загружать их по требованию.

loadAnimation(): AnimationOptions {
  return {
    path: '/assets/animations/heavy.json',
    autoplay: true,
    loop: true
  };
}

Это уменьшает начальный размер bundle и ускоряет загрузку приложения.

SSR и Angular Universal

При использовании Angular Universal необходимо учитывать отсутствие window и DOM.

Lottie должен инициализироваться только на клиенте:

import { isPlatformBrowser } from '@angular/common';
import { Inject, PLATFORM_ID } from '@angular/core';

constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

ngAfterViewInit(): void {
  if (isPlatformBrowser(this.platformId)) {
    this.initAnimation();
  }
}

Это предотвращает ошибки при серверном рендеринге.

Оптимизация производительности

При работе с большим количеством анимаций важно учитывать:

  • использование svg только при необходимости
  • отключение autoplay для невидимых элементов
  • уничтожение анимаций при скрытии компонентов
  • избегание повторной инициализации

Также полезно контролировать FPS и сложность анимации на этапе экспорта из After Effects.

Динамическая смена анимаций

Lottie позволяет подменять анимации без пересоздания DOM:

this.animation.destroy();

this.animation = lottie.loadAnimation({
  container: this.container.nativeElement,
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'assets/animations/next.json'
});

Такой подход используется в интерфейсах с состояниями (loading, success, error).

Интерактивность и события

Lottie поддерживает события жизненного цикла:

this.animation.addEventListener('complete', () => {
  console.log('Animation completed');
});

Основные события:

  • complete
  • loopComplete
  • enterFrame
  • segmentStart

Эти события позволяют связывать анимацию с логикой интерфейса.

Использование сегментов

Сегменты позволяют воспроизводить части анимации:

this.animation.playSegments([0, 50], true);

Это удобно для интерфейсов с пошаговыми состояниями или микроинтеракциями.

Оглавление