Учебник Vivus (SVG)

Введение в Vivus
- Что такое Vivus и для чего он нужен
- История создания и развитие библиотеки
- Основные возможности и ограничения
- Сравнение с альтернативными решениями
- Установка и подключение к проекту
Основы работы с SVG
- Структура SVG-документа
- Элементы path и их атрибуты
- Понятие stroke и fill
- Координатная система и viewBox
- Оптимизация SVG для анимации
Первые шаги с Vivus
- Инициализация библиотеки
- Базовый синтаксис и параметры
- Создание простейшей анимации
- Работа с селекторами элементов
- Отладка и проверка корректности работы
Типы анимации
- Режим delayed
- Режим sync
- Режим oneByOne
- Режим script
- Выбор подходящего типа для задачи
Параметры конфигурации
- Duration и timing
- Start и pathTimingFunction
- AnimTimingFunction
- Reverse и forceRender
- SelfDestroy и файл опций
Управление скоростью и таймингом
- Линейная анимация
- Ease-функции
- Кастомные функции времени
- Синхронизация нескольких элементов
- Паузы и задержки между элементами
Методы объекта Vivus
- play и stop
- reset и finish
- setFrameProgress
- getStatus
- destroy
События и колбэки
- Отслеживание начала анимации
- Отслеживание завершения
- Промежуточные события
- Использование колбэков для цепочек
- Интеграция с пользовательским кодом
Работа с path-элементами
- Определение порядка отрисовки
- Атрибут data-duration
- Атрибут data-delay
- Группировка элементов
- Исключение элементов из анимации
Продвинутые техники анимации
- Создание эффекта рукописного текста
- Анимация логотипов
- Морфинг и трансформации
- Циклические анимации
- Комбинирование с CSS-анимацией
Динамическое создание анимаций
- Генерация SVG на лету
- Программное изменение параметров
- Реакция на действия пользователя
- Адаптивные анимации
- Загрузка SVG через Ajax
Оптимизация производительности
- Минимизация количества точек в path
- Использование CSS вместо inline-стилей
- Управление памятью
- Профилирование анимаций
- Работа с большими SVG-файлами
Кроссбраузерная совместимость
- Поддержка современных браузеров
- Полифиллы для старых версий
- Особенности работы в Safari
- Проблемы в Internet Explorer
- Тестирование на мобильных устройствах
Интеграция с фреймворками
- Использование в React
- Использование в Vue
- Использование в Angular
- Использование в Svelte
- Vanilla JavaScript подход
Сборка и препроцессинг
- Настройка Webpack
- Настройка Rollup
- Использование с npm
- Минификация и бандлинг
- Tree shaking
Создание интерактивных элементов
- Запуск анимации при скролле
- Hover-эффекты
- Click-триггеры
- Прогресс-бары
- Индикаторы загрузки
Работа с текстом в SVG
- Конвертация шрифтов в path
- Анимация букв и слов
- Многострочный текст
- Адаптация под разные языки
- Выравнивание и позиционирование
Цвет и обводка
- Анимация изменения цвета
- Толщина обводки
- Пунктирные линии
- Градиенты
- Прозрачность
Accessibility и SEO
- Семантическая разметка SVG
- ARIA-атрибуты
- Title и description
- Альтернативный контент
Отладка и решение проблем
- Типичные ошибки инициализации
- Проблемы с путями
- Конфликты с другими библиотеками
- Использование DevTools
- Логирование и диагностика
Справочник API
- Полный список параметров конструктора
- Описание всех методов
- Таблица событий
- Возвращаемые значения
- Типы данных