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