Xrust.ru
Жизнь в стиле Хай-тек.
» » Анимация для фронтендеров (2020)
Обучение


Анимация для фронтендеров (2020)

09 октябрь 2020, Пятница
186
0
Анимация для фронтендеров (2020)

На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить. В программе: линейная и покадровая анимация, анимация CSS и SVG, Canvas, WebGL и шейдеры, 3D в браузере и будущее анимации в браузере.

Курс проходит в асинхронном формате, записаться на него можно в любой момент и заниматься в удобном темпе под присмотром наставника.

Курс рассчитан на опытных разработчиков, желающих поднять свои навыки. Для его освоения нужны навыки вёрстки и программирования на javascript. Курс подойдёт и для новичков, которые успешно прошли курсы «HTML и CSS. Адаптивная вёрстка и автоматизация» и «javascript. Профессиональная разработка веб-интерфейсов».

В курсе мы используем самые эффективные для обучения профессионалов форматы: тексты, тренажёры, скринкасты и демонстрации. Мы не злоупотребляем видео и используем его только там, где оно необходимо.

Что вас ждёт на обучении:
1. Структурированная теория
В каждом разделе вы изучаете теорию и методику решения практических задач: из учебника, подобранных нами материалов и демонстраций кода на примере учебного проекта.
2. Практика
После изучения теории и методики выполняете домашние задания, в которых работаете над своим проектом и закрепляете учебный материал.
3. Ревью кода и консультации
После каждого задания наставник проверяет качество работы и даёт обратную связь. А если остались вопросы, можно записаться на консультацию — наставник поделится опытом и расскажет, как можно сделать ещё лучше.

Программа курса:
Раздел 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. Покадровая анимация. javascript и Canvas
Начиная с этой части курса мы изучим покадровые анимации — это более низкоуровневый вид анимации. Научимся анимировать изображения на canvas, добьемся эффективной работы анимации и в итоге получим заветные 60 кадров в секунду.
- Покадровая анимация.
- canvas.
- window.requestAnimationFrame.
- Math.sin(), Math.cos().

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

Раздел 6. Three.js часть 1: 3D в браузере
В этой главе мы снова поговорим о системах координат, точках и векторах. Изучим матрицы трансформаций 3D, кватернионы и углы Эйлера, перемножение матриц.
Рассмотрим 2 варианта создания моделей с интерфейсом управления пользователем:
- Прямое задание параметров: скорости или ускорения (перемещения или вращения).
- Задание цели — значения, к которому нужно постепенно приближаться: элемент притягивается к курсору.
- Изучим цикл работы движка, методы invalidate(), update() и render(), особенности работы с плавающим FPS. Узнаем, как вести расчёты внутри update().
В практической части начнём работать с библиотекой Three.js. Изучим:
- Способы описания объектов: положение, геометрия и материалы.
- Геометрию: параметрические встроенные, произвольные загружаемые. Буфер геометрии.
- Какие есть материалы, виды материалов, режимы отрисовки, кастомные материалы.
- Флаги для update.
- Цикл render.
- Анимации положения. Метод анимации Morph.
- Сцена + камера. Добавление объектов на сцену. Группировка.
- Свет. Виды источников света. Материал Matcap.

Раздел 7. Three.js часть 2: Работа с камерой
В этой части мы рассмотрим, что такое камера в WebGL, и в частности в Three.JS:
- Управление камерой.
- Базовые движения камеры.
- Риги камер.
- Разные конструкции ригов для разных видов управления.
В практической части:
- Увидим, какие бывают виды камер в Three.JS, параметры камеры, ресайз при переходе к мобильной версии.
- Изучим подходы к анимации камеры. Разберёмся с реакцией на действия пользователя — плавное изменение ракурса. Управление с помощью рига: цикл рендера рига камеры. Создание анимации пролёта.
- Риги камер.
- Рассмотрим переключение между камерами — монтаж. Правила монтажа.

Раздел 8. Будущее анимации в браузере
В завершающей части курса мы рассмотрим те API, которые ещё не готовы для использования в продакшен, но их уже сейчас стоит для начать изучать, чтобы в будущем повысить эффективность своей работы.
- Увидим, чем отличается Web Animation API от обычной CSS анимации и какие дополнительные возможности даёт.
- Изучим основы Houdini API.
- Поговорим о библиотеках, которые помогут упростить работу с анимациями, таймлайнами, SVG, canvas, WebGL.
- Рассмотрим программы для работы с анимацией и графикой для web: Google Web Designer, Adobe Animate, Adobe After Effects, программы 3d графики: Cinema 4d, Blender.
- Сделаем небольшой обзор подходов к созданию динамически генерируемой анимации и графики. Рассмотрим, какие инструменты можно использовать для построения кроссплатформенного ПО с 3d.
- Поговорим о том, как можно дальше развиваться в создании анимации.

Анимация для фронтендеров (2020)Анимация для фронтендеров (2020)Анимация для фронтендеров (2020)
Анимация для фронтендеров (2020)Анимация для фронтендеров (2020)Анимация для фронтендеров (2020)
Анимация для фронтендеров (2020)Анимация для фронтендеров (2020)Анимация для фронтендеров (2020)

Название: Анимация для фронтендеров
Год выхода: 2020
Автор: HTML Academy
Жанр: Видеокурс, программирование, анимация, разработка
Формат: AVI, HTML, PDF, JPG
Видео: XviD | 1280х720-1400x720 | ~2139 Kbps
Аудио: MP3| 160 kb/s | 48 KHz
Язык: Русский
Продолжительность: 00:23:38
Размер: 1.23 Gb

Подписывайтесь на наш Дзен-канал Xrust, чтобы не пропустить новые статьи!



Скачать Анимация для фронтендеров

Пожалуйста зарегистрируйтесь или введите в Панели пользователя логин и пароль.
Если не хотите регистрироваться, то введите логин: demo пароль:demo
Tilda Start - курс по разработке сайтов на Тильде (2020)
Tilda Start - курс по разработке сайтов на Тильде (2020)
Обучение
За 3 недели вы научитесь самостоятельно разрабатывать аккуратные и полезные сайты, лендинги, интернет-магазины. Уже после первой недели разберетесь с платформой и сможете сделать лендинг и технические настройки. На второй научитесь делать сложные
Фуд-фото. Кулинарный онлайн-курс (2020)
Фуд-фото. Кулинарный онлайн-курс (2020)
Обучение
На этом курсе вы научитесь выстраивать композицию, правильно выбирать ракурс съёмки и обрабатывать фотографии. Всё это на мобильном телефоне!
Веб разработка - создание сайта с нуля HTML, CSS, JavaScript (2020)
Веб разработка - создание сайта с нуля HTML, CSS, JavaScript (2020)
Обучение
Научись создавать современные сайты и начни зарабатывать на этом! Создание сайта с нуля с использованием HTML, CSS, JS. В этом курсе мы создадим полноценный собственный Сайт-Портфолио с использованием самых современных технологий!
Промежуточный курс обучения по Excel (2020)
Промежуточный курс обучения по Excel (2020)
Обучение
Учись сегодня, создай что-то практичное завтра. Как показывают наблюдения и практика, в наш бурный информационный XXI век не деньги решают все, но практические знания и навыки. Мой немалый опыт работы с Microsoft Office Excel, показывает мне, что он
CSS – Анимация интерфейсов (2019)
CSS – Анимация интерфейсов (2019)
Обучение
Вы когда-нибудь видели на разных сайтах красивые эффекты или анимации? Возникал ли у Вас вопрос: "А как это сделано?" Хотите научиться разбираться в этом и создавать подобное, чтобы привлекать внимание к своему сайту, сделать его необычным,
Полный курс анимации в 3DsMax. От начинающего до профессионала (2019)
Полный курс анимации в 3DsMax. От начинающего до профессионала (2019)
Обучение
В основу курса положена эффективная методика обучения работе с программой 3DsMax на примерах и упражнениях. Рассматриваются инструменты анимации, возможности анимации с учетом законов физики. Особое внимание уделено персонажной анимации, в том числе
Добавить
Комментарии (0)
Прокомментировать
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Войти через: