Доступно

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

Тема в разделе "Курсы по программированию", создана пользователем Bertrax, 7 окт 2020.

Цена: 1490р.
Взнос: 258р.-82%
95%

Основной список: 17 участников

Статус обсуждения:
Комментирование ограничено.
  1. 7 окт 2020
    #1
    Bertrax
    Bertrax ЧКЧлен клуба
    Интерактивная веб-анимация [JavaScript, SVG, CSS и HTML]
    Полный учебный курс по веб-анимации 2020 [Анимация CSS -> Анимация SVG -> Интерактивная анимация JavaScript]
    Автор: Александр Тюрин


    Снимок экрана 2020-10-07 в 12.55.38.png

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


    Чему вы научитесь
    • 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 веб-анимации

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

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

    Материалы курса
    • История веб-анимации .

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

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

      Предпросмотр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

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


    Скрытая ссылка
     
  2. Последние события

    1. Dmitriy404
      Dmitriy404 оставил отзыв "Хорошо".
      20 окт 2020
    2. skladchik.com
      Складчина доступна.
      18 окт 2020
    3. skladchik.com
      Взнос составляет 129р.
      18 окт 2020
    4. skladchik.com
      Складчина активна.
      18 окт 2020

    Последние важные события

    1. skladchik.com
      Складчина доступна.
      18 окт 2020
    2. skladchik.com
      Взнос составляет 129р.
      18 окт 2020
    3. skladchik.com
      Складчина активна.
      18 окт 2020
    4. skladchik.com
      Сбор взносов начинается 18.10.2020.
      16 окт 2020
  3. Отзывы участников

    4/5,
    • 4/5,
      Работой организатора доволен
      Бегло ознакомился с материалом, в принципе материала достаточно много, качество кода автора пока оценивать не могу, так же как и актуальность изложенной информации т.к. я не так давно начал изучение вебдев`а, но информация для меня вся полезная, слушать не скучно, и даже забавно (именно за это 4 звезды а не 5) ! Сейчас поясню! Курс идет на английском языке, но есть субтитры, и я как человек плохо знающий английский, читаю субтитры и пытаюсь смотреть что показывают, по этому не скучно! А забавно по тому что автор плохо владеет разговорным английским и слушать такую речь достаточно странно и забавно одновременно, т.к. по имени и по акценту, понятно сразу, что автор русскоязычный человек! Когда буду компетентен оценивать качество самого материала, а не подачи, я обязательно напишу еще один отзыв!
      20 окт 2020
      1 человеку нравится это.
Статус обсуждения:
Комментирование ограничено.

Поделиться этой страницей