Быстрее UI анимации с Velocity.js

С точки зрения дизайна движения, Facebook.com феноменально статическим.It’ ы целенаправленно упрощенных вниз для широких уровнях совместимости и удобства для пользователя.IOS приложения Facebook, с другой стороны, являются жидкости.Они приоритеты дизайн движения;они чувствуют, что живой, дышащий приложения .

Эта статья служит, чтобы продемонстрировать, что это разделение не должны существовать;веб-сайты могут извлечь выгоду из того же уровня интерактивной и производительной дизайна движения, найденной на мобильных приложений .

Перед погружением в примерах, let’ Первая в адрес почему движение дизайн очень выгодна:

Улучшение обратной связи loopsВ пользовательском интерфейсе и UX дизайнер, вы должны использовать шаблоны как можно больше, так как пользователи будут подсознательно ищет для них.Отзывчивый схемами движения, в частности, являются ключом к приятным взаимодействий: Когда кнопка была нажата, вы чувствуете, что он отреагировал на давление вашей мыши?Когда файл был сохранен, вы получите сильное чувство, что ваши данные действительно были переданы и хранится
Бесшовные содержание transitionsДизайн Motion позволяет избежать контекстные перерывы;модальности Плавное появление и исчезновение (в отличие от полностью переключения страниц) являются популярным примером этого .
Заполненный мертвых spotsКогда пользователи выполнении unengaging задачу на вашей странице, вы можете поднять свой уровень возбуждения через звук, цвета и движения.Отвлечение внимания пользователя является отличным способом, чтобы сделать халтурить быстрее .
Эстетическая flourishesДля тех же эстетических соображений, что дизайнеры UI проводят часы, совершенствуя их pages’ цветовые сочетания и шрифты, дизайнеры движения совершенствовать свои animations’ перехода и замедления комбинации: Нефтепродукты просто чувствовать себя выше .

В приведенных ниже примерах, we’ будем использовать Velocity.js ¹ — популярным анимация двигатель, который резко повышает скорость анимации интерфейса.(Velocity.js ведет себя идентично ~ 4 JQuery в | функции, в то время как опередив обе JQuery анимации и CSS анимации библиотеки.) В частности, эта статья фокусируется на Velocity.js “ pack ², которыйпозволяет быстро вводить движение дизайн на ваших страницах.Вы можете дополнительно смотреть __37 в данной статье | сопровождающих codecast ³ (5 минут) для предварительного просмотра, что мы рассмотрим .

UI обновления Overview

После включения блок интерфейса (только 1,8 KB ZIP’ed) на вашей странице, вы получите доступ к UI эффектов, которые организованы в две категории:

Callouts

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

Смотреть Pen Velocity.js – Пакет UI: Callout ⁴ Джулиан Шапиро ( @ julianshapiro ¹⁷ ¹⁴¹¹ ⁸ ⁵) на CodePen ¹⁸ ¹⁵ ¹² ⁹ ⁶ .

Transitions

Переходы эффекты, которые вызывают элемент появляться или из поля зрения.Каждый переход связан либо с “В” или “Out” направлении.Значение переходов в выявлении и скрывая содержание таким образом, что визуально богаче, чем просто анимация непрозрачность элемента.Вот slideUpIn, переход, который включает в себя тонкий эффект слайд:

Смотрите Velocity.js – Пакет UI: Transition ⁷ Джулиан Шапиро ( @ julianshapiro ¹⁷ ¹⁴¹¹ ⁸ ⁵) на CodePen ¹⁸ ¹⁵ ¹² ⁹ ⁶ .

Если вы обратили внимание на эволюции прошивкой “UI движение дизайн, вы заметили, что более десятка эффектов перехода помогут сделать интерфейс IOS “удовольствие взаимодействовать.Это разнообразие переходов, что пакет UI Velocity.js ‘приводит к повседневной сайтов .

Обратите внимание, что, благодаря производительности Velocity.js “, а также оптимизации предоставляемых пакетом интерфейса, все эффектов Pack являются 100% готовы к крупномасштабной производственной использования .

Давайте углубимся в некоторых простых примеров кода .

Помощью пользовательского интерфейса Pack

Условные обозначения и переходы ссылаются через первый параметр Velocity в: Перейдите в имени Н. Влияние вместо прохождения в стандартной карте собственности.Для сравнения, вот синтаксис normal Velocity.js вызова, который ведет себя идентично JQuery в $.animate():

$elements.velocity({ opacity: 0.5 });

В отличие от этого, ниже Velocity.js звонки с помощью эффектов из пакета интерфейса:

/* Shake an element. */
$elements.velocity("callout.shake");

/* Transition an element into view using slideUp. */
$elements.velocity("transition.slideUpIn");

Так же, как с обычными Velocity.js звонков, UI эффекты могут быть соединены друг на друга и могут принимать параметры:

/* Call the shake effect with a 2000ms duration, then slide the elements out of view. */
$elements
	.velocity("callout.shake", 2000)
	.velocity("transition.slideDownOut");

Эффекты от стаи UI опционально принимать три уникальные возможности: stagger, drag и backwards .

Stagger

Укажите stagger в миллисекундах последовательно задержать анимации каждого элемента в наборе на заданную величину.(Установка stagger значение предотвращает элементы из анимации параллельно, что имеет тенденцию не хватает элегантности.)

/* Animate elements into view with intermittent delays of 250ms. */
$divs.velocity("transition.slideLeftIn", { stagger: 250 });

Смотрите Pen Velocity.js – Пакет UI: Stagger ¹⁰ Джулиан Шапиро ( @ julianshapiro ¹⁷ ¹⁴¹¹ ⁸ ⁵) на CodePen ¹⁸ ¹⁵ ¹² ⁹ ⁶ .

Drag

Установка drag к true последовательно увеличивать продолжительность анимации каждого элемента в н …

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

Главная → Программирование → 18.06.2014 by coding.smashingmagazine.com