udemy
Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.
Изучите веб-анимацию простым способом: введение в SVG и GSAP
Learn Web Animation the Easy Way: An Intro to SVG and GSAP
★4.6 (всего оценок - 14)
Продолжительность
3 ч 11 мин
Категория
CSSКоличество уроков
15 Видео
Дата добавления
4 мар. 2020 г., 14:46
Язык
Английский
Дата выхода
21 окт. 2015 г., 16:32
Дата обновления
29 апр. 2026 г., 06:50
Хотите быстро и понятно разобраться в веб-анимации? Этот курс по SVG и GSAP поможет вам освоить современные методы создания плавных, динамичных и профессиональных анимаций, которые работают быстро и выглядят потрясающе на любых устройствах.
Почему стоит изучить веб-анимацию на основе SVG и GSAP
SVG и GSAP уже стали стандартом для создания производительных и гибких веб-анимаций. Они отлично подходят для интерактивных интерфейсов, микроанимаций, рекламных баннеров, иллюстраций и даже сложных анимационных сцен.
- SVG не теряет качества при масштабировании и идеально подходит для веба.
- GSAP обеспечивает высокую производительность и невероятную гибкость.
- Комбинация этих технологий открывает доступ к анимациям, которые сложно или невозможно создать с помощью CSS.
Что вы изучите в этом курсе
Основы работы с SVG
Вы узнаете, что делает SVG уникальным и востребованным инструментом для веб-разработки:
- ключевые преимущества использования SVG;
- основные формы, теги и структура SVG-файлов;
- как корректно внедрять SVG в HTML;
- логика организации элементов для анимации.
Знакомство с анимационной платформой GreenSock
Курс подробно объясняет, что такое GSAP и почему его используют крупнейшие компании:
- обзор основных пакетов GreenSock и их назначение;
- разбор GreenSock API;
- шесть ключевых функций анимации и примеры их использования;
- работа с таймлайнами и принцип построения сложных анимаций.
Практическая часть: создаём анимированную открытку
Обучение построено на реальном проекте — вы создадите анимированную открытку, шаг за шагом осваивая профессиональные техники.
Пошаговое создание анимации
- разбиение проекта на сцены;
- построение анимаций для отдельных элементов;
- сборка всех частей в единую таймлайновую структуру;
- создание выразительных эффектов, которые притягивают внимание.
Проектные материалы
На каждом этапе вам предоставляются исходные файлы, чтобы вы могли повторять процесс, экспериментировать и настраивать анимации под себя.
Кому подойдёт этот курс
- фронтенд-разработчикам, которые хотят улучшить визуальную часть своих проектов;
- дизайнерам UI, стремящимся создавать динамичные интерфейсы;
- художникам и аниматорам, изучающим цифровую анимацию;
- энтузиастам, желающим освоить новый творческий инструмент.
Какие навыки вы получите
После завершения курса вы сможете:
- уверенно работать с SVG-элементами;
- создавать сложные анимации с помощью GSAP;
- строить многоуровневые таймлайны;
- оптимизировать анимации для высокой производительности;
- создавать анимационные проекты любой сложности.
Освойте ценный навык, который сделает ваши проекты ярче, динамичнее и профессиональнее — и откройте новые возможности для креативности и развития карьеры.
- Урок 1.00:02:09Introduction
- Урок 2.00:10:43An Overview of SVG
- Урок 3.00:14:29SVG Basic Shapes & Primitives
- Урок 4.00:21:33A Few More SVG Features
- Урок 5.00:06:58Introduction to GreenSock
- Урок 6.00:14:55Hands-on GreenSock - Part 1
- Урок 7.00:09:37Hands-on GreenSock - Part 2
- Урок 8.00:10:27Hands-on GreenSock - Part 3
- Урок 9.00:12:16Hands-on GreenSock - Part 4
- Урок 10.00:04:17Project Overview
- Урок 11.00:10:09Project Files & Folder Structure
- Урок 12.00:13:45Animation Project - Step 1
- Урок 13.00:11:04Animation Project - Step 2
- Урок 14.00:24:37Animation Project - Step 3
- Урок 15.00:24:06Animation Project - Final Step
Автор - udemy
Комментарии