Анімація для фронтендерів-новий курс HTML Academy. У програмі: лінійна і покадрова анімація, Анімація CSS і SVG, Canvas, WebGL і шейдери, 3D в браузері і майбутнє анімації в браузері. Курс проходить в асинхронному форматі, записатися на нього можна в будь-який момент і займатися в зручному темпі під наглядом наставника
- структурована теорія
На початку кожного розділу ви вивчаєте теорію з текстового підручника і відібраних нами матеріалів. - Практика
Після вивчення теорії виконуєте домашнє завдання, в якому працюєте над своїм проектом і закріплюєте навчальний матеріал. - Рев'ю коду
Після кожного завдання ваш особистий наставник перевіряє якість роботи, ділиться досвідом і розповідає, як можна зробити краще.
після завершення курсу Ви зможете будувати в браузері анімації практично будь-якої складності. Завдяки грамотному використанню анімацій ви зможете підвищити якість UX і привабливість сайтів, які ви розробляєте.
Розділ 1
основи анімації, лінійні анімації
Ми розберемося, що таке анімація, чому людина бачить руху на екрані, які бувають види анімації і як завдяки анімації підвищити якість UX. Розберемо основні ідеї Material Design. Також розглянемо найпростіший вид лінійних анімацій і їх тимчасові функції.
CSS-анімація
Продовжимо вивчати лінійні анімації і вивчимо групу властивостей animation в CSS. Також ми розглянемо, як запустити анімацію на основі подій в JavaScript. Навчимося налагоджувати анімації і профілювати продуктивність, щоб збільшити їх швидкість і швидкість перемальовування сторінки в цілому.
SVG-анімація
У цій частині ми зануримося у вивчення SVG. Розглянемо, як анімувати отрисовку кривих. Змусимо рухатися один SVG-об'єкт по гранях іншого об'єкта і навчимося створювати ланцюжки анімацій за допомогою тега animate.
Покадрові анімації. Canvas
Починаючи з цієї частини курсу ми вивчимо покадрові анімації-це більш низькорівневий вид анімації. Навчимося анімувати зображення на canvas, доб'ємося ефективної роботи анімації і в підсумку отримаємо заповітні 60 кадрів в секунду.
WebGL. Шейдери
У цьому розділі навчимося створювати незвичайні і складні анімаційні ефекти. Зрозуміємо відмінності обчислень на CPU і GPU, а також навчимося писати спеціальні мікропрограми для GPU — шейдери.
3D в браузері
Нарешті вивчимо основи 3D-моделювання і розглянемо різні бібліотеки для реалізації 3D в браузері. Створимо сцену, світло для неї, додамо 3D модель з текстурами і елементи управління.
Розділ 7
майбутнє анімації в браузері
Розділ присвячений web Animation API, який розширює можливості лінійних анімацій завдяки JavaScript, але поки є експериментальним. Ще в розділі розберемося з Houdini API, завдяки якому можна отримати низькорівневий доступ до движка CSS.
Розділ 1
основи анімації, лінійні анімації
Ми розберемося, що таке анімація, чому людина бачить руху на екрані, які бувають види анімації і як завдяки анімації підвищити якість UX. Розберемо основні ідеї Material Design. Також розглянемо найпростіший вид лінійних анімацій і їх тимчасові функції.
- Лінійні анімації.
- покадрова анімація.
- transition.
- криві Безьє.
CSS-анімація
Продовжимо вивчати лінійні анімації і вивчимо групу властивостей animation в CSS. Також ми розглянемо, як запустити анімацію на основі подій в JavaScript. Навчимося налагоджувати анімації і профілювати продуктивність, щоб збільшити їх швидкість і швидкість перемальовування сторінки в цілому.
- Animation.
- Key-Frame.
- Intersection Observer API.
SVG-анімація
У цій частині ми зануримося у вивчення SVG. Розглянемо, як анімувати отрисовку кривих. Змусимо рухатися один SVG-об'єкт по гранях іншого об'єкта і навчимося створювати ланцюжки анімацій за допомогою тега animate.
- SVG Path.
- stroke-dasharray.
- тег animate.
Покадрові анімації. Canvas
Починаючи з цієї частини курсу ми вивчимо покадрові анімації-це більш низькорівневий вид анімації. Навчимося анімувати зображення на canvas, доб'ємося ефективної роботи анімації і в підсумку отримаємо заповітні 60 кадрів в секунду.
- покадрова анімація.
- canvas.
- window.requestAnimationFrame.
- Math.sin(), Math.cos().
WebGL. Шейдери
У цьому розділі навчимося створювати незвичайні і складні анімаційні ефекти. Зрозуміємо відмінності обчислень на CPU і GPU, а також навчимося писати спеціальні мікропрограми для GPU — шейдери.
- WebGL.
- OpenGL.
- GLSL.
3D в браузері
Нарешті вивчимо основи 3D-моделювання і розглянемо різні бібліотеки для реалізації 3D в браузері. Створимо сцену, світло для неї, додамо 3D модель з текстурами і елементи управління.
Розділ 7
майбутнє анімації в браузері
Розділ присвячений web Animation API, який розширює можливості лінійних анімацій завдяки JavaScript, але поки є експериментальним. Ще в розділі розберемося з Houdini API, завдяки якому можна отримати низькорівневий доступ до движка CSS.
https://privatelink.de/?https://htmlacademy.ru/intensive/animation