Учебник mo.js

Введение
- Что такое mo.js
- История создания и философия библиотеки
- Сравнение с другими анимационными библиотеками
- Установка и подключение
- Первый пример анимации
- Структура документации и как ей пользоваться
Основы работы с mo.js
- Концепция модулей в mo.js
- Понимание временной шкалы анимации
- Система единиц измерения
- Базовые параметры анимации
- Методы запуска и остановки
- События жизненного цикла анимации
- Цепочки вызовов и синтаксис
Shape - работа с фигурами
- Создание базовых фигур
- Встроенные типы фигур
- Параметры позиционирования
- Размеры и масштабирование
- Цвет заливки и обводки
- Прозрачность и режимы наложения
- Радиус и скругление углов
- Вращение и наклон
- Исходная точка трансформации
- Создание пользовательских фигур через path
ShapeSwirl - спиральные фигуры
- Принцип работы ShapeSwirl
- Параметры спирали
- Количество и распределение элементов
- Радиус и угол поворота
- Управление дочерними фигурами
- Анимация спиральных структур
Burst - взрывные эффекты
- Концепция Burst
- Количество и тип частиц
- Радиус распространения
- Угол раскрытия веера
- Степень случайности
- Настройка дочерних элементов
- Плотность и распределение частиц
- Комбинирование с другими модулями
Html - анимация DOM элементов
- Привязка к существующим элементам
- Отличия от Shape модуля
- Доступные параметры трансформации
- Ограничения при работе с HTML
- Производительность и оптимизация
- Интеграция с CSS свойствами
Параметры анимации
- Duration - длительность
- Delay - задержка старта
- Repeat - повторение анимации
- Speed - скорость воспроизведения
- Isyoyo - реверсивное воспроизведение
- IsShowStart и IsShowEnd
- BackwardStart - старт с конца
Easing - функции плавности
- Встроенные easing функции
- Линейная интерполяция
- Ease, ease-in, ease-out, ease-in-out
- Cubic bezier функции
- Пружинные эффекты
- Elastic и bounce
- Создание кастомных easing функций
- Визуализация и подбор функций
- Path-based easing
Анимируемые свойства
- Численные значения
- Цветовые переходы
- Единицы измерения в значениях
- Относительные значения
- Случайные значения через rand
- Stagger - каскадные значения
- Curve - кривые изменения
- Property maps
Timeline - временная шкала
- Создание временной шкалы
- Добавление анимаций
- Последовательное выполнение
- Параллельное выполнение
- Сдвиг по времени
- Управление скоростью Timeline
- Повторение всей последовательности
- Методы контроля воспроизведения
Tween - низкоуровневая анимация
- Назначение модуля Tween
- Отличия от Shape и Html
- Анимация произвольных значений
- Callback функции при обновлении
- Интеграция с внешними объектами
Curve - кривые изменения значений
- Концепция кривых в mo.js
- Синтаксис описания кривых
- Множественные ключевые точки
- Easing для участков кривой
- Применение к различным свойствам
- Сложные траектории движения
Stagger - каскадные анимации
- Принцип работы stagger
- Функции распределения
- Rand - случайное распределение
- Stagger для delay
- Stagger для других параметров
Callbacks - обработчики событий
- onStart
- onComplete
- onUpdate
- onRepeatStart
- onRepeatComplete
- onProgress
- Передача параметров в callbacks
- Контекст выполнения функций
Методы управления
- play() - запуск анимации
- pause() - пауза
- stop() - остановка
- replay() - перезапуск
- rerun() - повторный запуск
- setProgress() - установка позиции
- setSpeed() - изменение скорости
Продвинутые техники
- Анимация по пути
- Морфинг фигур
- Синхронизация множества объектов
- Динамическое создание анимаций
- Переключение между состояниями
- Адаптивные анимации
- Анимация на основе скролла
- Интерактивные анимации по событиям
Производительность
- Понимание rendering pipeline
- Аппаратное ускорение
- Оптимизация количества объектов
- Переиспользование анимаций
- Управление памятью
- Профилирование анимаций
- Throttling и debouncing
- Отключение анимаций на слабых устройствах
Интеграция с фреймворками
- Vanilla JavaScript
- React компоненты
- Vue.js директивы
- Angular сервисы
- Управление жизненным циклом
- Уничтожение анимаций
- Реактивность и обновление параметров
Паттерны и архитектура
- Организация кода анимаций
- Фабрики анимаций
- Переиспользуемые компоненты
- Конфигурационные объекты
- Композиция сложных эффектов
- Управление состоянием
- Модульная структура проекта
Отладка и тестирование
- Инструменты разработчика
- Визуальная отладка
- Логирование событий
- Поиск проблем производительности
- Тестирование анимаций
- Воспроизводимость поведения
Расширение функциональности
- Custom shapes
- Плагины для mo.js
- Интеграция сторонних библиотек
- Создание собственных модулей
- Расширение базовых классов
Миграция и обновления
- Изменения между версиями
- Устаревшие API
- Обратная совместимость
- Рефакторинг существующего кода