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

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

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

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

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

В приведенных ниже примерах, we’ будем использовать Velocity.js __27 | | 1__26 __30 — | популярная анимация двигатель, который резко повышает скорость анимации интерфейса.(Velocity.js ведет себя идентично ~ 4 JQuery в функции |, в то время как оба опережая JQuery анимации и CSS анимации библиотеки.) В частности, эта статья фокусируется на Velocity.js ‘ pack __33 | | 2__26 , которыйпозволяет быстро вводить движение дизайн на ваших страницах.Дополнительно, вы можете посмотреть __37 в данной статье | сопровождающих codecast __39 | | 3__26 (5 минут) для предварительного просмотра, что мы рассмотрим .

Интерфейс обновления Overview

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

Callouts

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

Смотреть Ручка Velocity.js – Пакет интерфейса: Callout ⁴ Джулиан Шапиро ( @ julianshapiro ¹⁷ ¹⁴¹¹ ⁸ ⁵) на CodePen __32 | 18 ¹⁵ ¹² ⁹ ⁶ .

Transitions

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

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

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

Обратите внимание, что, благодаря производительности Velocity.js ‘, а также оптимизации предоставляемых по упаковке пользовательского интерфейса, все эффекты стаи являются на 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 });

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

Drag

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

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

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