Анимација за фронт-енд програмере - курс 31.380 РУБ. са ХТМЛ академије, обука, Датум: 28.11.2023.

Наш циљ је да сваког новопридошлицу претворимо у пуноправног и траженог стручњака, спремног за рад у веб индустрији.

Саша и Леша су 2013. године покренули ХТМЛ академију. Од самог почетка смо одлучили да научимо како да радимо са живим кодом, решавајући проблеме који су блиски стварним. Пружамо прилику за стицање не само знања, већ и вештина. У процесу учења ученика суочавамо са тестовима, чији је принцип „подударање као што је приказано у моделу“. Ово је принцип по којем већина дизајнера изгледа ради.

Сматрамо да је распоред веома корисна вештина за било коју ИТ специјалност. Због тога се трудимо да наше симулаторе учинимо што занимљивијим, заразним, интерактивним, необичним и помало игривим.

Припремили смо симулаторе који покривају различите аспекте рада лаиоут дизајнера. Ово је довољно да се темељно упознате са изгледом. А за оне који желе да израсту у професионалце, припремили смо шест онлајн курсева. Ови јединствени образовни програми вам омогућавају да припремите стручњаке са вештинама неопходним за веб индустрију. И ментори нам помажу у томе. Сада са нама ради више од три стотине ментора.

Ако вам симулатори и курсеви нису довољни, онда можете погледати полицу за књиге, где постепено прикупљамо књиге о веб развоју. Или посетите наш форум и разговарајте о питању које вас брине.

Секција 1Основе анимације.

У првом одељку ћемо погледати историју анимације. Како створити илузију кретања, главне разлике између класичне и компјутерске анимације. Које апстракције постоје за конструисање компјутерске анимације? Која је разлика између линеарне анимације и анимације оквир по кадар? Такође ћемо погледати 12 принципа експресивне анимације. Након овога ћемо креирати једноставне анимиране прелазе у ЦСС-у.

• Цевовод за извршавање кода у претраживачу.
• ЦСС прелаз и анимација: разлике.
• Временске функције: уграђено, кубно-безиер.

Одељак 4 Стоп-мотион анимација. ЈаваСцрипт и Цанвас.

У овом поглављу ћемо прећи на увођење апстракције нижег нивоа: анимације оквир по кадар. Хајде да проучимо шта је ФПС и стандардне вредности ФПС-а: 24, 30, 60. Шта је плутајући ФПС. Погледајмо примере анимације оквир по кадар:

• анимација стања ликова у игрицама - метода на вебу Сприте Схеетс - припремљене анимације, 360 модел (на пример, аутомобил).
• компјутерска анимација, дизајн покрета - метода у вебу ЈС Твеен и ЈС Морпх - анимација помоћу библиотека, на пример, ЦреатеЈС, АниматеЈС, ГСАП.
• игре које прате радње играча у реалном времену – трке, Тетрис – метод креирања модела са интерфејсом за интеракцију – у веб интерактивним елементима и играма.

Такође ћемо наставити да детаљно проучавамо принципе експресивне анимације: присуство на сцени, атрактивност, професионални цртеж - пажња програмера на детаље, квалитет коначне слике.

У практичном делу научићемо да користимо:

• виндов.рекуестАниматионФраме.
• Платно и његови параметри и методе.
• Циклус анимације цртања једноставног елемента. Трансформације. Цртање слике. Маскирање. Класа апстрактног објекта је рига. Продужетак класе. Спецификација параметарске путање. Примери: елипса, спирала, парабола, синусни талас, пригушени синусни талас итд.
• Манипулације са путањама: сабирање, множење, паралелни пренос, синусоидни фазни помак.
• Упдате() и рендер() методе.

Одељак 5 ВебГЛ. Схадерс.

У овом поглављу наставићемо да радимо са анимацијом оквир по кадар. Хајде да научимо шта су ВебГЛ и ОпенГЛ. Хајде да погледамо разлику између рада у контексту 2Д и вебгл-а. Хајде да истражимо шта су растерски ефекти:

• филтери у боји
• ОпенГЛ
• маске – Луминатион, Алпха
• прекривања боја - мешање
• шумови
• оффсетс
• замућење

Проучаваћемо и анимацију растерских ефеката: стално кретање и промену параметара.

У пракси, погледајмо:

• Шта су тонски и фрагментни схадери.
• Како користити ВебГЛ 3д за 2д ефекте.
• Шта је геометрија.
• Пипелине ВебГЛ.
• Интеракција између ЈС и ВебГЛ-а.
• Типови података у ВебГЛ-у.
• Писање ГЛСЛ - основе.

Одељак 6 Тхрее.јс, део 1: 3Д у претраживачу.

У овом поглављу ћемо поново говорити о координатним системима, тачкама и векторима. Хајде да проучавамо матрице 3Д трансформације, кватернионе и Ојлерове углове, множење матрице.

Хајде да размотримо 2 опције за креирање модела са интерфејсом за контролу корисника:

• Директно подешавање параметара: брзина или убрзање (кретање или ротација).
• Постављање циља - вредност којој се морате постепено приближавати: елемент привлачи курсор.
• Хајде да проучимо радни циклус мотора, методе инвалидате(), упдате() и рендер() и карактеристике рада са плутајућим ФПС-ом. Хајде да научимо како да радимо прорачуне унутар упдате().

У практичном делу почећемо са радом са библиотеком Тхрее.јс. Хајде да проучимо:

• Начини описивања објеката: положај, геометрија и материјали.
• Геометрија: параметарски уграђен, произвољно учитавање. Геометријски бафер.
• Који материјали постоје, врсте материјала, начини рендеровања, прилагођени материјали.
• Заставице за ажурирање.
• Рендер лооп.
• Анимације положаја. Метода морфолошке анимације.
• Сцена + камера. Додавање објеката на сцену. Груписање.
• Светлост. Врсте извора светлости. Матцап материјал.

Одељак 7 Тхрее.јс, 2. део: Рад са камером.

У овом делу ћемо погледати шта је камера у ВебГЛ-у, а посебно у Тхрее. ЈС:

• Контрола камере.
• Основни покрети камере.
• Опрема за камере.
• Различити дизајни опреме за различите врсте контроле.

У практичном делу:

• Да видимо које врсте камера постоје у Три. ЈС, параметри камере, промена величине при преласку на мобилну верзију.
• Хајде да истражимо приступе анимацији камере. Хајде да погледамо реакцију на радње корисника - глатка промена перспективе. Контролисање помоћу опреме: циклус рендеровања опреме за камеру. Прављење анимације лета.
• Опрема за камере.
• Хајде да размотримо пребацивање између камера - уређивање. Правила инсталације.

Одељак 8 Будућност анимације у претраживачу.

У завршном делу курса ћемо се осврнути на оне АПИ-је који још нису спремни за употребу у производњи, али вреди да почнете да проучавате сада како бисте побољшали ефикасност вашег рада у будућности.

• Хајде да видимо како се АПИ за веб анимацију разликује од обичне ЦСС анимације и које додатне могућности пружа.
• Хајде да научимо основе Хоудини АПИ-ја.
• Хајде да разговарамо о библиотекама које ће помоћи да се поједностави рад са анимацијама, временским линијама, СВГ-ом, платном, ВебГЛ-ом.
• Хајде да размотримо програме за рад са анимацијом и графиком за веб: Гоогле Веб Десигнер, Адобе Анимате, Адобе Афтер Еффецтс, 3д графички програми: Цинема 4д, Блендер.
• Хајде да направимо кратак преглед приступа креирању динамички генерисане анимације и графике. Хајде да погледамо који алати се могу користити за прављење вишеплатформског софтвера са 3Д.
• Хајде да разговарамо о томе како се можете даље развијати у стварању анимације.