RSS сайта | RSS форума | RSS каталога файлов | RSS блога | Карта форума | Карта сайта | Все теги сайта
Главная страница

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

ГлавнаяФорумБлогФайлыОбратная связьО сайтеГостевая книгаПоиск
Настал ваш час, чтобы заработать реальные деньги на своем сайте
Категория
Заставки-скринсейверы
Графика, дизайн
Фото+Картинки
Иконки
Обои
Windows,ОС
Безопасность
Мультимедия
Интернет
Утилиты
Журналы, книги
Видео-уроки
Фильмы
Музыка
Софт
Игры
Для мобилы
Юмор
Разное
PS градиенты
PS шаблоны
PS плагины
PS шрифты
PS рамки
PS стили
PS кисти

Доп. меню

Добавь нас в Яндекс
добавить на Яндекс

Устанавливайте виджет о новых публикациях варез-портала ProSidr.ru на главной странице Яндекса. Будьте в курсе последних обновлений в мире софта.

добавить на Яндекс

Новое в блоге

SEO оптимизация - это Оптимизация Сайта

Как проверить пинг?

Для чего нужны мета-теги?

Нужна ли оптимизация?

Как создать файл js. Расширение js.

SEO: Поисковая оптимизация от А до Я - 3 в 1 (21 апреля 2011)

Внутренняя оптимизация - тексты

Новинки форума
Разное
Раздел жалоб
Зарабатываем деньги на нашем сайте!
3 февраля 2017 Апдейт тИЦ
Чертежи, инженерная графика, 3D моделирование
Почему сайт выпадает с Яндекса?
Adobe After Effects CS3
- Сынок, ты пьяненький? - Угу, в попочку...
Про спорт
Смешная история
Простые иконки групп + psd
Как установить плагин (фильтр) в Photoshop?
Видеоурок "Новогоднее поздравление в ретро стиле"
Как продлить жизнь жёстким дискам?
Приветик
У нас нашли, переходы с ПС
Яндекс тИЦ 03.12.2016
Правильное питание
Вечный двигатель на 4 киловатта
Ищу курс по созданию сайтов.




Администрация сайта не претендует на авторские права. Материалы предоставленные на сайте, принадлежат их владельцам и предоставляются исключительно в ознакомительных целях.

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

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

Скачать Pic бесплатно Анимация для фронтендеров (2020) на высокой скорости и по прямой ссылке!


Категория: Видео-уроки | Просмотров: 34 | Добавил: bubagame | Теги: видеокурс, анимация, программирование, разработка | Рейтинг: 0.0/0

Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Профиль

Привет, Гость
Вы в группе: Гости

Партнеры
Партнеры сайта ProSIdr



Реквизиты
Наши кошельки
WMU - U202985913646
WMR - R188616388079
WMZ - Z277596519981
WME - E201827653504

Наш баннер
Мы будем Вам признательны, если Вы разместите нашу кнопку у себя на сайте. Если Вы хотите обменяться с нами баннерами, пишите на форум в тему "Баннерообмен"

Наши баннеры

Переходы с ПС
Загрузка...

Новости

Календарь
«  Октябрь 2020  »
ПнВтСрЧтПтСбВс
   1234
567891011
12131415161718
19202122232425
262728293031

Опрос
Какой браузер предпочитаете?
Всего ответов: 99

Статистика
Зарегестрировано
Статистика материалов
Общая статистика
Онлайн:
Онлайн всего: 12
Гостей: 9
Пользователей: 3
barryzh2, dionneyx1, vanessave2
За сегодня: trigall, fiace, jimmieqo18, VANGOG19, BOSS-13, mamaligadoc, Dadgildrusy, Franksach, Semenmos, SamDel, 3978ale, isabelvl1, pearlpo60, kirstenuc60, christianeb16, justinegs4, [Полный список]

www.megastock.ru
Анализ сайта Яндекс.Метрика

Администрация сайта не претендует на авторские права. Материалы предоставленные на сайте, принадлежат их владельцам и предоставляются исключительно в ознакомительных целях.
Cайт оптимизирован для просмотра браузером Opera, Google Chrome, Mozilla Firefox, Safari.
           

Яндекс.Метрика
Яндекс.Метрика