Як створювати анімації та переходи з інтерфейсом Motion
Анімації та переходи дозволяють дизайнерам візуалізувати зміни та диференціювати зміст. Анімації та переходи є рухомими ефектами допомогти користувачам розпізнати, коли щось змінюється на сайті, наприклад, вони натискають кнопку і на екрані з'являється нова інформація. Додавання руху до програм і веб-сайтів покращує роботу користувачів, оскільки це дозволяє користувачам зробити зміст змісту більш інтуїтивним способом.
Ми можемо створювати анімації і переходи або з нуля, або за допомогою бібліотек або фреймворків. Хороша новина для нас, людей із інтерфейсу, це те, що Zurb, творець фонду, відкритий у жовтні жовтня Motion UI, його анімаційна бібліотека та бібліотека переходів на базі Sass.
Спочатку він був укомплектований Foundation for Apps, і тепер для автономного релізу він отримав оновлення, включаючи система анімації і гнучкі шаблони CSS. Motion UI також керує деякими компонентами фреймворку Foundation, наприклад, повзунком Orbit, перемикачем Toggler і модальним Reveal, тому це досить надійний інструмент.
Починаємо
Хоча Motion UI є бібліотекою Sass, вам не обов'язково використовувати його з Sass, оскільки Zurb надає розробникам зручний стартовий комплект, який містить тільки скомпільований CSS. Ви можете завантажити його з домашньої сторінки Motion UI і швидко розпочати прототип за допомогою попередньо визначених класів CSS анімації та переходу..
Стартовий комплект містить не тільки UI руху, але й рамки Foundation, що означає, що ви можете використовувати сітку Foundation і всі інші функціональні можливості Foundation for Sites, якщо хочете.
Стартовий комплект також постачається з index.html файл, що дозволяє швидко протестувати фреймворк.
Якщо вам потрібні більш складні налаштування і ви бажаєте використати потужні Sass mixins від Motion UI, ви можете встановити повну версію, що містить джерело .scss файли з npm або Bower.
Документація Motion UI поки що наполовину запечена. Ви можете знайти його тут, на Github, або зробити свій внесок, якщо хочете.
Швидке прототипування
Щоб розпочати створення прототипів, можна редагувати index.html файл стартового набору або створити власний файл HTML. Ви можете побудувати макет за допомогою сітки Foundation, але Motion UI також можна використовувати як окрему бібліотеку без рамки Foundation.
Існує 3 основних типи попередньо визначених класів CSS у користувальницькому інтерфейсі Motion:
- Класи переходу - дозволяють додавати переходи, такі як ковзання, вицвітання та ефекти навішування до елемента HTML.
- Класи анімації - дозволяють використовувати різні ефекти струшування, ворушення і спінінг
- Класи модифікаторів - працюють разом з класами переходу та анімації, і вони дозволяють регулювати швидкість, час і затримку руху.
Побудова HTML
Найкраще в попередньо визначених класах CSS є те, що вони не можуть бути використані тільки як класи, але й як інші атрибути HTML. Наприклад, ви можете додайте їх до значення атрибут тег, або ви можете використовуйте їх у своїх власних звичаях дані- * атрибут так само.
У фрагменті коду нижче я вибрав цю останню опцію окремі класи поведінки та модифікатори. Я використав повільно і легкості модифікатор атрибутів як класів, і створений користувальницький анімація даних атрибут для масштабування перехід. The Натисніть на мене призначена для запуску ефекту.
Відтворення анімації та переходів з jQuery
UI Motion містить також невелику бібліотеку JavaScript, яка може відтворювати переходи та анімації, коли відбувається певна подія.
Саму бібліотеку можна знайти в стартовому наборі в motion-ui-starter> js> постачальник> motion-ui.js шлях.
Це створює a MotionUI об'єкт, що має два способи: animateIn () і animateOut (). Перехід або анімація, пов'язані з певним елементом HTML (
$ (function () $ (". button")) натисніть (функція () var $ animation = $ ("# boom"). data ("анімація"); MotionUI.animateIn ($ ("# boom")) , $ animation););); У наведеному вище фрагменті коду ми отримали доступ до анімація даних з використанням вбудованого jQuery дані () методом, потім називається animateIn () Метод MotionUI об'єкт.
Ось повний код і результат. Я використовував вбудовані клавіші фреймворду Foundation для Натисніть на мене і додав деякі базові CSS.
Так як користувальницький інтерфейс Motion є досить гнучким, ви також можете додавати та запускати переходи та анімації багатьма іншими способами.
Наприклад, у наведеному вище прикладі нам не обов'язково користуватися анімація даних користувальницький атрибут, але можна просто додати клас поведінки з addClass () jQuery метод до
$ ('# boom'). addClass ('масштабування'); Налаштування з Sass
Попередньо створені CSS-класи Motion UI використовують значення за замовчуванням, які можна легко налаштувати за допомогою Sass. За кожним переходом і анімацією є Sass mixin, що дозволяє змінювати налаштування ефекту. Таким чином можна легко створити повністю спеціальну анімацію або перехід.
Налаштування не буде працювати зі стартовим набором, проте вам потрібно встановити версію Sass, якщо ви хочете налаштувати ефекти відповідно до власних потреб.
Щоб налаштувати перехід або анімацію, спочатку вам потрібно знайти відповідний mixin. The _classes.scss Файл містить імена скомпільованих класів CSS з відповідними міксами.
У нашому прикладі ми використовували .масштабування атрибутом і, розглядаючи _classes.scss, ми можемо швидко з'ясувати, що він використовує mui-zoom mixin:
// Переходи @mixin motion-ui-transitions … // Масштабувати. Scale-in-up @ включити mui-zoom (в, 0,5, 1); …
UI руху використовує mui- префікс до mixins, і кожен мікс має свій власний файл. Користувальницький інтерфейс Motion має досить зрозумілі правила назв імен, тому ми можемо швидко знайти mui-zoom mixin в _zoom.scss файл:
@mixin mui-zoom ($ state: у, $ від: 1.5, $ до: 1, $ fade: map-get ($ motion-ui-settings, scale-and-fade), $ duration: null, $ timing: null, $ delay: null) …
Використовуючи ту ж саму методику, можна легко керувати кожною функцією анімації або переходу, змінюючи значення відповідних змінних Sass.
Налаштування класів модифікаторів
Класи модифікаторів, які керують поведінкою (швидкість, час і затримка) анімацій і переходів, також можна налаштувати за допомогою Sass, змінюючи значення відповідних змінних у _settings.scss файл.
Після внесення змін користувальницький інтерфейс руху буде використовувати нові значення як типові у кожній анімації та переході, тому вам не доведеться налаштовувати поєднані поєднання один за одним.
