Программирование [HTML Academy] Анимация для фронтендеров (2020) Автор темы

Премиум
Активный участник
Регистрация
23 Мар 2020
Сообщения
222
Реакции
3.091
Монетки
1038
    Голосов: 0
    0.0 5 0 0 https://s3.sharewood.xyz/threads/html-academy-%D0%90%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D1%8F-%D0%B4%D0%BB%D1%8F-%D1%84%D1%80%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D0%B4%D0%B5%D1%80%D0%BE%D0%B2-2020-%D0%90%D0%B2%D1%82%D0%BE%D1%80-%D1%82%D0%B5%D0%BC%D1%8B.101769/
  • #1
Автор: HTML Academy
Название: Анимация для фронтендеров (2020) Автор темы

1-jpg.82899



Описание:

Анимация для фронтендеров — новый курс HTML Academy. В программе: линейная и покадровая анимация, анимация CSS и SVG, Canvas, WebGL и шейдеры, 3D в браузере и будущее анимации в браузере. Курс проходит в асинхронном формате, записаться на него можно в любой момент и заниматься в удобном темпе под присмотром наставника

Программа курса

Раздел 1
Основы анимации, линейные анимации
Мы разберёмся, что такое анимация, почему человек видит движения на экране, какие бывают виды анимации и как благодаря анимации повысить качество UX. Разберем основные идеи Material Design. Также рассмотрим самый простой вид линейных анимаций и их временные функции.
  • Линейные анимации.
  • Покадровая анимация.
  • transition.
  • Кривые Безье.

Раздел 2
CSS-анимация
Продолжим изучать линейные анимации и изучим группу свойств animation в CSS. Также мы рассмотрим, как запустить анимацию на основе событий в JavaScript. Научимся отлаживать анимации и профилировать производительность, чтобы увеличить их скорость и скорость перерисовки страницы в целом.
  • Animation.
  • @KEY-Frame.
  • Intersection Observer API.

Раздел 3
SVG-анимация
В этой части мы погрузимся в изучение SVG. Рассмотрим, как анимировать отрисовку кривых. Заставим двигаться один SVG-объект по граням другого объекта и научимся создавать цепочки анимаций с помощью тега animate.
  • SVG Path.
  • stroke-dasharray.
  • Тег animate.

Раздел 4
Покадровые анимации. Canvas
Начиная с этой части курса мы изучим покадровые анимации — это более низкоуровневый вид анимации. Научимся анимировать изображения на canvas, добьемся эффективной работы анимации и в итоге получим заветные 60 кадров в секунду.
  • Покадровая анимация.
  • canvas.
  • window.requestAnimationFrame.
  • Math.sin(), Math.cos().

Раздел 5
WebGL. Шейдеры
В этом разделе научимся создавать необычные и сложные анимационные эффекты. Поймём отличия вычислений на CPU и GPU, а также научимся писать специальные микропрограммы для GPU — шейдеры.
  • WebGL.
  • OpenGL.
  • GLSL.

Раздел 6
3D в браузере
Наконец-то изучим основы 3D-моделирования и рассмотрим разные библиотеки для реализации 3D в браузере. Создадим сцену, свет для неё, добавим 3D модель с текстурами и элементы управления.

Раздел 7
Будущее анимации в браузере
Раздел посвящён Web Animation API, который расширяет возможности линейных анимаций благодаря JavaScript, но пока является экспериментальным. Ещё в разделе разберемся с Houdini API, благодаря которому можно получить низкоуровневый доступ к движку CSS.

Подробнее:
Для просмотра содержимого вам необходимо авторизоваться.

Скачать:
Скрытое содержимое могут видеть только члены группы Премиум.
 
Сверху Снизу