Суббота
24.10.2020, 03:55
Всё для фото- и видеомонтажа
Вы вошли как Гость | Группа "Гости"Приветствую Вас Гость | RSS
Главная Всё для фото и видео монтажа Мой профильРегистрация ВыходВход
_____________________________________________________________________
_____________________________________________________________________
Друзья сайта




  • Форма входа

    Категории раздела
    Примеры видеосъемки [32]
    Книги, учебники [40]
    Видео уроки [1835]

    Меню сайта

    Наш опрос
    Чего не хватает на сайте
    Всего ответов: 1426

    Друзья сайта
  • Томский сайт

  • Создать сайт бесплатно

  • Официальный блог

  • Сайт для любителей СМС

  • webunder

  • teasernet

  • adsyst

  • I-Technologies

  • Самая выгодная монетизация сайта


  • Партнеры

    Главная » Файлы » Уроки, обучающие материалы » Видео уроки

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

    ____________________________________________________________________________________

    09.10.2020, 23:04

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

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

    __________________________________________________________________________

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

    Поиск по сайту

    Реклама

    Ваша реклама


    Облако тегов

    Статистика

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

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

    _______________

    Сегодня День рождения у:
    Аня(31), sv0065(62), Tanja5257(30)
    _______________

    Ваш IP адрес: 35.170.78.142
    _______________

    Лучшие журналисты
  • masterpp
  • zevs
  • trigall
  • toxa
  • Nayls


  • Copyright MyCorp © 2020
    Хостинг от uCoz
    Авторская позиция
    Все права на публикуемые материалы принадлежат их авторам, Администрация проекта ответственность за их использование не несет.
    Материалы публикуют разные пользователи и не всегда Авторы новостей являются Авторами содержимого новости.
    Если Вы считаете, что какой-либо из материалов нарушает Ваши права, свяжитесь с Администрацией.
    Все материалы на сайте предназначены исключительно для ознакомления.