После вспышки эра вряд ли бесплатно анимации.
CSS анимация быстро становится краеугольным камнем удобных интерфейсов для мобильных и настольных, и библиотеки JavaScript уже существуют для обработки сложных интерактивные анимации.В результате так много “CSS по сравнению с JavaScript анимации” борьбой, новый API специально для веб-анимации выходит, что, возможно, просто объединить оба лагеря .
Это захватывающее время для веб-анимации, а также время серьезной недопонимания и дезинформации.В 2014 году у меня была возможность путешествовать по миру, чтобы говорить о с помощью анимации в пользовательских интерфейсах и design 1 .Я встречался и взяли интервью у десятков людей, которые используют и чемпион как CSS и JavaScript.После опроса так много программистов, дизайнеров и представителей браузера, я обнаружил, техническая и человеческая история быть сказанным .
То, что вы собираетесь читать, чисто наблюдательный и максимально объективный счет, как вы сможете найти на тему веб-анимации .
Вспышка может нет, но эпоха веб-анимации только Begun
Начиная с эпохи Flash, это стало модно считать анимации не более чем украшение, в “кричащие” задним числом, часто в плохом вкусе, как нежелательное blink тегов.Но если мы не хотим, чтобы отобразить ничего другого, кроме копирования на экране, анимация по-прежнему очень много, наш друг .
Для пользовательский интерфейс designers, анимация усиливает иерархии, отношения, структуры и причину и следствие. Исследования возвращаясь к ранней ’90s 2 показывает, что анимация помогает людям понять, что происходит на экране.Анимация склеивает App состояния и разгружает, что работа по GPU — зрительная кора .
Для взаимодействия developers сложные визуальные — от инфографики на приборных панелей до видеоигр на таблетки — невозможно создать без анимации, чтобы склеить все части воедино.Если мы хотим, чтобы эти вещи в Интернете, мы по-прежнему нужна анимация .
К сожалению, мы отстали в движение дизайн гонке.Продукты, которые используют анимацию, чтобы принести пользу своим пользователям будет преуспеть там, где их статические или анимационные злоупотребляющих конкуренты не удастся.Как она стоит, родные приложения бьют штаны в Интернете.Разработчиков приложений были включения анимации в своих проектах и конкретизации рабочий процесс и прототипов инструменты, такие как Flinto 3 и Mitya 4 с первого дня .
Но все могло быть оборачиваясь.IOS “Safari команда вытеснили CSS анимации и переходов спецификации, так что веб-сайты могут выглядеть и чувствовать себя так же хорошо, как и приложения IOS.Даже Google подобрал на это, поставив анимации передние и center 5 в своих рекомендациях Материал дизайн, с тщательным делать, а чего нельзя делать, чтобы применить анимацию и переходы по значению, с целью .
Анимация естественный следующий шаг в эволюции нашего приложения и экосистемы устройств.Это делает цифровой мир более понятным и интересным для пользователей всех возрастов.И пока наши приборы спортивной графических, это не собирается уходить .
Анимация Все Things
По своей сути, анимация просто визуальное представление скорости изменения во времени и пространстве.Все анимация может быть дистиллированной на три типа:
Статический animation бежит от начальной точки до конечной точки, без ветвления или логики.Это может быть осуществляется с CSS alone 6 , как обилие CSS погрузки animations 7 свидетельствует .
Stateful animation В своей простейшей форме имеет логическое ввода — Нажмите, чтобы открыть меню и нажмите, чтобы закрыть it 8 , например — и оживляет между двумя государствами,В настоящее время это достигается в рамках JavaScript с применением и удаления классов с контекстными CSS анимации .
Dynamic animation может иметь множество исходов в зависимости от пользовательского ввода и других переменных.Он использует свою собственную логику для определения, как все должно оживить и каковы их конечные точки.Это может повлечь за собой “перетаскивания” страницу вслед за пальцем в зависимости от скорости вашего салфетки, или динамически меняется график новых данных входит. Это сложная вид анимации для достижения с помощью инструментов в нашем распоряжении на сегодняшний день.Одна УС не может быть использована для этого вида анимации .
Более Штаты = Dynamic Animation
Проницательный разработчик CSS может указывать на то, что, с достаточно государств, CSS анимация могнапоминают динамической анимации.Это верно в точку.Но по-настоящему динамичным анимация имеет больше конечные состояния, чем вы можете ожидать .
Только представьте себе скромный полоса загрузки.Имея различные классы для каждого процентного пункта “полноты” будет легко работать до ста строк CSS, не говоря уже о количестве раз, когда ваше JavaScript должен прикасаться к DOM для обновления классы и перерисовки браузера.Мы, безусловно, мог бы написать более производительную динамического загрузчика с только .
CSS анимация носит декларативный: Кроме горстки псевдо-классов, таких как :hover и :target, она принимает контекст, ни пользователь, ни окружения пользователя.Он делает только то, что ее автор рассказывает это делать и не может реагировать на новые входы или изменяющейся окружающей среды.Там нет никакого способа, чтобы создать CSS анимацию, которая говорит, “если вы находитесь в середине страницы, сделать это;В противном случае, что “CSS не содержит такого рода логики .
При CSS-первых разработчиков нуждаетесь в логике, они часто начинают с обзорного CSS государственным классов, с JavaScript работе с логику, когда применять какой класс.Структур, таких как AngularJS 9 поддержка Штатах и многих взаимодействий UI легко адаптироваться к горстке государств, как “Загрузка”, “Открыть” и “выбранной” Эти анимации также ухудшить изящно в старых браузерах., обеспечивая столь необходимый импульс UX, где CSS анимации и переходы поддерживаются .
Разработчики Взаимодействие имели различное время него.CSS анимация часто слишком декларативный для обработки вещи эти разработчики хотят построить.Платежные клиенты требуют надежного анимацию в широком распространении браузеров;Таким образом, многие разработчики взаимодействия и их студии сделали то, что все умные разработчики сделать: сделать трудосберегающие библиотеки настроены в их собственных процессов.Некоторые из этих библиотек, как GSAP 10 и Velocity 35 11 , доступны и разработаны для общественности.Но многие никогда не будет выпущен в дикой природе, потому что люди и учреждения, которые создали их, не имеют времени или денег (или будет) поддержать проект .__ 0 с открытым исходным кодом |
Это глубоко беспокоит история, которую я слышал снова и снова, и это показывает, что многие разработчики изобретать колесо, не двигаясь Интернет вперед.Существует не достаточный спрос на что-то считается “приятно иметь” для поддержки многих конкурентов.Это легко увидеть, как библиотеки GSAP должны быть коммерческими, чтобы выжить, или как спонсорство буй библиотеки как Velocity .
Флэш сделал большое дело, давая разработчикам взаимодействия и дизайнеров интерфейса универсальный рабочий процесс, который вмещает все виды анимации и платформу, на которой редактировать их.Но поскольку Стив Джобс объявил еще в 2010 году, что iPhone никогда не будет поддерживать Flash 12 многие бывшие разработчики Flash-спокойно ушел в изгнание, принимая свою нишу знания с ними.Теперь, целое поколение веб-дизайнеров пришла онлайн с относительно без знания возможностей и задач, стоящих перед при наращивает сложность анимации .
Но все собирается получить довольно … анимированный .
Веб-анимации API: Greatest An API Вы никогда не слышали Of
Веб-анимации API является спецификации W3C, что обеспечивает единый язык для CSS и SVG-анимации и открывает анимационный движок браузера для манипуляций разработчиков.Он делает следующее:
- Обеспечить API для анимации двигателя, что позволяет нам разработать более в браузере анимационные инструменты и позволяя анимации библиотеки нажмите на прирост производительности;
- Дать (Отборочный) анимация свой собственный поток, избавиться от Jank;
- Поддержка paths 13 ;
- Обеспечиваем столб-анимации обратного вызова;
- Вновь вложенными и последовательность animations 14 что мы не видели с Flash;
- Позволяют пауза, воспроизведение, искать, реверс, замедлить или ускорить воспроизведение с временной dictionaries 15 и анимационный objects 16 .
Here’ сек только один пример того, что веб-анимации API может сделать это CSS в одиночку cannot 17 .
Смотрите Бег на веб-Animations API 18 Рэйчел Наборс ( @ rachelnabors 19 ) на CodePen 20 .
Support
Веб-анимации API был в течение двух лет в процессе становления, и его функции были прокатки в Chrome и Firefox nightlies в течение последних шести месяцев.Mozilla является главной движущей силой спецификации.Между тем, команда Chrome был приоритетности отгрузку особенности .
Microsoft имеет API “рассматриваемого” 21 для Internet Explorer.Яблоко, удивительно, также приняла ждать и наблюдать подход для Safari.И мы можем только фантазировать о том, когда API ударит те Web App двигателей, работающих на древних вилок с открытым исходным кодом browsers 22 .
Ранние которые хотят изучить API может попробовать polyfill для веб-анимация API 23 , которая заменяется Веб Анимации Next 24 буквально со дня на день (больше о polyfill и API можно найти на веб-сайт для полимеров project 25 ).Тем не менее, для браузеров, которые не поддерживают API, polyfill еще менее производительным, чем GSAP, действующий чемпион библиотек анимации JavaScript на основе.Таки …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров