udemy
Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.
Введение в JavaScript-анимацию с помощью Anime.js
Introduction to JavaScript Animation with Anime.js
★4.1 (всего оценок - 6)
Продолжительность
1 ч 26 мин
Категория
JavaScriptКоличество уроков
21 Видео
Дата добавления
7 мар. 2020 г., 17:14
Язык
Английский
Дата выхода
20 сент. 2018 г., 19:08
Дата обновления
29 апр. 2026 г., 06:54
Этот курс поможет вам быстро и уверенно освоить основы создания веб-анимаций с помощью Anime.js — одного из самых популярных и гибких JavaScript-библиотек для анимирования элементов в браузере. Вы узнаете, как превращать статичные интерфейсы в динамичные и выразительные, создавая анимации, которые улучшают пользовательский опыт.
Что вы изучите в этом курсе
Курс выстроен так, чтобы шаг за шагом провести вас от самых базовых примеров до создания законченных анимационных мини-проектов. В процессе вы разберетесь, как работает Anime.js, и научитесь использовать его ключевые возможности.
Основы анимации на JavaScript
Перед тем как перейти к Anime.js, вы создадите простую анимацию на чистом JavaScript. Это поможет понять фундаментальные принципы, которые лежат в основе всех веб-анимаций.
Изучение ключевых API Anime.js
Вы подробно изучите функциональность Anime.js, включая:
- Целевые элементы: способы выбора DOM-элементов для анимации;
- Свойства и ключевые кадры: какие параметры можно анимировать и как это делать правильно;
- Таймлайны: создание сложных последовательных анимаций;
- Функции ускорения: контроль плавности и динамики движения;
- События и колбэки: выполнение действий в нужные моменты анимации.
Практические проекты курса
Теория закрепляется созданием двух практических анимационных мини-проектов.
Анимация загрузочного счетчика
Вы разработаете динамичный и стильный загрузочный индикатор, который станет отличным примером практического применения Anime.js в интерфейсах.
Микро-взаимодействие для формы входа
Вы создадите анимацию для улучшения UX формы логина — плавные переходы и визуальные отклики помогут сформировать представление о том, как анимация делает интерфейсы более «живыми» и понятными.
Кому будет полезен этот курс
Курс ориентирован на тех, кто хочет научиться создавать современные веб-анимации. Однако если вы новичок в JavaScript или CSS, рекомендуется сначала освоить основы, поскольку здесь внимание сосредоточено именно на работе с Anime.js и принципах анимационного дизайна.
Чего вы достигнете после обучения
Завершив курс, вы сможете уверенно использовать Anime.js для создания выразительных интерактивных эффектов, улучшая визуальную привлекательность и юзабилити веб-интерфейсов.
- Урок 1.00:01:12Course Outline
- Урок 2.00:01:09Plain JavaScript Animation
- Урок 3.00:02:02JavaScript Animation with RAF
- Урок 4.00:03:56Introducing Anime.js
- Урок 5.00:04:43Targets
- Урок 6.00:04:19Units and Values
- Урок 7.00:02:17Objects as Value
- Урок 8.00:04:35Functions as Value
- Урок 9.00:07:27Easing Curves
- Урок 10.00:04:17Animating CSS Transforms
- Урок 11.00:01:57Animating Other CSS Properties
- Урок 12.00:02:33Animating Color Values
- Урок 13.00:06:27Animating SVG Properties
- Урок 14.00:01:57Animating DOM Attributes
- Урок 15.00:03:53Animation Parameters
- Урок 16.00:05:01Animation Callbacks
- Урок 17.00:03:02Animation Playback Controls
- Урок 18.00:02:56Anime Keyframes
- Урок 19.00:06:18Anime Timelines
- Урок 20.00:02:52Create a nice loading spinner
- Урок 21.00:13:34Create a Login Form Micro-interaction
Автор - udemy
Комментарии