Ключевые кадры и поочерёдная анимация
Создавайте сложные анимации с поочерёдным запуском
«Ключевые кадры и поочерёдная анимация» — бесплатный урок Angular Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Многоэтапные анимации
Простые переходы выполняются из состояния A в состояние B. Для многоэтапного движения (прыжка, пульсации, плавной смены цвета) Angular предоставляет ключевые кадры, а для последовательной анимации множества элементов — поэтапный запуск.
Функция ключевых кадров
keyframes принимает массив этапов style, каждый из которых содержит offset от 0 до 1, обозначающий его положение в течение анимации.
animate('1s', keyframes([
style({ opacity: 0, offset: 0 }),
style({ opacity: 0.5, offset: 0.3 }),
style({ opacity: 1, offset: 1 })
]))Понимание смещения
offset — это доля общей длительности. 0 обозначает начало, а 1 — конец. Значения смещения в массиве должны возрастать.
Эффект прыжка
Ключевые кадры позволяют создать перелёт за целевое положение и последующее возвращение, имитируя прыжок.
keyframes([
style({ transform: 'translateY(0)', offset: 0 }),
style({ transform: 'translateY(-20px)', offset: 0.5 }),
style({ transform: 'translateY(0)', offset: 1 })
])Пропуск смещений
Если не указывать offset, Angular равномерно распределит ключевые кадры по длительности анимации.
keyframes([
style({ opacity: 0 }),
style({ opacity: 1 })
])Функция выборки
Чтобы анимировать дочерние элементы хост-элемента, используйте query для их выбора внутри перехода.
transition('* => *', [
query(':enter', [
style({ opacity: 0 })
])
])Функция поэтапного запуска
stagger добавляет временной сдвиг между анимациями выбранных элементов, создавая каскадный эффект.
query(':enter', [
style({ opacity: 0 }),
stagger(100, [
animate('300ms', style({ opacity: 1 }))
])
])Поэтапная анимация списка
Объедините query и stagger в триггере контейнера списка, чтобы элементы появлялись один за другим.
trigger('listAnim', [
transition('* => *', [
query(':enter', [
style({ opacity: 0 }),
stagger(80, animate('250ms', style({ opacity: 1 })))
], { optional: true })
])
])Необязательный флаг
Передайте { optional: true } в query, чтобы при отсутствии подходящих элементов анимация не завершалась ошибкой.
Отрицательный сдвиг
Отрицательное значение в stagger меняет порядок на обратный: последние элементы анимируются первыми. Это удобно для каскадного исчезновения.
stagger(-50, animate('200ms', style({ opacity: 0 })))Замечание о производительности
Поэтапная анимация множества элементов может быть ресурсоёмкой. Делайте длительность анимации каждого элемента небольшой и отдавайте предпочтение transform и opacity, чтобы задействовать GPU.
Быстрая проверка
Проверьте, насколько хорошо Вы поняли ключевые кадры и поэтапную анимацию.
Повторение
Вы узнали, что keyframes задаёт многоэтапное движение с помощью значений offset, а query и stagger анимируют множество элементов каскадом. Для безопасности используйте { optional: true } и отдавайте предпочтение свойствам, эффективно работающим с GPU.
Часто задаваемые вопросы
Урок «Ключевые кадры и поочерёдная анимация» бесплатный?
Да — полный текст урока «Ключевые кадры и поочерёдная анимация» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Ключевые кадры и поочерёдная анимация»?
Создавайте сложные анимации с поочерёдным запуском Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Ключевые кадры и поочерёдная анимация»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Основы анимаций: trigger и state
- Переходы и синхронизация
- Анимации появления и исчезновения
- Ключевые кадры и поочерёдная анимация