Установка и подключение

Библиотека anime.js распространяется в виде готового JavaScript-файла и может быть подключена несколькими способами в зависимости от архитектуры проекта и используемых инструментов сборки.

Подключение через CDN

Самый быстрый способ начать работу — использовать CDN (Content Delivery Network). В этом случае файл библиотеки загружается с внешнего сервера и не требует локальной установки.

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

После подключения глобальная переменная anime становится доступной во всех скриптах страницы.

Особенности:

  • не требует сборщика и настройки окружения
  • подходит для прототипов и небольших проектов
  • зависимость от внешнего ресурса

Локальное подключение

Файл библиотеки можно скачать вручную с официального репозитория и подключить как обычный скрипт:

<script src="js/anime.min.js"></script>

Структура проекта может выглядеть следующим образом:

project/
├── index.html
├── js/
│   └── anime.min.js

Преимущества:

  • полный контроль над версией
  • отсутствие зависимости от сети

Недостатки:

  • необходимость обновления вручную

Установка через npm

Для проектов, использующих сборщики (например, Webpack, Vite, Parcel), предпочтительным способом является установка через пакетный менеджер npm:

npm install animejs

После установки библиотека подключается в коде через импорт:

import anime from 'animejs/lib/anime.es.js';

Или, при использовании CommonJS:

const anime = require('animejs');

Особенности:

  • интеграция с системой сборки
  • возможность tree-shaking (в зависимости от сборщика)
  • удобное управление зависимостями

Установка через yarn

Альтернативный способ установки через менеджер пакетов yarn:

yarn add animejs

Использование аналогично npm.

Структура подключаемых файлов

В составе пакета anime.js присутствует несколько версий файлов:

  • anime.min.js — минифицированная версия для продакшена
  • anime.js — неминифицированная версия для разработки
  • anime.es.js — версия с поддержкой ES-модулей

Выбор файла зависит от среды:

Среда Рекомендуемый файл
Браузер (CDN) anime.min.js
Локальная разработка anime.js
Сборщики (ESM) anime.es.js

Проверка корректности подключения

После подключения библиотеки необходимо убедиться, что она доступна в среде выполнения.

Через браузер

В консоли разработчика:

console.log(anime);

Если библиотека подключена корректно, будет выведена функция anime.

Типичная ошибка

Uncaught ReferenceError: anime is not defined

Причины:

  • неправильный путь к файлу
  • скрипт подключен после использования
  • ошибка загрузки CDN

Порядок подключения скриптов

anime.js должен быть подключён до пользовательского кода, в котором он используется:

<script src="anime.min.js"></script>
<script src="main.js"></script>

Или при использовании ES-модулей:

<script type="module" src="main.js"></script>

Использование с модульной системой

В современных проектах чаще используется модульная система ES Modules.

Пример:

import anime from 'animejs/lib/anime.es.js';

anime({
  targets: '.box',
  translateX: 250
});

Важно учитывать:

  • браузер должен поддерживать ES-модули
  • при использовании сборщика путь может быть сокращён:
import anime from 'animejs';

(в зависимости от конфигурации)

Интеграция с Webpack

После установки через npm:

import anime from 'animejs/lib/anime.es.js';

Дополнительной настройки обычно не требуется, так как библиотека уже оптимизирована для работы с Webpack.

Интеграция с Vite

Vite автоматически обрабатывает ES-модули:

import anime from 'animejs/lib/anime.es.js';

Благодаря нативной поддержке ESM, anime.js работает без дополнительной конфигурации.

Подключение в React, Vue и других фреймворках

Внутри компонентов библиотека подключается через импорт:

import anime from 'animejs/lib/anime.es.js';

Пример (React):

import { useEffect } from 'react';
import anime from 'animejs/lib/anime.es.js';

function App() {
  useEffect(() => {
    anime({
      targets: '.box',
      translateX: 250
    });
  }, []);

  return <div className="box"></div>;
}

Подключение TypeScript

anime.js не содержит встроенных типов, поэтому для TypeScript можно:

  1. Установить типы (если доступны):
npm install --save-dev @types/animejs
  1. Либо объявить модуль вручную:
declare module 'animejs';

Импорт:

import anime from 'animejs/lib/anime.es.js';

Асинхронная загрузка

Для оптимизации загрузки страницы возможно отложенное подключение библиотеки:

<script src="anime.min.js" defer></script>

или

<script src="anime.min.js" async></script>

Различие:

  • defer — выполняется после загрузки HTML
  • async — выполняется сразу после загрузки, порядок не гарантирован

Динамическое подключение

В некоторых случаях библиотека может загружаться динамически:

const script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js';
document.head.appendChild(script);

После загрузки:

script.onl oad = () => {
  anime({
    targets: '.box',
    translateX: 250
  });
};

Версионирование

При использовании CDN важно фиксировать версию:

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

Использование последней версии без указания номера может привести к несовместимостям.

Минификация и продакшен

Для продакшен-сборки рекомендуется:

  • использовать anime.min.js
  • минимизировать пользовательский код
  • подключать скрипты с атрибутом defer

Типичные ошибки при подключении

1. Неверный путь

<script src="anime.js"></script> <!-- файл отсутствует -->

2. Порядок подключения

<script src="main.js"></script>
<script src="anime.js"></script> <!-- ошибка -->

3. Конфликт модулей

  • попытка использовать import без type="module"

4. Использование Node.js без сборщика

  • anime.js предназначен для браузера

Рекомендации по выбору способа

Сценарий Рекомендуемый способ
Быстрый прототип CDN
Статический сайт Локальный файл
SPA / сложный проект npm / yarn
Фреймворки ES Modules

Подготовка окружения

Перед началом работы важно:

  • убедиться в наличии браузера с поддержкой ES6
  • настроить сборщик (при необходимости)
  • выбрать стратегию подключения
  • проверить доступность библиотеки в коде

Корректное подключение anime.js — фундамент для дальнейшей работы с анимациями, от которого зависит стабильность и предсказуемость поведения всей системы.

Оглавление