Как создавать анимацию и переходы с помощью Motion UI

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Первоначально он был в комплекте с Фонд для приложенийи теперь, для отдельного релиза получил реконструкцию, включая систему организации анимации и гибкие шаблоны CSS. Motion UI также полномочия некоторые компоненты основы Фонда, такие как Orbit ползунок, Toggler переключатель и Раскрыть модальный, так что это довольно надежный инструмент.

Начиная

Хотя Motion UI – это библиотека Sass, вам не обязательно использовать ее с Sass, поскольку Zurb предоставляет разработчикам удобный стартовый набор, который содержит только скомпилированный CSS. Вы можете скачать его с Motion UI домашняя страницаи быстро приступить к созданию прототипа с помощью предопределенных классов CSS-анимации и переходов.

Стартовый набор содержит не только пользовательский интерфейс Motion, но и платформу Foundation, что означает, что вы можете использовать сетку Foundation и все другие функции Фонд для сайтов Если хочешь.

Стартовый комплект также поставляется с файлом index.html, который позволяет быстро протестировать среду.
Стартовый комплектЕсли вам нужны более сложные настройки и вы хотите использовать мощные миксины Sass в Motion UI, вы можете установить полную версию, содержащую исходные файлы .scss, с нпм или бауэр,

Документация Motion UI в настоящее время еще не готова. Вы можете найти это Вот на Github или внесите свой вклад, если хотите.

Быстрое прототипирование

Чтобы начать создание прототипа, вы можете отредактировать файл index.html начального набора или создать собственный HTML-файл. Вы можете построить макет, используя Сетка фундамента, но пользовательский интерфейс Motion также можно использовать как автономную библиотеку без основы Foundation.

В пользовательском интерфейсе Motion есть 3 основных типа предопределенных CSS-классов:

  1. Переходные классы – сделать возможным добавление переходов, таких как эффекты скольжения, затухания и шарнирности, к элементу HTML.
  2. Анимационные классы – позволяют использовать различные эффекты встряхивания, покачивания и вращения
  3. Классы модификаторов – работать вместе с переходными и анимационными классами, и они позволяют вам регулировать скорость, время и задержку движения.

Список эффектов пользовательского интерфейса MotionСборка HTML
Отличительной особенностью предопределенных классов CSS является то, что они могут использоваться не только как классы, но и как другие атрибуты HTML. Например, вы можете добавить их в атрибут значения

В приведенном ниже фрагменте кода я выбрал этот последний вариант для разделения классов поведения и модификаторов. Я использовал атрибуты замедлителя замедления и простоты в качестве классов и создал собственный атрибут анимации данных для перехода с масштабированием вверх-вверх. Кнопка «Нажми меня» предназначена для запуска эффекта.

https://www.hongkiat.com/#

Воспроизведение анимации и переходов с помощью jQuery
Интерфейс Motion включает в себя небольшой Библиотека JavaScript а также может воспроизводить переходы и анимацию, когда происходит определенное событие.

Саму библиотеку можно найти в стартовом наборе по пути motion-ui-starter> js> vendor> motion-ui.js.

Он создает объект MotionUI, который имеет два метода: animateIn () и animateOut (). Переход или анимация, связанные с конкретным элементом HTML ( тег в нашем примере) может быть запущен с помощью jQuery следующим образом:

$ (function () {

 $ (“. button”). click (function () {

  var $ animation = $ (“# boom”). data (“animation”);

  MotionUI.animateIn ($ (“# boom”), $ animation);

 });

});
В приведенном выше фрагменте кода мы получили доступ к атрибуту data-animation с помощью встроенного в jQuery данные() затем вызывается метод animateIn () объекта MotionUI.

Вот полный код и результат. Я использовал встроенные в Foundation Framework классы кнопок для кнопки Click me, а также добавил несколько основных CSS.

Увидеть перо Простой масштабируемый переход с пользовательским интерфейсом Zurb’s Motion Анна Монус (@amonus) на CodePen,

Поскольку Motion UI довольно гибок, вы также можете добавлять и запускать переходы и анимацию многими другими способами.

Например, в приведенном выше примере нам не обязательно использовать пользовательский атрибут data-animation, но мы можем просто добавить класс поведения с помощью addClass () JQuery метод для Элемент следующим образом:

$ ( ‘# Бум’) addClass ( ‘масштаб-в-вверх’).

Настройка с помощью Sass

Готовые CSS-классы пользовательского интерфейса Motion используют значения по умолчанию, которые можно легко настроить с помощью пререкаться, Eсть Sass Mixin за каждым переходом и анимацией, что позволяет изменить настройки эффекта. Таким образом, вы можете легко создать полностью настраиваемую анимацию или переход.

Настройка не будет работать со стартовым комплектом, вам нужно установить Версия Sass если вы хотите настроить эффекты в соответствии с вашими потребностями.

Чтобы настроить переход или анимацию, сначала вам нужно найти соответствующий миксин. _classes.scss Файл содержит имена скомпилированных классов CSS с соответствующими миксинами.

В нашем примере мы использовали атрибут .scale-in-up и, взглянув на _classes.scss, мы можем быстро выяснить, что он использует миксин mui-zoom:

// Переходы
@mixin motion-ui-переходы {
 
 …

 // Шкала
 .scale-in-up {@include mui-zoom (in, 0.5, 1); }

 …
}
Motion UI использует смешанный префикс для mixins, и каждый mixin имеет свой собственный файл. Пользовательский интерфейс Motion имеет довольно понятные соглашения об именах, поэтому мы можем быстро найти миксины mui-zoom в _zoom.scss файл:

@mixin mui-zoom (
  $ состояние: в,
  $ от: 1,5,
  $ к: 1,
  $ fade: map-get ($ motion-ui-settings, scale-and-fade),
  $ длительность: ноль,
  $ хронометраж: ноль,
  $ delay: null
) {…}
Используя ту же технику, вы можете легко управлять каждой функцией анимации или перехода, изменяя значения соответствующих переменных Sass.

Настройка классов-модификаторов

Классы модификаторов которые управляют поведением (скоростью, временем и задержкой) анимаций и переходов, также можно настроить с помощью Sass путем изменения значений соответствующих переменных в _settings.scss файл.

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *