Сложность
Сложность
Продвинутый
Тип обучения
Тип обучения
Курс
Формат обучения
Формат обучения
Записанные лекции
Трудоустройство
Трудоустройство
Отсутствует

Стоимость курса

31 400 ₽
есть рассрочка

На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить.

Что вас ждёт на обучении

Структурированная теория
В каждом разделе вы изучаете теорию и методику решения практических задач: из учебника, подобранных нами материалов и демонстраций кода на примере учебного проекта.

Практика
После изучения теории и методики выполняете домашние задания, в которых работаете над своим проектом и закрепляете учебный материал.

Ревью кода и консультации
После каждого задания наставник проверяет качество работы и даёт обратную связь. А если остались вопросы, можно записаться на консультацию — наставник поделится опытом и расскажет, как можно сделать ещё лучше.

Подходит ли вам этот курс

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

  • Главная ценность курса — большой объём обратной связи от наставника, который детально разберёт ваш код, определит пробелы в понимании материала и поможет со всем справиться.

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

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

Что вы получите после обучения

Приобретаемые навыки

Образовательная организация

Наша цель — сделать из любого новичка полноценного и востребованного специалиста, готового работать в веб-индустрии.

В 2013 году Саша и Лёша запустили HTML Academy. Мы с самого начала решили учить работать с живым кодом, решая задачи, приближенные к реальным. Мы даём возможность получить не только знания, но и умения. В процессе обучения мы сталкиваем ученика с испытаниями, принцип которых — «сверстай, как показано в образце». Именно по такому принципу работают большинство верстальщиков.

Мы считаем вёрстку очень полезным навыком для любой IT-специальности. Поэтому стараемся делать наши тренажёры максимально интересными, затягивающими, интерактивными, необычными, где-то похожими на игру.

Мы подготовили тренажёры, затрагивающие разные аспекты работы верстальщика. Этого достаточно, чтобы вплотную познакомиться с вёрсткой. А для тех, кто хочет вырасти в профессионала, мы подготовили шесть онлайн-курсов. Эти уникальные образовательные программы позволяют подготовить специалистов с необходимыми для веб-индустрии навыками. И в этом нам помогают наставники. Сейчас с нами работают более трёхсот наставников.

Если тренажёров и курсов вам будет мало, то можно посмотреть на книжную полку, где мы постепенно собираем книги по веб-разработке. Или зайти к нам на форум и обсудить волнующий вас вопрос.

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

После завершения курса вы сможете строить в браузере анимации любой сложности. Благодаря грамотному использованию анимаций вы сможете повысить качество UX и привлекательность сайтов, которые вы разрабатываете. На курсе предусмотрено более 40 практических заданий и 10 консультаций с наставником.
 
Раздел 1 Основы анимации

В первом разделе мы рассмотрим историю появления анимации. Как создать иллюзию движения, основные отличия классической и компьютерной анимации. Какие есть абстракции для построения компьютерной анимации. Чем отличается линейная анимация от покадровой. Также мы рассмотрим 12 принципов выразительной анимации. После этого мы создадим простые анимационные переходы в CSS.

  • Pipeline выполнения кода в браузере.
  • CSS transition и animation: отличия.
  • Временные функции: встроенные, cubic-bezier.
Раздел 2 Анимация в CSS

Во втором разделе продолжим знакомиться с анимацией на основе CSS.

  • Рассмотрим инструменты для отладки и улучшения производительности анимации в браузере.
  • Узнаем, как перенести часть отрисовки CSS на видеоускоритель.
  • Познакомимся с принципами Material design.
  • Изучим, что такое придание веса объектам и создание иллюзии реалистичности, а также соблюдение принципа причины и следствия.
  • Подробно рассмотрим 3 принципа выразительной анимации: расчёт времени, фазованное движение, доводка и захлёст движения.
  • Попрактикуемся в работе с таймлайном составных объектов и групп элементов и планировании анимации: рассказ истории и управление вниманием пользователя.
Раздел 3 SVG Анимация

В этой главе мы изучим спецификацию SMIL, которая описывает анимацию внутри спецификации SVG:

  • Рассмотрим, в каких случаях лучше использовать SMIL, а в каких от неё стоит отказаться.
  • Научимся описывать анимацию движения объекта по кривой, запускать анимацию по событиям, например «нажатие», «завершение другой анимации» и т.д.
  • Подробно рассмотрим ещё 4 принципа выразительной анимации: сжатие и растяжение, преувеличение, дуги, выразительная деталь.
  • В практической части научимся создавать эффект рисования изображения и анимационного полета.
Раздел 4 Покадровая анимация. JavaScript и Canvas

В этой главе мы перейдём к знакомству с более низкоуровневой абстракцией — покадровой анимацией. Изучим, что такое FPS и стандартные значения FPS: 24, 30, 60. Что такое плавающий FPS. Рассмотрим примеры покадровой анимации:

  • мультипликация состояния персонажей в играх — метод в веб Sprite Sheets — заготовленные анимации, 360-модель (например, автомобиля).
  • компьютерная мультипликация, моушн-дизайн — метод в веб JS Tween и JS Morph — анимация с помощью библиотек, например, CreateJS, AnimateJS, GSAP.
  • игры с отслеживанием действий игрока в реальном времени — гонки, тетрис — метод создания моделей с интерфейсом взаимодействия — в веб интерактивные элементы и игры.

А также продолжим углубленно изучать принципы выразительной анимации: сценичность, привлекательность, профессиональный рисунок — внимание разработчика к деталям, качество финальной картинки.

В практической части научимся использовать:

  • window.requestAnimationFrame.
  • Canvas и его параметры и методы.
  • Цикл отрисовки анимации простого элемента. Трансформации. Рисование картинки. Маскирование. Класс абстрактного объекта — рига. Расширение класса. Параметрическое задание траектории. Примеры: эллипс, спираль, парабола, синусоида, синусоида с затуханием и т.п.
  • Манипуляции с траекториями: сложение, умножение, параллельный перенос, смещение фазы синусоиды.
  • Методы update() и render().
Раздел 5 WebGL. Шейдеры

В этой главе мы продолжим работать с покадровой анимацией. Изучим, что такое WebGL и OpenGL. Рассмотрим отличие работы в контексте 2d и webgl. Исследуем, какие бывают растровые эффекты:

  • цветовые фильтры
  • OpenGL
  • маски — Lumination, Alpha
  • цветовые наложения — blending
  • шумы
  • смещения
  • размытия

А также изучим анимацию растровых эффектов: постоянное движение и изменение параметров.

На практике рассмотрим:

  • Что такое вершинные и фрагментные шейдеры.
  • Как использовать WebGL 3d для 2d эффектов.
  • Что такое геометрия.
  • Pipeline WebGL.
  • Взаимодействие JS и WebGL.
  • Типы данных в WebGL.
  • Написание 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.
  • Поговорим о том, как можно дальше развиваться в создании анимации.

Рейтинг курса

4.1
рейтинг
0
0
0
0
0

Может быть интересно

обновлено 25.03.2024 09:38
Анимация для фронтендеров

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

Оставить отзыв
Поделиться курсом с друзьями