Четверг, 28.03.2024, 21:55
Приветствую Вас Гость | RSS

Main page Animation Graphics Complaint

МЕНЮ САЙТА
 

ГРАФИКА, ДИЗАЙН

РЕКЛАМА

https://img-fotki.yandex.ru/get/15579/37009792.25a/0_b3eee_f493d981_orig

 
 


ЧАТ

ТОП ПОЛЬЗОВАТЕЛЕЙ


masterpp
Материалов:2567
Сообщений на форуме: 0
Репутация: 0


Kioka83
Материалов:2449
Сообщений на форуме: 0
Репутация: 0


DiZa
Материалов:2390
Сообщений на форуме: 0
Репутация: 2


algodove
Материалов:2160
Сообщений на форуме: 0
Репутация: 1


lunar_elf
Материалов:1877
Сообщений на форуме: 0
Репутация: 0


gringrey
Материалов:1260
Сообщений на форуме: 0
Репутация: 1


maxdmf
Материалов:1117
Сообщений на форуме: 0
Репутация: 0


Admin
Материалов:769
Сообщений на форуме: 302
Репутация: 2


Alexey
Материалов:722
Сообщений на форуме: 0
Репутация: 0


Vilyassa
Материалов:470
Сообщений на форуме: 0
Репутация: 0

...

СТАТИСТИКА


Рейтинг@Mail.ru

Проверка тиц pr

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


Онлайн всего: 1
Гостей: 1
Пользователей: 0

НАШ БАHHЕР
Ultraviolet - анимация, графика, дизайн

Мы будем Вам очень признательны, если Вы разместите нашу кнопку на своем сайте


ДРУЗЬЯ САЙТА
DALE - анимация, анимированные картинки, открытки
 
 DiZona – все для Photoshop
 
 DiVA - Анимация
 
Graphicsector - Все для дизайна и графики
 
Анимация.GIF - Elza
 
SuprGif - Самая лучшая анимация
 
GIF & FLASH - анимация, флеш-открытки для Вас
 
DIZONA
 
 Kubines - Оформление системы
 
 fleshmagik - Флеш анимации Музыкальные открытки
 
Art-in-focus - рамки, баннер 88х31
 

Главная » Графика, Дизайн » Видео, уроки, софт » Уроки анимации


Анимация для фронтендеров (2020)
09.10.2020, 20:02

На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить. В программе: линейная и покадровая анимация, анимация 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)

  
 //ultraviolet.ucoz.com/ZALOBA/knopka-1.png   
 

 
Категория: Уроки анимации | Добавил: Kioka83 | Теги: анимация, разработка, видеокурс, Программирование
Просмотров: 185 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
ПРОФИЛЬ
Четверг
28.03.2024
21:55

[ Управление профилем ]

ИНТЕРЕСНОЕ
Multicolored variegated Photoshop Styles
Text styles Mix - 74
Psd исходник - Ночь колдовства, чудес и страхов
Многослойные фоны - Закружился в танце лист багряный, золотой
Праздничная фоторамка - Пусть блестит в ваших глазах лишь счастливая слеза
Рамка женская - Букет ирисов
PSD исходник - Нежные оттенки чувств волшебных
PSD исходник - Сирени праздничный салют
Burn To Be Gold - Project for After Effects (Videohive)
С праздником, милые женщины - праздничный футаж
Water drops and water bubbles Photoshop Styles
Golden Foil styles
Нежный детский скрап-набор - Здравствуй малыш
Floral vector backgrounds
Fruits vector material
Merry Christmas and Happy New Year 2016

ОБЛАКО ТЕГОВ

АНИМАЦИЯ


Ultraviolet.ucoz.com © 2024
Конструктор сайтов - uCoz