Главная страницаКатегория javascriptВведение в JavaScript-анимацию с помощью Anime.js

Введение в JavaScript-анимацию с помощью Anime.js

Name: Введение в JavaScript-анимацию с помощью Anime.js
Rating: 4.1 (6 reviews)

Introduction to JavaScript Animation with Anime.js

udemy

★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:12
Course Outline
Урок 2.00:01:09
Plain JavaScript Animation
Урок 3.00:02:02
JavaScript Animation with RAF
Урок 4.00:03:56
Introducing Anime.js
Урок 5.00:04:43
Targets
Урок 6.00:04:19
Units and Values
Урок 7.00:02:17
Objects as Value
Урок 8.00:04:35
Functions as Value
Урок 9.00:07:27
Easing Curves
Урок 10.00:04:17
Animating CSS Transforms
Урок 11.00:01:57
Animating Other CSS Properties
Урок 12.00:02:33
Animating Color Values
Урок 13.00:06:27
Animating SVG Properties
Урок 14.00:01:57
Animating DOM Attributes
Урок 15.00:03:53
Animation Parameters
Урок 16.00:05:01
Animation Callbacks
Урок 17.00:03:02
Animation Playback Controls
Урок 18.00:02:56
Anime Keyframes
Урок 19.00:06:18
Anime Timelines
Урок 20.00:02:52
Create a nice loading spinner
Урок 21.00:13:34
Create a Login Form Micro-interaction

Автор - udemy

udemy

Udemy — одна из самых масштабных платформ в мире, предлагающая обучающий контент от авторов и экспертов со всего света. Сервис объединяет миллионы учеников и десятки тысяч преподавателей, создающих курсы на самые разнообразные темы.Основные возможности платформыШирокий выбор тем: от программирования и дизайна до маркетинга, психологии и личной эффективности.Глобальное сообщество авторов: материалы создаются специалистами из разных стран.Удобный ф

+198

Комментарии