Gary Oldman
VIP складчик
- Регистрация
- 6 Сен 2014
- Сообщения
- 34.344
- Реакции
- 201.482
Автор: HTML Academy
Название: Анимация для фронтендеров (2020) Автор темы
Описание:
Анимация для фронтендеров — новый курс HTML Academy. В программе: линейная и покадровая анимация, анимация CSS и SVG, Canvas, WebGL и шейдеры, 3D в браузере и будущее анимации в браузере. Курс проходит в асинхронном формате, записаться на него можно в любой момент и заниматься в удобном темпе под присмотром наставника
Программа курса
Раздел 1
Основы анимации, линейные анимации
Мы разберёмся, что такое анимация, почему человек видит движения на экране, какие бывают виды анимации и как благодаря анимации повысить качество UX. Разберем основные идеи Material Design. Также рассмотрим самый простой вид линейных анимаций и их временные функции.
CSS-анимация
Продолжим изучать линейные анимации и изучим группу свойств animation в CSS. Также мы рассмотрим, как запустить анимацию на основе событий в JavaScript. Научимся отлаживать анимации и профилировать производительность, чтобы увеличить их скорость и скорость перерисовки страницы в целом.
SVG-анимация
В этой части мы погрузимся в изучение SVG. Рассмотрим, как анимировать отрисовку кривых. Заставим двигаться один SVG-объект по граням другого объекта и научимся создавать цепочки анимаций с помощью тега animate.
Покадровые анимации. Canvas
Начиная с этой части курса мы изучим покадровые анимации — это более низкоуровневый вид анимации. Научимся анимировать изображения на canvas, добьемся эффективной работы анимации и в итоге получим заветные 60 кадров в секунду.
WebGL. Шейдеры
В этом разделе научимся создавать необычные и сложные анимационные эффекты. Поймём отличия вычислений на CPU и GPU, а также научимся писать специальные микропрограммы для GPU — шейдеры.
3D в браузере
Наконец-то изучим основы 3D-моделирования и рассмотрим разные библиотеки для реализации 3D в браузере. Создадим сцену, свет для неё, добавим 3D модель с текстурами и элементы управления.
Раздел 7
Будущее анимации в браузере
Раздел посвящён Web Animation API, который расширяет возможности линейных анимаций благодаря JavaScript, но пока является экспериментальным. Ещё в разделе разберемся с Houdini API, благодаря которому можно получить низкоуровневый доступ к движку CSS.
Подробнее:
Скачать:
Название: Анимация для фронтендеров (2020) Автор темы
Описание:
Анимация для фронтендеров — новый курс HTML Academy. В программе: линейная и покадровая анимация, анимация CSS и SVG, Canvas, WebGL и шейдеры, 3D в браузере и будущее анимации в браузере. Курс проходит в асинхронном формате, записаться на него можно в любой момент и заниматься в удобном темпе под присмотром наставника
Программа курса
Раздел 1
Основы анимации, линейные анимации
Мы разберёмся, что такое анимация, почему человек видит движения на экране, какие бывают виды анимации и как благодаря анимации повысить качество UX. Разберем основные идеи Material Design. Также рассмотрим самый простой вид линейных анимаций и их временные функции.
- Линейные анимации.
- Покадровая анимация.
- transition.
- Кривые Безье.
CSS-анимация
Продолжим изучать линейные анимации и изучим группу свойств animation в CSS. Также мы рассмотрим, как запустить анимацию на основе событий в JavaScript. Научимся отлаживать анимации и профилировать производительность, чтобы увеличить их скорость и скорость перерисовки страницы в целом.
- Animation.
-
Вам необходимо зарегистрироваться для просмотра скрытого контента-Frame.
- Intersection Observer API.
SVG-анимация
В этой части мы погрузимся в изучение SVG. Рассмотрим, как анимировать отрисовку кривых. Заставим двигаться один SVG-объект по граням другого объекта и научимся создавать цепочки анимаций с помощью тега animate.
- SVG Path.
- stroke-dasharray.
- Тег animate.
Покадровые анимации. Canvas
Начиная с этой части курса мы изучим покадровые анимации — это более низкоуровневый вид анимации. Научимся анимировать изображения на canvas, добьемся эффективной работы анимации и в итоге получим заветные 60 кадров в секунду.
- Покадровая анимация.
- canvas.
- window.requestAnimationFrame.
- Math.sin(), Math.cos().
WebGL. Шейдеры
В этом разделе научимся создавать необычные и сложные анимационные эффекты. Поймём отличия вычислений на CPU и GPU, а также научимся писать специальные микропрограммы для GPU — шейдеры.
- WebGL.
- OpenGL.
- GLSL.
3D в браузере
Наконец-то изучим основы 3D-моделирования и рассмотрим разные библиотеки для реализации 3D в браузере. Создадим сцену, свет для неё, добавим 3D модель с текстурами и элементы управления.
Раздел 7
Будущее анимации в браузере
Раздел посвящён Web Animation API, который расширяет возможности линейных анимаций благодаря JavaScript, но пока является экспериментальным. Ещё в разделе разберемся с Houdini API, благодаря которому можно получить низкоуровневый доступ к движку CSS.
Подробнее:
Для просмотра скрытого содержимого вы должны зарегистрироваться
Скачать:
Для просмотра скрытого содержимого вы должны зарегистрироваться
Возможно, Вас ещё заинтересует:
- [Вадим Сайфутдинов, Анатолий Сотников] Chat GPT и 1С. Обмен между Chat GPT и 1С через API (2024)
- [Вадим Прокопчук] [Udemy] Верстка сайта c использованием Gulp в модульном Bento стиле (2024)
- [Alex Erofeev] [Stepik] Python в нескучных примерах (2023)
- [Николай Миронов] [wpmoscow] Профессиональная разработка многостраничных сайтов (2024)
- [Тимур Машнин] Язык программирования MQL5: Продвинутое использование.. (2 изд.) (2019)
- [Денис Матвеенко] Docker. Подписка на 3 месяца (2024)
- [Н. Честнов и др.] Python и ИИ-технологии с нуля за 4 месяца, 12 проектов с помощью ChatGPT (2024)
- [Udemy] Frank Anemaet ― Набор инструментов для хакеров (2024)