Анимация за front-end разработчици - курс 31 380 RUB. от HTML Academy, обучение, Дата: 28.11.2023г.
разни / / November 30, 2023
Курсът се провежда в асинхронен формат. Можете да започнете да тренирате по всяко време и да преминете през програмата с подходяща за вас скорост.
Основната стойност на курса е голямо количество обратна връзка от ментор, който ще анализира подробно вашия код, ще идентифицира пропуските в разбирането на материала и ще ви помогне да се справите с всичко.
Курсът е предназначен за опитни разработчици, които искат да подобрят своите умения. За да го овладеете, имате нужда от умения за оформление и програмиране в JavaScript. Курсът е подходящ и за начинаещи, които са завършили успешно курсовете по HTML и CSS. Адаптивно оформление и автоматизация“ и „JavaScript. Професионална разработка на уеб интерфейси."
В курса използваме най-ефективните формати за обучение на професионалисти: текстове, симулатори, скрийнкастове и демонстрации. Ние не прекаляваме с видеото и го използваме само там, където е необходимо.
Нашата цел е да превърнем всеки новодошъл в пълноценен и търсен специалист, готов да работи в уеб индустрията.
През 2013 г. Саша и Леша стартираха HTML Academy. От самото начало решихме да научим как да работим с код на живо, решавайки проблеми, които са близки до реалните. Предоставяме възможност за придобиване не само на знания, но и на умения. В процеса на обучение ние изправяме ученика с тестове, чийто принцип е „съвпадение, както е показано в модела“. Това е принципът, по който работят повечето дизайнери на оформление.
Смятаме оформлението за много полезно умение за всяка ИТ специалност. Затова се опитваме да направим нашите симулатори възможно най-интересни, пристрастяващи, интерактивни, необичайни и донякъде подобни на игра.
Подготвили сме симулатори, които обхващат различни аспекти от работата на дизайнера на оформление. Това е достатъчно, за да се запознаете задълбочено с оформлението. А за тези, които искат да станат професионалисти, сме подготвили шест онлайн курса. Тези уникални образователни програми ви позволяват да подготвите специалисти с уменията, необходими за уеб индустрията. И менторите ни помагат в това. Сега повече от триста ментори работят с нас.
Ако симулаторите и курсовете не са достатъчни за вас, тогава можете да погледнете рафта с книги, където постепенно събираме книги за уеб разработка. Или посетете нашия форум и обсъдете въпроса, който ви вълнува.
След завършване на курса ще можете да създавате анимации с всякаква сложност в браузъра. Чрез правилното използване на анимации можете да подобрите UX качеството и привлекателността на сайтовете, които разработвате. Курсът включва над 40 практически задачи и 10 консултации с ментор.
В първия раздел ще разгледаме историята на анимацията. Как да създадете илюзията за движение, основните разлики между класическата и компютърната анимация. Какви абстракции има за конструиране на компютърна анимация? Каква е разликата между линейната анимация и анимацията кадър по кадър? Ще разгледаме и 12 принципа на експресивната анимация. След това ще създадем прости анимирани преходи в CSS.
- Конвейер за изпълнение на код в браузъра.
- CSS преход и анимация: разлики.
- Времеви функции: вграден, кубичен безие.
В тази глава ще преминем към въвеждане на абстракция от по-ниско ниво: анимация кадър по кадър. Нека да проучим какво е FPS и стандартните стойности на FPS: 24, 30, 60. Какво е плаващ FPS. Нека да разгледаме примери за анимация кадър по кадър:
- анимация на състоянието на героите в игри - метод в мрежата Sprite Sheets - подготвени анимации, 360 модел (например кола).
- компютърна анимация, дизайн на движение - метод в мрежата JS Tween и JS Morph - анимация с помощта на библиотеки, например CreateJS, AnimateJS, GSAP.
- игри, които проследяват действията на играчите в реално време - състезания, Tetris - метод за създаване на модели с интерфейс за взаимодействие - в уеб интерактивни елементи и игри.
Също така ще продължим да изучаваме задълбочено принципите на експресивната анимация: сценично присъствие, привлекателност, професионална рисунка - вниманието на разработчика към детайла, качеството на крайната картина.
В практическата част ще се научим да използваме:
- window.requestAnimationFrame.
- Платно и неговите параметри и методи.
- Цикъл на рисуване на анимация на прост елемент. Трансформации. Рисуване на картина. Маскиране. Класът на абстрактния обект е riga. Разширение на класа. Параметрична спецификация на траекторията. Примери: елипса, спирала, парабола, синусоида, затихнала синусоида и др.
- Манипулации с траектории: събиране, умножение, паралелен трансфер, синусоидално фазово изместване.
- Методи Update() и render().
В тази глава ще продължим да работим с анимация кадър по кадър. Нека научим какво представляват WebGL и OpenGL. Нека да разгледаме разликата между работата в контекста на 2D и webgl. Нека проучим какво представляват растерните ефекти:
- цветни филтри
- OpenGL
- маски – Lumination, Alpha
- цветни наслагвания - смесване
- шумове
- компенсации
- размазване
Ще изучаваме и анимацията на растерни ефекти: постоянно движение и промяна на параметрите.
На практика нека да разгледаме:
- Какво представляват върховите и фрагментните шейдъри.
- Как да използвате WebGL 3d за 2d ефекти.
- Какво е геометрия.
- Тръбопровод WebGL.
- Взаимодействие между JS и WebGL.
- Типове данни в WebGL.
- Писане на GLSL - основите.
В тази глава отново ще говорим за координатни системи, точки и вектори. Нека да изучаваме 3D трансформационни матрици, кватерниони и ъгли на Ойлер, умножение на матрици.
Нека разгледаме 2 опции за създаване на модели с потребителски контролен интерфейс:
- Директна настройка на параметри: скорост или ускорение (движение или въртене).
- Задаване на цел - стойност, към която трябва постепенно да се приближите: елементът е привлечен от курсора.
- Нека проучим работния цикъл на двигателя, методите invalidate(), update() и render() и характеристиките на работа с плаващи FPS. Нека научим как да правим изчисления в update().
В практическата част ще започнем работа с библиотеката Three.js. Нека учим:
- Начини за описание на обекти: позиция, геометрия и материали.
- Геометрия: параметрична вградена, произволно зареждаема. Геометричен буфер.
- Какви материали има, видове материали, режими на изобразяване, персонализирани материали.
- Флагове за актуализация.
- Цикълът на рендиране.
- Позиционни анимации. Метод за анимация Morph.
- Сцена + камера. Добавяне на обекти към сцената. Групиране.
- Светлина. Видове източници на светлина. Matcap материал.
В тази част ще разгледаме какво е камера в WebGL и по-специално в Three. JS:
- Управление на камерата.
- Основни движения на камерата.
- Монтаж на камери.
- Различни конструкции на сондажи за различни видове контрол.
В практическата част:
- Нека да видим какви видове камери има в Three. JS, параметри на камерата, преоразмеряване при преминаване към мобилна версия.
- Нека проучим подходите към анимацията на камерата. Нека да разгледаме реакцията на действията на потребителя - плавна промяна в перспективата. Контролиране с платформа: цикъл на изобразяване на камерата. Създаване на анимация за полет.
- Монтаж на камери.
- Нека разгледаме превключването между камерите - редактиране. Правила за монтаж.
В последната част на курса ще разгледаме тези API, които все още не са готови за използване в производството, но си струва да започнете да изучавате сега, за да подобрите ефективността на работата си в бъдеще.
- Нека да видим как API за уеб анимация се различава от обикновената CSS анимация и какви допълнителни възможности предоставя.
- Нека научим основите на API на Houdini.
- Нека поговорим за библиотеки, които ще помогнат за опростяване на работата с анимации, времеви линии, SVG, платно, WebGL.
- Нека разгледаме програми за работа с анимация и графики за уеб: Google Web Designer, Adobe Animate, Adobe After Effects, програми за 3D графика: Cinema 4d, Blender.
- Нека направим кратък преглед на подходите за създаване на динамично генерирана анимация и графика. Нека да разгледаме какви инструменти могат да се използват за изграждане на междуплатформен софтуер с 3D.
- Нека поговорим за това как можете да се развиете допълнително в създаването на анимация.
В този курс ще научите основните принципи, които влизат в разработването на предни приложения.
В този курс ще научите Redux Toolkit. Ще научите повече за организирането на състояние в приложение на React. В крайна сметка ще научите как да управлявате сложни приложения за състояние и дизайн.
Овладейте търсена професия от нулата.