Официальная подлинная анимация VG со сложной интерактивной анимацией улучшает пользовательский опыт работы в веб -анимации
Вес товара: ~0.7 кг. Указан усредненный вес, который может отличаться от фактического. Не включен в цену, оплачивается при получении.
Описание товара
Оглавление
Предисловие. ..xiv
Предисловие XVI
Глава 1 Анатомия SVG. ................. 1
Синтаксис SVG DOM........... 2
viewBox и saveAspectRatio.. 2
Построение графиков............................ 5
Адаптивный SVG, группы и пути рисования........... 6
Экспорт SVG, предложения и оптимизация...........9
Уменьшение путевых точек ............................ 11
Инструменты оптимизации............................. 12
Глава 2 Использование CSS для создания анимации SVG...14
Анимация с помощью SVG........... 16
Преимущества использования SVG-рисунков.......... 18
Плавная анимация ........... 20
Глава 3 CSS. Анимация и рисованный SVG.Sprite. ........................21
Анимация по ключевым кадрам с использованием Steps() и SVG Sprite ............. 21
Рисование с использованием шаблонов в Illustrator..... 24
Рисуйте кадр за кадром в редакторе SVG или рисунки и используйте Gruntiocon для создания спрайтов........... 26
Моделирование сложных движений с помощью простого кода........... 26
Простые повторяющиеся прогулки............................ 27
Глава 4. Создание адаптивного .SVG.Sprite. ... 32
Спрайты SVG и CSS для адаптивности ........................ 33
Группировка и экспорт............................ 35
Советы по просмотру окна ............ 36
Адаптивная анимация........................ 37
Глава 5. Создание UI/UX-анимации без использования каких-либо дополнительных библиотек........... 39
Переключение контекста в шаблонах взаимодействия с пользователем... 39
Деформация........................................ 41
Показать........................................ 41
Изоляция .............................................. 42
Стиль........................................ 43
Ожидаемые подсказки .......... 45
Взаимодействие .............................................. 46
Экономия места ............................ 47
Резюме.... 48
Трансформированные значки........................ 48
Глава 6. Динамическая визуализация данных............ 55
Зачем использовать анимацию при визуализации данных .............. 56
Пример D3 с использованием CSS-анимации .......... 56
Пример чартиста с использованием CSS-анимации... 59
Анимация с помощью D3........... 61
Объединение в цепочки и повторение........................ 64
Глава 7. Конкурс технологий веб-анимации... 65
Нативная анимация............................. 65
CSS/Sass/SCSS.................... 65
requestAnimationFrame() .... 67
холст............................ 67
API веб-анимации ........... 68
Сторонние фреймворки ............................ 68
GreenSock(GSAP)...........68
mo.js................................................. 69
Bodymovin’ ........................ 70
Не используется ............................ 70
СМИЛ................................................70
Скорость.js........... 70
Snap.svg........... 71
Рабочий процесс анимации на основе React...........71
React-Motion ....................... 72
Использование GSAP в React.....73
Использование холста в React.......73
Использование CSS с React...........73
Резюме....74
Глава 8. Анимация с помощью GreenSock... 75
Базовый синтаксис GreenSock..........76
TweenMax/TweenLite .......... 76
.to/.from/.fromTo ................. 76
Потрясающе............................................ 77
элемент........................ 79
Продолжительность........................ 79
задержка.........................................79
Свойства анимации ............................ 79
смягчение.................................81
Глава 9. Временная шкала в GreenSock. ... 83
Простая временная шкала........... 83
Соответствующие метки ............................ 85
Основная временная шкала и вложенные сцены .......... 89
Логическая организация кода...........90
Петля ............................ 92
Паузы и события паузы .......... 94
Другие методы временной шкалы ...... 95
Глава 10 МорфСВГ. и анимация пути.. 98
МорфСВГ............................. 98
findShapeIndex() ................. 99
Анимация пути ............................ 101
Глава 11. Чересстрочные эффекты, текстовая анимация с помощью Tweening.HSL и SplitText...106
Чередованная анимация ............................ 106
Анимация цветового градиента HSL ............. 110
Сегментация текста........................ 114
Глава 12 DrawSVG и Draggable............................ 117
Перетаскиваемый............................... 117
тип перетаскивания........... 119
hitTest() ........................ 119
Использование Dragable для управления временной шкалой ........................ 120
DrawSVG............................ 122
Глава 13mo.js..........125
Базовое введение в mo.js ........................ 125
Графика.. 125
Движение фигур........................ 128
Связанные вызовы........................ 130
Вихревая анимация........... 131
Взрывное действие............................ 133
Инструмент управления временной шкалой .......... 134
Анимированная анимация........................ 135
Функции пути........................ 136
Вспомогательные инструменты, предоставляемые mo.js........... 137
Глава 14 React-Motion......140
<Motion /> ................................ 141
<StaggeredMotion /> ................. 146
Глава 15. Переезд“недвижимый”: использовать собственный JavaScript для реализации анимации путем изменения свойств....150
requestAnimationFrame() .......... 150
AttrPlugin GreenSock ........................ 155
Практическое применение: анимация viewBox....... 158
Еще одна презентация: управляемая инфографика........... 164
Глава 16. Адаптивная анимация...........165
Методы быстрого реагирования............................ 165
GreenSock и адаптивный SVG......... 165
Реализация адаптивного SVG без использования GreenSock .............. 169
Будьте отзывчивы, обновляя viewBox. 170
Адаптивность к нескольким SVG и медиа-запросам ........................ 173
Тратьте меньше энергии на мобильные устройства....176
Имейте план........................ 176
Глава 17 Принципы проектирования, прототипирования и анимации библиотеки компонентов...........177
Анимационный дизайн............................ 177
Учиться обрисовывать детали реальных движений............................ 178
Разумно контролировать использование анимации...........179
Уникальные дизайнерские идеи................................. 180
Повышение уровня развития............................ 181
Прототип конструкции ............................ 182
Пошаговая сегментация деталей анимации........... 182
Инструменты........................ 184
Убей свою любовь............................ 186
Рабочий процесс проектирования и кодирования.....187
Создание библиотеки компонентов анимации........... 187
Взвешивание приоритетов развития анимации ..... 190
Время – деньги................. 191
Прочие ограничения............ 193
Указатель................................................194
При создании эффектов веб-анимации использование SVG для создания анимации является одним из навыков, которыми нам следует овладеть.В этой книге подробно представлены базовые знания SVG, способы использования SVG для создания анимации, инструменты для создания SVG-анимации и соответствующие библиотеки JavaScript.Кроме того, в этой книге также рассматриваются некоторые очень интересные возможности SVG, такие как визуализация данных, масштабируемая векторная графика, адаптивный дизайн и т. д. Сара предоставила читателям очень хорошую книгу, которая может помочь читателям более систематически осваивать технические знания, связанные с созданием SVG и SVG-анимации.Если вы хотите освоить эту технологию, то эта книга стоит того, чтобы потратить время на ее чтение и изучение.
Сара Драснер — отмеченный наградами евангелист, консультант и технический специалист.Сара также является сооснователем Web Animation Studio и владеет компанией Val Head.Она получила звание старшего мастера интерфейса SVG-анимации и работала UX-дизайнером и менеджером в Truli (Zillow).Сара выиграла ряд наград, включая CSS Dev Conf.“хороший приз”и от CSS Design Awards“хороший спорщик по коду”.Имея 15-летний опыт работы веб-разработчиком и дизайнером, она также работала иллюстратором и профессором университета, а также преподавала византийский иконописец на Санторини.
Да Мо: основатель W3CPlus, сейчас работает в Taobao.Он обладает очень глубоким пониманием и богатым практическим опытом работы с языками сценариев внешнего интерфейса, такими как процессоры HTML5, CSS3 и CSS. Особое внимание он уделяет исследованию CSS3 и анимации. Он один из первых людей в Китае, которые исследовали и использовали CSS3 и процессорную технологию CSS.Сейчас я в основном изучаю технические знания, связанные с изучением JavaScript, React и Vue.CSS3, процессор CSS и евангелист Drupal в Китае.В 2014 году он опубликовал «Иллюстрированный CSS3: основные технологии и практические примеры».Цзян Тяньи: По прозвищу «99», он является экспертом в области разработки интерфейса Hema Fresh Products в Alibaba.В настоящее время он в основном отвечает за исследования и разработку продуктов Hema, связанных с визуализацией данных.Тянь Хуайжэнь: интерфейсный разработчик Tencent, автор проектов с открытым исходным кодом PWA и httplive.Я люблю делиться, у меня есть собственный блог: Villaininhr.com и общедоступная учетная запись: фронтенд-маленький Джимми.Иметь определенный технический опыт в области аудио- и видеотехнологий H5, прямой трансляции и P2P. Оуян Сянъюэ: Я программист, заканчиваю четвертый курс. Я проходил стажировку в Baidu и Tencent. Я очень люблю новые технологии и люблю делать что-то новое.Я надеюсь, что смогу продолжить узнавать больше интересных вещей в будущем.Длинное майское солнце. Сяочунь: руководитель фронт-энда Mobike, бывший руководитель публичного фронт-энда Didi. Выступал в качестве фронт-энд-продюсера конференции GIAC Global Internet Architecture Conference; написал 3 книги по интерфейсу, самая последняя: отечественная книга по Vue.js «Vue.js Authoritative Guide»;готов делиться, учиться и обмениваться опытом, участвовал в vueconf, SDCC 2016 China Software Developers Conference и т. д.
Веб-дизайнеры, изучающие анимацию и специалисты смежных областей.