[Udemy] Интерактивная веб-анимация: JavaScript, SVG, CSS & НТМL [Александр Тюрин]

[ОНО]

Ссылка на картинку

Субтитры: Русский (авторские), Английский
Язык: Английский

Чему вы научитесь

• 1. История веб-анимации
• 2. CSS-анимация [свойства CSS-анимации, правило ключевых кадров, переходы]
• 3. Анимация SVG [элементы, атрибуты и свойства SVG, которые можно анимировать] ...... JS !!! -> ВНУТРИ
• 4. Интерактивная анимация JavaScript [методы анимации JavaScript, функции конструкторов, API веб-анимации]
• 5. В этом курсе представлены 20 анимационных проектов, иллюстрирующих теорию интерактивной веб-анимации. Все они доступны для скачивания, изучения и обновления.

Описание

Интерактивная веб-анимация [JavaScript, SVG, CSS и HTML]

Полная спецификация веб-анимации на уровне языков разметки CSS и SVG и языка программирования JavaScript.

По окончании этого курса вы получите доступ к полному стеку технологий веб-анимации.

ПРОГРАММА:

1. История веб-анимации

2. CSS-анимация

- Свойства анимации CSS

- Правило ключевого кадра CSS

- Переходы CSS

3. SVG-анимация

- Элементы анимации SVG

- Атрибут для идентификации целевого элемента для анимации

- Атрибуты для управления временем анимации

- Атрибуты, определяющие значения анимации с течением времени

- Атрибуты, управляющие добавлением анимации

- Элементы, атрибуты и свойства SVG, которые можно анимировать, а также мы изучим событие времени интерфейса

- Интерактивные функции в SVG

4. Анимация JavaScript

- метод getElementById ()

- Метод планирования звонков setinterval ()

- метод addEventListener ()

- методы getAttribute и setAttribute

- Как проникнуть в сложные SVG-атрибуты элементов с помощью регулярных выражений

- 3d positioning

- Функции конструкторов

- Создание примитивов SVG

- Создание массивов объектов, управление их свойствами

- Возможности веб-анимации с использованием масок и пути клипа

- API веб-анимации

- Сочетание анимационных приемов

Все практические примеры анимации из этого курса доступны для скачивания и экспериментирования.

Для кого этот курс:

• Этот курс для тех, кто хочет освоить интерактивную веб-анимацию.
• Этот курс необходим тем, кто хочет оживить свой сайт и использовать незабываемый дизайн UX / UI!

Материалы курса

Спойлер: Материалы курса

• История веб-анимации .
  
  Нам нужно понять, в каком порядке появились инструменты веб-анимации.
  
  Какие из них устарели, а какие являются передовыми исследованиями!
  
  Предпросмотр12:22

• 
  
  
  • Свойства анимации CSS [часть1] и правило @keyframes.
    animation-name [указывает имя анимации @keyframes],
    
    @keyframes [указывает код анимации],
    
    animation-duration [указывает, сколько времени должно занять анимация для завершения одного цикла],
    
    animation-iteration-count [указывает, сколько раз должна воспроизводиться анимация],
    
    animation-delay [задает задержку для начала анимации].
    
    10:29
  • Свойства анимации CSS [часть 2]
    animation-direction [указывает, должна ли анимация воспроизводиться вперед, назад или в альтернативных циклах],
    
    animation-fill-mode [задает стиль для элемента, когда анимация не воспроизводится (до ее начала, после ее окончания или и то, и другое)],
    
    анимация-тайминг-функция [указывает кривую скорости анимации],
    
    animation-play-state [указывает, запущена ли анимация или приостановлена],
    
    animation [сокращенное свойство для установки всех свойств анимации].
    
    14:03
  • CSS переходы
    свойство-перехода [указывает имя свойства CSS, для которого предназначен эффект перехода],
    
    transition-duration [указывает, сколько времени требуется переходу для завершения одного цикла],
    
    transition-delay [задает задержку для начала перехода],
    
    переходная-временная-функция [определяет кривую скорости перехода],
    
    переход [сокращенное свойство для установки всех переходов].
    
    06:40
  • Подведение итогов главы «CSS-анимация»
    Сравните свойства анимации CSS и переходы CSS.
    
    Преимущества и недостатки CSS-анимации.
    
    Производительность CSS-анимации.
    
    09:06
• Элементы анимации SVG
  анимированный
  
  animateMotion,
  
  animateTransform,
  
  отбросить
  
  установлен
  
  09:36
• Атрибут для идентификации целевого элемента для анимации и атрибуты для управления
  Атрибут для идентификации целевого элемента анимации [href = «URL»].
  
  Атрибуты для управления временем анимации [begin, dur, min, max, restart, repeatcont, repeatdur, fill].
  
  04:48
• Атрибуты, определяющие значения анимации с течением времени, и атрибуты, управляющие
  Атрибуты, которые определяют значения анимации во времени [от, до, по, keyTimes, keySplines, calcMode, значения].
  
  & Атрибуты, управляющие добавлением анимации [добавлением и накоплением].
  
  10:07
• Элементы, атрибуты, свойства и типы данных SVG, которые можно анимировать.
  Элементы SVG, которые можно анимировать с помощью <animateMotion>
  
  Типы данных, используемые в атрибутах и свойствах SVG-анимации.
  
  07:55
• Возможности интерактивности в SVG
  События указывающего устройства, с помощью которых вы можете запускать или останавливать SVG-анимацию.
  
  04:44

• 
  
  
  • Введение в главу "Анимация JavaScript".
    Самые простые примеры анимации.
    
    getElementById, с помощью которого мы можем выбрать необходимые элементы для дальнейшего использования в анимации,
    
    метод планирования звонков setInterval,
    
    addEventListener, с помощью которого вы можете регистрировать определенные обработчики событий.
    
    11:57
  • getAttribute и setAttribute методы. Интерактивное управление. Регулярные выражения
    Мы рассмотрим методы getAttribute и setAttribute, которые помогут вам получить доступ к атрибутам выбранных элементов, а также добавить и изменить атрибуты. В то же время я покажу возможности более сложного интерактивного управления анимацией при перемещении курсора мыши, а также продемонстрирую, как проникнуть в сложные атрибуты SVG элементов с помощью регулярных выражений.
    
    14:02
  • 3d Positioning
    В этом уроке мы возьмем трехмерный куб, который был построен во втором уроке главы 2 с использованием свойств CSS, и настроим его расположение с помощью инструментов и методов java-скриптов. Будем привязываться к клавишам, а также к курсору мыши. В конце урока я объясню принципы исходного CSS-позиционирования его граней.
    
    12:48
  • Функции конструкторов
    Создавайте примитивы SVG. Мы будем создавать массивы объектов, размещать их в интерактивном режиме, менять цвета и размеры.
    
    И я покажу вам невероятные вещи!
    
    19:54
  • Возможности веб-анимации с использованием масок и пути клипа
    Мы будем работать с такими элементами SVG, как маска и путь обрезки. В первом примере за основу будет взято растровое изображение, интегрированное в контейнер SVG. Во втором примере мы будем работать напрямую с SVG, а третий пример продемонстрирует видеоконтент, помещенный в контейнер SVG.
    
    16:45
  • API веб-анимации и метод requestAnimationFrame
    Мы будем использовать сразу несколько видов анимации. Вращение 3D происходит с использованием технологии API веб-анимации. Анимация штрих-дашаррей выполняется с использованием SVG-анимации. Наконец, вторая анимация штрих-штрих-кода выполняется с помощью метода requestAnimationFrame.
    
    13:24

Читать далее...