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

Нам нужно понять, в каком порядке появились инструменты веб-анимации.

Какие из них устарели, а какие являются передовыми исследованиями!

• Свойства анимации 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

animateMotion,

animateTransform,

отбросить

установлен

Атрибуты для управления временем анимации [begin, dur, min, max, restart, repeatcont, repeatdur, fill].

& Атрибуты, управляющие добавлением анимации [добавлением и накоплением].

• Введение в главу «Анимация 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