Come creare animazioni e transizioni con l'interfaccia utente di Motion

Le animazioni e le transizioni consentono ai progettisti di visualizzare i cambiamenti e differenziare i contenuti. Le animazioni e le transizioni sono effetti in movimento aiuta gli utenti a riconoscere quando qualcosa cambia sul sito, ad esempio, fanno clic su un pulsante e una nuova informazione appare sullo schermo. L'aggiunta di movimento a app e siti Web migliora l'esperienza dell'utente, in quanto consente agli utenti di dare un senso al contenuto in un modo più intuitivo.

Possiamo creare animazioni e transizioni da zero o utilizzando librerie o framework. Buone notizie per noi, gente del frontend, è Zurb, il creatore della Fondazione, lo scorso ottobre Motion UI open source, la sua libreria di animazione e transizione basata su Sass.

Originariamente era in bundle con Foundation for Apps e ora, per la versione standalone, ha ottenuto un rinnovamento, tra cui un sistema di accodamento di animazione e modelli CSS flessibili. Motion UI abilita anche alcuni componenti del framework Foundation, come il cursore Orbit, il commutatore Toggler e il modal Reveal, quindi è uno strumento abbastanza robusto.

Iniziare

Sebbene Motion UI sia una libreria Sass, non devi necessariamente usarlo con Sass, poiché Zurb fornisce agli sviluppatori un pratico kit di avvio che contiene solo il CSS compilato. Puoi scaricarlo dalla home page di Motion UI e avviare rapidamente il prototipo utilizzando le animazioni CSS e le classi di transizione predefinite.

Lo starter kit non contiene solo l'interfaccia utente Motion, ma anche il framework Foundation, il che significa che puoi utilizzare la griglia Foundation e tutte le altre funzionalità di Foundation for Sites se vuoi.

Lo starter kit viene anche spedito con un index.html file che consente di testare rapidamente il framework.

Se hai bisogno di aggiustamenti più sofisticati e vuoi sfruttare la potenza dei potenti mixin di Motion UI, puoi installare la versione completa contenente la fonte .SCSS file con npm o Bower.

La documentazione di Motion UI è attualmente ancora parzialmente cotta. Puoi trovarlo qui su Github, o contribuire ad esso se vuoi.

Prototipazione rapida

Per iniziare la prototipazione, puoi modificare il index.html file del kit di partenza o crea il tuo file HTML. È possibile creare il layout utilizzando la griglia Foundation, ma l'interfaccia utente Motion può anche essere utilizzata come libreria autonoma senza il framework Foundation.

Ci sono 3 tipi principali di classi CSS predefinite nell'interfaccia utente di Motion:

1. Classi di transizione: consente di aggiungere transizioni, come effetti di scorrimento, dissolvenza e incernieramento a un elemento HTML.
2. Classi di animazione: consentono di utilizzare diversi effetti di scuotimento, agitazione e rotazione
3. Modifier Classes: funzionano insieme alle classi di transizione e di animazione e consentono di regolare la velocità, i tempi e il ritardo di un movimento.

Costruire l'HTML

Il bello delle classi CSS predefinite è che possono essere utilizzate non solo come classi ma anche come altri attributi HTML. Ad esempio puoi aggiungili al valore attributo del etichetta, o puoi usali nella tua abitudine dati-* attributo anche.

Nello snippet di codice qui sotto ho scelto quest'ultima opzione per classi separate di comportamento e modificatore. Ho usato il lento e alleviare attributi del modificatore come classi e creato una personalizzazione Dati-animation attributo per il scala-a-up transizione. Il Cliccami il pulsante ha lo scopo di attivare l'effetto.

 
 Cliccami  

Riproduzione di animazioni e transizioni con jQuery

Motion UI include anche una piccola libreria JavaScript in grado di riprodurre transizioni e animazioni quando si verifica un determinato evento.

La libreria stessa può essere trovata nel kit di partenza nel motion-ui-starter> js> vendor> motion-ui.js sentiero.

Crea a MotionUI oggetto che ha due metodi: animateIn () e animateOut (). La transizione o l'animazione legata al particolare elemento HTML (il tag nel nostro esempio) può essere attivato con jQuery nel seguente modo:

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

Nel frammento di codice sopra, abbiamo avuto accesso a Dati-animation attributo utilizzando il built-in di jQuery dati() metodo, quindi chiamato il animateIn () metodo del MotionUI oggetto.

Ecco il codice completo e il risultato. Ho utilizzato le classi di pulsanti predefinite di Framework framework per Cliccami pulsante e ha aggiunto anche alcuni CSS di base.

Poiché Motion UI è abbastanza flessibile, puoi anche aggiungere e attivare transizioni e animazioni in molti altri modi.

Per esempio nell'esempio sopra non abbiamo necessariamente bisogno di usare il Dati-animation attributo personalizzato, ma può semplicemente aggiungere la classe di comportamento con il addClass () metodo jQuery al elemento nel modo seguente:

 $ ( '# Boom') addClass ( 'scala-in-up.');

Personalizzazione con Sass

Le classi CSS predefinite di Motion UI utilizzano valori predefiniti che possono essere facilmente personalizzati con l'aiuto di Sass. C'è un mix di Sass dietro ogni transizione e animazione, che rende possibile modificare le impostazioni dell'effetto. In questo modo puoi facilmente creare un'animazione o una transizione completamente personalizzata.

Tuttavia, la personalizzazione non funzionerà con il kit di partenza, è necessario installare la versione Sass se si desidera configurare gli effetti in base alle proprie esigenze.

Per personalizzare una transizione o un'animazione, in un primo momento è necessario trova il mixin correlato. Il _classes.scss il file contiene i nomi delle classi CSS compilate con i rispettivi mixin.

Nel nostro esempio abbiamo usato il .scala-a-up attributo e dando un'occhiata a _classes.scss, possiamo scoprire rapidamente che fa uso del mui-zoom mixin:

 // Transitions @mixin motion-ui-transitions ... // Scale .scale-in-up @include mui-zoom (in, 0.5, 1);  ...

Motion UI utilizza il mui- prefisso ai mixin e ogni mixin ha il proprio file. L'interfaccia utente Motion ha delle convenzioni di denominazione abbastanza intuitive, in modo che possiamo trovare rapidamente mui-zoom mescolare nel _zoom.scss file:

 @mixin mui-zoom ($ stato: in, $ da: 1.5, $ a: 1, $ fade: map-get ($ motion-ui-settings, scale-and-fade), $ duration: null, $ timing: null, $ delay: null) ...

Usando la stessa tecnica puoi facilmente controllare ogni caratteristica di un'animazione o transizione modificando i valori delle rispettive variabili Sass.

Configurazione delle classi di modifica

Le classi modificatore che controllano il comportamento (velocità, temporizzazione e ritardo) di animazioni e transizioni sono anche configurabili con Sass modificando i valori delle rispettive variabili nel _settings.scss file.

Dopo aver apportato le modifiche, verrà visualizzata l'interfaccia utente di Motion usa i nuovi valori come predefiniti in ogni animazione e transizione, quindi non dovrai configurare i relativi mixin uno per uno.