После вспышки эра вряд ли бесплатно анимации.

CSS анимация быстро становится краеугольным камнем удобных интерфейсов в мобильных и настольных, и библиотеки JavaScript, уже существуют для обработки сложных интерактивные анимации.В результате так много “CSS против JavaScript анимации” распрей, новый API специально для веб-анимации выходит, что, возможно, просто объединить оба лагеря .

Это захватывающее время для веб-анимации, а также время серьезной недопонимания и дезинформации.В 2014 году я имел возможность путешествовать по миру, чтобы говорить о использованием анимации в пользовательских интерфейсах и design ¹ .Я встречался и взяли интервью у десятков людей, которые используют и ратующих как CSS и JavaScript.После интервью так много программистов, дизайнеров и представителей браузера, я обнаружил, техническая и человеческая история быть сказанным .

То, что вы собираетесь читать, чисто наблюдательный и, как беспристрастный счет, как вы сможете найти на веб-субъекта анимации .

Вспышка может нет, но эра Web Анимация только Begun

Начиная с эпохи Flash, это стало модно думать анимации, как немного больше, чем украшение, в “кричащие” задним числом, часто в плохом вкусе, как нежелательное blink тегов.Но если мы не хотим, чтобы отобразить иное скопировать на экране, анимация по-прежнему очень много, наш друг .

Для пользовательский интерфейс designers анимация усиливает иерархии, отношения, структуры, и причину и следствие. Исследования возвращаясь к ранней ’90s __21 | 2 показывает, что анимация помогает людям понять, что происходит на экране.Анимация склеивает приложение государств и разгружает эту работу на GPU — зрительная кора .

Для взаимодействия developers сложные визуальные — от инфографики на приборных панелей до видеоигр на таблетки — невозможно создать без анимации, чтобы склеить все части воедино.Если мы хотим, чтобы эти вещи в Интернете, мы по-прежнему нужна анимация .

К сожалению, мы отстали в разработке движения гонки.Продукты, использующие анимацию в пользу своих пользователей будет преуспеть там, где их статические или анимационные злоупотребляющих конкуренты не будет.Как она стоит, родные приложения бьют штаны в Интернете.Разработчиков приложений были включения анимации в своих проектах и ​​конкретизации рабочий процесс и прототипов инструменты, как Flinto __33 | 3 | __8 и Mitya __39 | 4 с первого дня .

Но все может быть оборачиваясь.Сафари команда IOS “вытеснили CSS анимации и переходов спецификации, так что веб-сайты могут выглядеть и чувствовать себя так хорошо, как сделать приложения IOS.Даже Google подобрал на это, положить анимации фронт и center ⁵ в своих рекомендациях Материал дизайн, с осторожным делать, а чего нельзя делать, чтобы применить анимацию и переходы по значению, с целью .

Анимация естественный следующий шаг в эволюции нашего приложения и экосистемы устройств.Это делает цифровой мир более понятным и интересным для пользователей всех возрастов.И так долго, как наш устройства спорта графических, это не собирается уходить .

Анимация Все Things

По своей сути, анимация просто визуальное представление скорости изменения во времени и пространстве.Все анимация может быть переработаны в трех типов:

Статический animation бежит от начальной точки до конечной точки, без ветвления или логики.Это может быть осуществляется с CSS alone __20 | 6 , как обилие CSS погрузки animations __26 | 7 свидетельствует .

Stateful animation В своей простейшей форме имеет логическое входной — нажмите, чтобы открыть меню и нажмите, чтобы закрыть it ⁸ , например — и оживляет между двумя государствами,В настоящее время это достигается в рамках JavaScript с применением и удаления классов с контекстными CSS анимации .

Динамическая animation может иметь множество исходов в зависимости от пользовательского ввода и других переменных.Он использует свою собственную логику, чтобы определить, как вещи должны оживить и то, что их конечные точки.Это может повлечь за собой “перетаскивания” страницу вслед за пальцем в зависимости от скорости вашего салфетки, или динамически меняется график, как новые данные входит. Это сложная вид анимации достичь с инструментами в нашем распоряжении на сегодняшний день.Одна УС не может быть использована для этого вида анимации .

! Подробнее Штаты = Динамический Animation

Проницательный разработчик CSS может указывать на то, что, с достаточно государств, CSS анимация может напоминать динамической анимации.Это верно в точку.Но по-настоящему динамичным анимация имеет больше конечные состояния, чем вы можете ожидать .

Только представьте себе скромную загрузки бар.Имея другой класс для каждого процентного пункта “полноты” будет легко работать до ста строк CSS, не говоря уже о сколько раз ваш JavaScript должен касаться DOM для обновления классы и перерисовки браузера.Мы, безусловно, мог бы написать более производительную динамический загрузчик с только .

CSS анимации декларативно: Помимо горстки псевдо-классов, таких как :hover и :target, он принимает контекст ни от пользователя, ни окружения пользователя.Это делает только то, что ее автор рассказывает это делать и не может реагировать на новые входы или изменяющейся окружающей среде.Там нет никакого способа, чтобы создать CSS анимации, который говорит: “Если вы находитесь в середине страницы, сделать это;в противном случае, сделать это “УС не содержит такого рода логики .

При CSS-разработчики должны сначала логику, они часто начинают с обзорного CSS государственным классов, с JavaScript обращении логику, когда применять какой класс.Каркасы таких как AngularJS __14 | | 9__13 государств поддержки, и многих взаимодействий UI легко адаптироваться к горстке государств, как “загрузка”, “открытым” и “выбранной” Эти анимации также ухудшить изящно в старых браузерах., обеспечивая столь необходимый импульс UX, где УС анимации и переходы поддерживаются .

Разработчики взаимодействия имели различное время него.CSS анимация часто слишком декларативный обрабатывать вещи эти разработчики хотят построить.Платежные клиенты требуют надежного анимации в широком распространении браузеров;так, многие разработчики взаимодействия и их студии сделали то, что все умные разработчики сделать: сделать трудосберегающие библиотеки индивидуальные для их собственных процессов.Некоторые из этих библиотек, как GSAP __25 | 10 | и __29 Velocity __31 | | 35__13 __17 ^{| | __36 11} | __17, доступны и разработаны для общественности.Но многие другие никогда не будет выпущен в дикой природе, потому что люди и учреждения, которые создали их, не имеют времени илиденьги (или будет), чтобы поддержать проект с открытым исходным кодом .

Это глубоко беспокоит история, которую я слышал снова и снова, и это говорит о том, что многие разработчики изобретать колесо без перемещения полотна вперед.Существует не достаточный спрос на что-то считается “приятно иметь”, чтобы поддержать много конкурентов.Это легко увидеть, как библиотеки GSAP должны быть коммерческими, чтобы выжить, или как спонсорство буй библиотеки как Velocity .

Флэш сделал большое дело, давая разработчикам и дизайнерам взаимодействия интерфейса универсальной документооборота, который вмещает все виды анимации и платформу, на которой их редактировать.Но так как Стив Джобс объявил еще в 2010 году, что iPhone никогда не будет поддерживать Flash __14 | | 12__13 , многие бывшие разработчики Flash-спокойно ушел в изгнание, принимая свою нишу знания с ними.Теперь, целое поколение веб-дизайнеров пришла онлайн с относительно без знания возможностей и проблем, с которыми мы сталкиваемся, когда наращивает сложность анимации .

• Обеспечить API для анимации двигателя, что позволяет нам разработать более в браузере анимационные инструменты и позволяя анимации библиотеки задействовать повышает производительность;
• Дать (Отборочный) анимация собственную тему, чтобы избавиться от Jank;
• Поддержка paths ¹³ ;
• Обеспечения пост-анимации обратного вызова;
• Вновь вложенными и последовательность animations ¹⁴ , что мы не видели, так как Flash;
• Позволяют сделать паузу, играть, искать, реверс, замедлить или ускорить воспроизведение с газораспределения | dictionaries__13 __55 | | 15__13 и Анимация игрок objects ¹⁶ .

| Here__75 сек только один пример того, что веб-анимации API может сделать это в одиночку CSS cannot __11 | 17 .

Смотрите Бег на веб-Animations API __19 | 18 Рэйчел Наборс ( @ rachelnabors ¹⁹ ) на CodePen __31 | 20 .

Support

Веб Анимация API был в течение двух лет в процессе становления, и его функции были прокатки в Chrome и Firefox nightlies в течение последних шести месяцев.Mozilla является главной движущей силой в спецификации.Между тем, команда хром был приоритетности отгрузку особенности .

Microsoft имеет API “рассматриваемого” ²¹ для Internet Explorer.Яблоко, удивительно, также приняла ждать и видеть подход к Safari.И мы можем только фантазировать о том, когда API, ударит те веб-приложение двигатели, работающие на древних вилок с открытым исходным кодом browsers __49 | 22 .

Ранние которые хотят изучить API может попробовать polyfill для веб-анимация API __57 | 23 , который заменяется Веб Анимации Next ²⁴ буквально в любой день (больше о polyfill и API можно найти на веб-сайт для полимеров project __69 | 25 ).Тем не менее, для браузеров, которые не поддерживают API, polyfill еще меньше, чем производительной GSAP, действующий чемпион библиотек анимации JavaScript-приложений.Таким образом, pol …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров