Анимация и переходы с Motion UI

Анимация и переходы с Motion UI

Анимация и переходы с Motion UI

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

Мы можем создавать анимацию и переходы либо с нуля, либо с помощью библиотек или Фреймворков. Хорошие новости в том, что у Zurb, создателей Foundation, есть Motion UI, имеющий открытый исходный код, с анимацией и библиотекой переходов, основанных на Sass.

Анимация и переходы с Motion UI

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

 

Начало

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

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

Стартовый комплект также поставляется с файлом index.html, что позволяет быстро проверить структуру.

Если вам нужны более сложные корректировки и вам нужны мощные рычаги Mixins Sass Motion UI, вы можете установить полную версию, содержащую исходный .scss файл с npm или Bower.

Документация Motion UI в настоящее время еще полусырая. Вы можете найти ее здесь на Github.

 

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

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

Есть 3 основных типа предопределенных классов CSS в Motion UI:

Transition Classes — позволяют добавлять переходы, такие как скольжение, замирание и шарнирные эффекты к элементу HTML.

Animation Classes — позволяют использовать различные тряски, виляния и спиннинг эффекты.

Modifier Classes — работают вместе с обоими вышеперечисленными классами, и позволяют регулировать скорость, сроки, а также задержку движения.

effect-list

Создание HTML

Большая вещь в заранее определенных классах CSS то, что они могут быть использованы не только в качестве классов, но и как атрибуты другого HTML. Например, вы можете добавить их к value (значению) атрибута тега <option>, или вы можете использовать их в своем собственном пользовательском атрибуте data-*.

В фрагменте кода ниже мы возьмем последний вариант для отдельного поведения и модификаторов классов. Мы используем атрибуты модификаторов slow и ease, как классы, и создадим атрибут data-animation с scale-in-up для перехода. Кнопка “Нажми на меня” предназначена для запуска эффекта.

<div class="transitions">
 
  <button type="button">Нажми на меня</button>
   
  <img id="boom" data-animation="scale-in-up"
  class="slow ease" src="#" alt="#">
  
</div>

Воспроизведение анимации и переходов с JQuery

Motion UI включает в себя небольшую библиотеку JavaScript, и может играть с переходами и анимациями, когда происходит определенное действие.

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

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

$(function() {
 
 $(".button").click(function() {
 
  var $animation = $("#boom").data("animation");
 
  MotionUI.animateIn($("#boom"), $animation);
 
 });
 
});

В фрагменте кода выше, мы получили доступ к data-animation с помощью метода animateIn, путем встраивания в data-animation.

Вот полный код и результат. Я использовал Фреймворк Foundation, встроенные классы для кнопки “Нажми на меня”, и добавил некоторые основные CSS.

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

Например, в приведенном выше примере не обязательно использовать атрибут data-animation, можно просто добавить класс поведения addClass () к элементу <img id=»boom»> следующим образом:

$('#boom').addClass('scale-in-up');
Aliexpress INTAliexpress INTAliexpress INT

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

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