Сейчас ищут:

Продажа [НТМL Academy] Онлайн‑курс Анимация для фронтендеров

  • Внимание!

    В данном разделе находятся курсы которые продаются за отдельную плату (контакты для покупки указаны внизу каждой темы).

    Премиум на такие темы не распространяется.

Admin

Команда форума
Администратор
Регистрация
15 Дек 2021
Сообщения
223,280
Реакции
1,330
Баллы
113
7pom7oe-jpg.222181




Курс разработан для опытных разработчиков, которые хотят повысить свой профессиональный уровень. Он подойдёт для работающих людей, у которых мало времени.

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

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

В чём отличие от интерактивных курсов?
Как раз в этой триаде. В интерактивных курсах вы изучаете базовые конструкции языков, а на профессиональном курсе вы осваиваете приёмы и методики решения профессиональных задач.

Что вас ждёт на обучении
  • Структурированная теория
    В каждом разделе вы изучаете теорию и методику решения практических задач: из учебника, подобранных нами материалов и демонстраций кода на примере учебного проекта.
  • Практика
    После изучения теории и методики выполняете домашние задания, в которых работаете над своим проектом и закрепляете учебный материал.
  • Ревью кода и консультации
    После каждого задания наставник проверяет качество работы и даёт обратную связь. А если остались вопросы, можно записаться на консультацию — наставник поделится опытом и расскажет, как можно сделать ещё лучше.
Подходит ли вам этот курс
  • Курс проходит в асинхронном формате. Вы можете начать обучение в любое время и двигаться по программе с комфортной вам скоростью.
  • Главная ценность курса — большой объём обратной связи от наставника, который детально разберёт ваш код, определит пробелы в понимании материала и поможет со всем справиться.
  • Курс рассчитан на опытных разработчиков, желающих поднять свои навыки. Для его освоения нужны навыки вёрстки и программирования на JavaScript. Курс подойдёт и для новичков, которые успешно прошли курсы «» и «».
  • В курсе мы используем самые эффективные для обучения профессионалов форматы: тексты, тренажёры, скринкасты и демонстрации. Мы не злоупотребляем видео и используем его только там, где оно необходимо.
Преимущества курса
  • Актуальные на рынке стандарты качества и технологии.
  • Демонстрация решения сложных практических задач от экспертов индустрии.
  • Обучение на проектах как на рынке с обратной связью.
  • Асинхронный формат — работа в вашем темпе, с учётом загрузки на работе.
Учебный проект
На примере учебного проекта мы расскажем и покажем, как правильно делать крутые анимации. После этого вы сможете попрактиковаться, выполняя задания по личному проекту.

Промо сайт для Фестиваля «Иллюзион»
В течение курса мы будем анимировать промо-страницу фестиваля иллюзионистов «Иллюзион», которая, как и сам фестиваль, не должна оставить равнодушным ни одного посетителя.

Личный проект
В каждом разделе вы будете выполнять задания по личному проекту. Над ним вы будете работать и самостоятельно, и в паре с наставником.

Сайт конкурса-игры «Таинственный отпуск»
Вам предстоит сделать анимации для сайта конкурса игры, где игрокам предстоит угадать пункт назначения путешествия. Чтобы попробовать свои силы, им нужно будет сыграть в чате с ботом ИИ «Соня». А вам — с помощью анимаций создать весёлую атмосферу развлечения.

После завершения курса вы сможете строить в браузере анимации любой сложности. Благодаря грамотному использованию анимаций вы сможете повысить качество 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.
  • Поговорим о том, как можно дальше развиваться в создании анимации.
Просмотр скрытого содержимого доступен для зарегистрированных пользователей!

👉 По поводу приобретения курса пишите в telegram - @SamFather_bot или на почту [email protected]
 

Вложения

  • 7POM7Oe.jpg
    7POM7Oe.jpg
    222.2 KB · Просмотры: 10

Похожие темы

Сверху Снизу
Забыли свой пароль?
или Войдите с помощью