Како креирати анимације и прелазе помоћу УИ покрета
Анимације и прелази омогућавају дизајнерима да визуализују промене и разликују садржај. Анимације и прелази су покретни ефекти помоћи корисницима да препознају када се нешто промени на сајту, на пример, кликну на дугме и на екрану се појави нова информација. Додавање кретања апликацијама и веб-локацијама побољшава корисничко искуство, као што омогућава корисницима смислити садржај на интуитивнији начин.
Можемо да креирамо анимације и прелазе или од нуле или користећи библиотеке или оквире. Добра вест за нас, људе у фронту, је да је Зурб, креатор Фондације, прошлог октобра отворени извор Мотион УИ, његова библиотека анимације и транзиције базирана на Сассу.
Првобитно је био повезан са Фоундатион фор Аппс, а сада је за самосталну верзију добио обнову, укључујући и систем за анимацију и флексибилни ЦСС обрасци. Мотион УИ такође покреће неке компоненте оквира Фоундатион, као што су Орбит клизач, Тогглер прекидач и Ревеал модал, тако да је прилично робустан алат.
Почетак
Иако је Мотион УИ библиотека Сасс-а, није неопходно да је користите са Сасс-ом, јер Зурб обезбеђује програмерима згодан стартер кит који садржи само компилирани ЦСС. Можете га преузети са почетне странице Мотион УИ-ја и брзо почети са прототипом помоћу унапред дефинисаних ЦСС анимација и прелазних класа.
Почетни комплет не садржи само УИ покрета, већ и Оквир Фондације, што значи да можете користити мрежу Фондације и све друге функционалности Фондације за локације ако желите.
Почетни комплет се такође испоручује са индек.хтмл датотеку која вам омогућава брзо тестирање оквира.
Ако вам треба софистициранија подешавања и желите да искористите моћне Сасс микине за Мотион УИ, можете инсталирати пуну верзију која садржи извор .сцсс датотека са нпм или Бовер.
Документација Мотион УИ-а је још увек полупечена. Можете га пронаћи овдје на Гитхуб-у, или допринијети ако желите.
Куицк Прототипинг
Да бисте започели израду прототипова, можете уредити индек.хтмл датотеку почетног комплета или креирајте сопствени ХТМЛ фајл. Можете изградити распоред користећи решетку Фондације, али Мотион УИ се може користити и као самостална библиотека без оквира Фондације.
Постоје 3 главне врсте унапред дефинисаних ЦСС класа у Мотион УИ:
- Класе прелаза - омогућавају додавање прелаза, као што су клизање, бледи и ефекти везивања у ХТМЛ елемент.
- Класе анимације - омогућују вам да користите различите ефекте трешње, мрдања и вртње
- Класе модификатора - раде заједно са прелазним и анимационим часовима, и омогућују вам да подесите брзину, време и кашњење кретања.
Изградња ХТМЛ-а
Добра ствар код предефинисаних ЦСС класа је да се не могу користити само као класе, већ и као други атрибути ХТМЛ-а. На пример, можете додајте их у вредност атрибут таг, или можете користите их у сопственим обичајима дата- * аттрибуте такође.
У одломку кода испод сам изабрао ову другу опцију одвојене класе понашања и модификатора. Користио сам спор и ублажити, лакоца атрибути модификатора као класе и креирали су обичај анимација података атрибут за скала-у-горе прелаз. Тхе Кликни ме дугме има за циљ да активира ефекат.
Играње анимација и транзиција са јКуери
УИ Мотион садржи и малу ЈаваСцрипт библиотеку која може да репродукује прелазе и анимације када се догоди одређени догађај.
Сама библиотека може се наћи у почетном комплету у мотион-уи-стартер> јс> продавец> мотион-уи.јс путања.
То ствара а МотионУИ објекат који има две методе: аниматеИн () и аниматеОут (). Прелаз или анимација везана за одређени ХТМЛ елемент (
$ (фунцтион () $ (". буттон")) кликните (фунцтион () вар $ аниматион = $ ("# боом"). дата ("анимација"); МотионУИ.аниматеИн ($ ("# боом")) , $ анимација););); У исјечку кода изнад, приступили смо анимација података атрибут помоћу уграђеног јКуери-а дата () методом, онда се зове аниматеИн () метода МотионУИ објекат.
Ево пуне шифре и резултата. Користио сам уграђене класе тастера у оквиру Фондације за Кликни ме и додали неке основне ЦСС.
Како је Мотион УИ доста флексибилан, можете додати и активирати прелазе и анимације на многе друге начине.
На пример, у горе наведеном примеру не морамо нужно да користимо анимација података прилагођени атрибут, али може једноставно додати класу понашања са аддЦласс () јКуери метода
$ ('# боом'). аддЦласс ('сцале-ин-уп'); Прилагођавање са Сасс-ом
Унапред направљене ЦСС класе Мотион УИ-а користе подразумеване вредности које се могу лако прилагодити уз помоћ Сасс-а. Испод сваке транзиције и анимације налази се Сасс микин, који омогућава промјену поставки ефекта. На овај начин можете лако да креирате потпуно прилагођену анимацију или транзицију.
Прилагођавање неће радити са почетним комплетом, потребно је да инсталирате Сасс верзију ако желите да конфигуришете ефекте у складу са вашим потребама..
Да бисте прилагодили прелаз или анимацију, прво морате пронађите повезани микин. Тхе _цлассес.сцсс фајл садржи имена компилираних ЦСС класа са одговарајућим микинима.
У нашем примеру користили смо .скала-у-горе атрибут, и ако погледате _цлассес.сцсс, можемо брзо сазнати да се користи муи-зум микин:
// Транситионс @микин мотион-уи-транситионс … // Скали. Сцале-ин-уп @инцлуде муи-зоом (ин, 0.5, 1); …
Мотион УИ користи муи- префикс за микинс и сваки микин има свој фајл. УИ Мотион има прилично разумљиве конвенције именовања, тако да можемо брзо пронаћи муи-зум микин ин тхе _зоом.сцсс филе:
@микин муи-зоом ($ стате: ин, $ фром: 1.5, $ то: 1, $ фаде: мап-гет ($ мотион-уи-сеттингс, сцале-анд-фаде), $ дуратион: нулл, $ тиминг: нулл, $ делаи: нулл) …
Користећи исту технику можете лако контролисати сваку особину анимације или транзиције промјеном вриједности одговарајућих Сасс варијабли.
Конфигурисање класе модификатора
Класе модификатора које контролишу понашање (брзину, време и кашњење) анимација и прелаза такође се могу конфигурисати са Сасс модификовањем вредности одговарајућих променљивих у _сеттингс.сцсс филе.
Након што унесете измене, УИ покрета ће користите нове вредности као подразумеване у свакој анимацији и транзицији, тако да нећете морати да конфигуришете повезане микине један по један.
