Как создавать анимацию и переходы с помощью Motion UI
Анимации и переходы позволяют дизайнерам визуализировать изменения и дифференцировать контент. Анимации и переходы являются движущимися эффектами, которые помочь пользователям распознавать, когда что-то меняется например, на сайте они нажимают кнопку, и на экране появляется новая информация. Добавление движения в приложения и веб-сайты улучшает взаимодействие с пользователем, поскольку позволяет пользователям понять содержание более интуитивно понятным способом.
Мы можем создавать анимации и переходы либо с нуля, либо с помощью библиотек или фреймворков. Хорошие новости для нас, ребят из внешнего интерфейса, это то, что Zurb, создатель Foundation, в октябре прошлого года открыл интерфейс Motion с открытым исходным кодом, его анимацию и библиотеку переходов на основе Sass..
Первоначально он был в комплекте с Foundation for Apps, а теперь, для автономной версии, он получил обновление, включая система анимации а также гибкие шаблоны CSS. Интерфейс Motion также поддерживает некоторые компоненты платформы Foundation, такие как ползунок Orbit, переключатель Toggler и модальный режим Reveal, так что это довольно надежный инструмент.
Начиная
Хотя Motion UI - это библиотека Sass, вам не обязательно использовать ее с Sass, так как Zurb предоставляет разработчикам удобный стартовый набор, который содержит только скомпилированный CSS. Вы можете загрузить его с домашней страницы пользовательского интерфейса Motion и быстро приступить к созданию прототипа с помощью предопределенных классов CSS-анимации и переходов.
Стартовый набор содержит не только пользовательский интерфейс Motion, но и инфраструктуру Foundation, что означает, что вы можете использовать сетку Foundation и все другие функции Foundation для сайтов, если хотите.
Стартовый комплект также поставляется с index.html файл, позволяющий быстро протестировать фреймворк.
Если вам нужны более сложные настройки и вы хотите использовать мощные миксины Sass в Motion UI, вы можете установить полную версию с исходным кодом. .СКС файлы с npm или Bower.
Документация пользовательского интерфейса Motion в настоящее время еще не готова. Вы можете найти его здесь на Github или внести свой вклад, если хотите.
Быстрое прототипирование
Чтобы начать создание прототипа, вы можете отредактировать index.html файл стартового комплекта, или создайте свой собственный HTML-файл. Вы можете построить макет, используя сетку Foundation, но Motion UI также можно использовать как автономную библиотеку без платформы Foundation..
В пользовательском интерфейсе Motion есть 3 основных типа предопределенных классов CSS:
- Классы переходов - позволяют добавлять переходы, такие как эффекты скольжения, затухания и шарнирности, к элементу HTML.
- Анимационные классы - вы можете использовать различные эффекты встряхивания, покачивания и вращения
- Классы модификаторов - работают вместе с классами переходов и анимации, и они позволяют вам регулировать скорость, время и задержку движения.
Сборка HTML
Отличительной особенностью предопределенных классов CSS является то, что они могут использоваться не только как классы, но и как другие атрибуты HTML. Например, вы можете добавить их в значение атрибут тег, или вы можете используйте их по своему усмотрению данные-* атрибут также.
В приведенном ниже фрагменте кода я выбрал этот последний вариант отдельные классы поведения и модификаторов. Я использовал медленный а также легкость атрибуты модификаторов как классы, и создали пользовательские данные анимация атрибут для Шкала в вверх переход. Нажми на меня кнопка предназначена для запуска эффекта.
Воспроизведение анимации и переходов с помощью jQuery
Пользовательский интерфейс Motion также включает небольшую библиотеку JavaScript, которая может воспроизводить переходы и анимацию при наступлении определенного события..
Саму библиотеку можно найти в стартовом наборе в motion-ui-starter> js> vendor> motion-ui.js дорожка.
Это создает MotionUI объект, который имеет два метода: animateIn () а также animateOut (). Переход или анимация, связанные с конкретным элементом HTML (
$ (function () $ (". button"). click (function () var $ animation = $ ("# boom"). data ("animation"); MotionUI.animateIn ($ ("# boom") , $ animation););); В приведенном выше фрагменте кода мы получили доступ к данные анимация атрибут с помощью встроенного в JQuery данные() метод, затем называется animateIn () метод MotionUI объект.
Вот полный код и результат. Я использовал встроенные классы кнопок Foundation Framework для Нажми на меня кнопку, и добавил некоторые основные CSS, а также.
Поскольку Motion UI достаточно гибок, вы также можете добавлять и запускать переходы и анимацию многими другими способами..
Например, в приведенном выше примере нам не обязательно использовать данные анимация пользовательский атрибут, но можно просто добавить класс поведения с addClass () JQuery метод для
$ ( '# Бум') addClass ( 'масштаб-в-вверх').
Настройка с помощью Sass
Готовые CSS-классы пользовательского интерфейса Motion используют значения по умолчанию, которые можно легко настроить с помощью Sass. За каждым переходом и анимацией стоит миксин Sass, что позволяет изменять настройки эффекта. Таким образом, вы можете легко создать полностью настраиваемую анимацию или переход.
Настройка не будет работать с начальным набором, вам нужно установить версию Sass, если вы хотите настроить эффекты в соответствии с вашими потребностями.
Чтобы настроить переход или анимацию, сначала вам нужно найти связанный миксин. _classes.scss файл содержит имена скомпилированных классов CSS с соответствующими миксинами.
В нашем примере мы использовали .Шкала в вверх атрибут, и, посмотрев на _classes.scss, мы можем быстро выяснить, что он использует MUI-зум Mixin:
// Transitions @mixin motion-ui-transitions … // Scale .scale-in-up @include mui-zoom (in, 0.5, 1); …
Пользовательский интерфейс Motion использует MUI- префикс к mixins, и каждый mixin имеет свой собственный файл. Пользовательский интерфейс Motion имеет довольно понятные соглашения об именах, поэтому мы можем быстро найти MUI-зум Mixin в _zoom.scss файл:
@mixin mui-zoom ($ state: in, $ from: 1.5, $ to: 1, $ fade: map-get ($ motion-ui-settings, scale-and-fade), $ duration: ноль, $ хронометраж: null, $ delay: null) …
Используя ту же технику, вы можете легко управлять каждой функцией анимации или перехода, изменяя значения соответствующих переменных Sass..
Настройка классов-модификаторов
Классы модификаторов, которые управляют поведением (скоростью, временем и задержкой) анимаций и переходов, также можно настраивать с помощью Sass путем изменения значений соответствующих переменных в _settings.scss файл.
После внесения изменений пользовательский интерфейс Motion используйте новые значения по умолчанию в каждой анимации и переходе, так что вам не придется настраивать соответствующие миксины один за другим.
