Привет, коллега! Сегодня расскажу про Anime.js — миниатюрную, но очень гибкую JavaScript-библиотеку для анимации всего, что движется (и даже того, что не движется, но может).
Если ты когда-нибудь пытался сделать плавную анимацию через setInterval или плакал над CSS-ключевыми кадрами — эта штука для тебя.
Что умеет Anime.js?
- Анимировать CSS-свойства (
opacity,transform,background-colorи т.д.) - Работать с SVG (пути, атрибуты, заливки)
- Менять DOM-атрибуты и даже числовые поля в JS-объектах
- Строить сложные последовательности и таймлайны
- Поддерживать кастомные easing-функции (включая spring-эффекты!)
И всё это — в файле размером около 12 КБ (gzip). Да, серьёзно.
Простой пример «из коробки»
Вот красный квадрат. Жми на него — и он отправится в путешествие:
А вот код, который за этим стоит:
anime({
targets: '#box',
translateX: 300,
rotate: '1turn',
backgroundColor: '#4CAF50',
duration: 1200,
easing: 'easeOutElastic(1, 0.5)'
});Обрати внимание: мы анимируем и позицию, и поворот, и даже цвет фона — всё в одном вызове. CSS такое не потянет без костылей.
Где это может пригодиться?
Вот несколько идей из реальных проектов:
- Визуализация активности датчиков (например, зелёная точка → красная при срабатывании PIR)
- Плавные переходы в админках и IoT-панелях
- Интерактивные инструкции или onboarding-туториалы
- Анимированные графики и счётчики (например, «температура: 23.5°C» с плавным изменением)
Как подключить?
Проще простого — просто вставь в HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"> </script> Или скачай локально, если хочешь полную автономность (а ты ведь хочешь — я помню 😉).
Заключение
Anime.js — это как швейцарский нож для веб-анимации: компактный, точный и не требует лишних зависимостей. Он не заменит тебе Three.js или GSAP в сложных сценариях, но для 90% задач — более чем достаточно.
Попробуй — и ты забудешь, как писал кривые анимации на чистом CSS.
А если сделаешь что-то интересное (например, анимированную карту движения по территории на основе данных с LoRa-датчиков) — напиши в комментариях! Буду рад посмотреть.
До новых встреч в эфире! 📡
Комментарии
Пока нет комментариев. Будьте первым!