Cómo crear animaciones y transiciones con Motion UI
Las animaciones y transiciones permiten a los diseñadores visualizar el cambio y diferenciar el contenido. Las animaciones y transiciones son efectos móviles que ayudar a los usuarios a reconocer cuando algo cambia en el sitio, por ejemplo, hacen clic en un botón y aparece una nueva información en la pantalla. Agregar movimiento a las aplicaciones y sitios web mejora la experiencia del usuario, ya que permite a los usuarios dar sentido al contenido de una manera más intuitiva.
Podemos crear animaciones y transiciones desde cero o mediante bibliotecas o marcos. Una buena noticia para nosotros, gente de frontend, es que Zurb, el creador de Foundation, la UI de código abierto de octubre pasado, su biblioteca de animación y transición basada en Sass..
Originalmente se incluía con Foundation for Apps, y ahora, para la versión independiente, se renovó, incluido un sistema de cola de animación y patrones flexibles de CSS. La interfaz de usuario de movimiento también alimenta algunos componentes del marco de Foundation, como el control deslizante Orbit, el conmutador Toggler y el modo Revelar, por lo que es una herramienta bastante robusta..
Empezando
Aunque Motion UI es una biblioteca de Sass, no necesariamente tiene que usarla con Sass, ya que Zurb proporciona a los desarrolladores un práctico kit de inicio que contiene solo el CSS compilado. Puede descargarlo desde la página de inicio de Motion UI y comenzar rápidamente a hacer prototipos utilizando las clases predefinidas de animación y transición CSS..
El kit de inicio no solo contiene la interfaz de usuario de movimiento, sino también el marco de Foundation, lo que significa que puede usar la cuadrícula de Foundation y todas las otras funcionalidades de Foundation for Sites si lo desea..
El kit de inicio también se envía con un index.html Archivo que te permite probar rápidamente el framework..
Si necesita ajustes más sofisticados y desea aprovechar los potentes mixins Sass de Motion UI, puede instalar la versión completa que contiene la fuente .scss archivos con npm o Bower.
La documentación de Motion UI está actualmente a medio hacer de cero. Puedes encontrarlo aquí en Github, o contribuir a él si quieres..
Prototipado rápido
Para iniciar la creación de prototipos, puede editar el index.html archivo del kit de inicio, o cree su propio archivo HTML. Puede crear el diseño utilizando la cuadrícula de Foundation, pero la UI de movimiento también se puede usar como una biblioteca independiente sin el marco de Foundation..
Hay 3 tipos principales de clases de CSS predefinidas en Motion UI:
- Clases de transición: permiten agregar transiciones, como efectos de deslizamiento, desvanecimiento y articulación a un elemento HTML.
- Clases de animación: le permiten utilizar diferentes efectos de sacudidas, movimientos y giros
- Clases modificadoras: trabajan juntas con las clases de transición y de animación, y te permiten ajustar la velocidad, el tiempo y el retraso de un movimiento.
Construyendo el HTML
Lo mejor de las clases predefinidas de CSS es que no solo pueden usarse como clases sino también como otros atributos HTML. Por ejemplo usted puede agregarlos a la valor atributo de la etiqueta, o tu puedes Úsalos en tu propia costumbre datos-* atributo también.
En el siguiente fragmento de código, elegí esta última opción para Clases separadas de comportamiento y modificador.. Usé el lento y facilitar modifica los atributos como clases, y crea un personalizado animación de datos atributo para el escalado en transición. los Haz click en mi botón está destinado a activar el efecto.
Reproducción de animaciones y transiciones con jQuery
La interfaz de usuario de movimiento incluye una pequeña biblioteca de JavaScript que puede reproducir transiciones y animaciones cuando ocurre un evento determinado.
La propia biblioteca se puede encontrar en el kit de inicio en el motion-ui-starter> js> vendedor> motion-ui.js camino.
Crea un MotionUI Objeto que tiene dos métodos: animateIn () y animateOut (). La transición o animación vinculada al elemento HTML particular (el
$ (function () $ (". button"). click (function () var $ animation = $ ("# boom"). data ("animation"); MotionUI.animateIn ($ ("# boom") , $ animación););); En el fragmento de código anterior, accedimos a la animación de datos atribuir mediante el uso de jQuery incorporado datos() método, entonces llamado animateIn () método de la MotionUI objeto.
Aquí está el código completo y el resultado. Utilicé las clases de botones incorporadas de Foundation Frameworks para Haz click en mi botón, y añadido algunos CSS básicos, así.
Como Motion UI es bastante flexible, también puede agregar y activar transiciones y animaciones de muchas otras formas..
Por ejemplo, en el ejemplo anterior no necesariamente necesitamos usar el animación de datos atributo personalizado, pero simplemente puede agregar la clase de comportamiento con el addClass () método jQuery para el
$ ('# boom'). addClass ('scale-in-up'); Personalización con Sass.
Las clases de CSS preestablecidas de Motion UI utilizan valores predeterminados que se pueden personalizar fácilmente con la ayuda de Sass. Hay una mezcla de Sass detrás de cada transición y animación, que hace posible cambiar la configuración del efecto. De esta manera puede crear fácilmente una animación o transición totalmente personalizada..
Sin embargo, la personalización no funcionará con el kit de inicio, debe instalar la versión Sass si desea configurar los efectos de acuerdo con sus propias necesidades.
Para personalizar una transición o animación, primero necesita encontrar el mixin relacionado. los _classes.scss archivo contiene los nombres de las clases CSS compiladas con los respectivos mixins.
En nuestro ejemplo usamos el .escalado en atributo, y echando un vistazo a _classes.scss, Podemos descubrir rápidamente que hace uso de la mui-zoom mezclar
// Transiciones @mixin motion-ui-transitions … // Escala .scale-in-up @include mui-zoom (in, 0.5, 1); …
Motion UI usa el mui- prefijo a mixins, y cada mixin tiene su propio archivo. La interfaz de usuario de movimiento tiene convenciones de nomenclatura bastante autoexplicativas, por lo que podemos encontrar rápidamente mui-zoom mezclando en el _zoom.scss expediente:
@mixin mui-zoom ($ state: in, $ from: 1.5, $ a: 1, $ fade: map-get ($ motion-ui-settings, scale-and-fade), $ duration: null, $ timing: nulo, $ retraso: nulo) …
Usando la misma técnica, puede controlar fácilmente cada característica de una animación o transición cambiando los valores de las variables Sass respectivas.
Configurando clases modificadoras
Las clases modificadoras que controlan el comportamiento (velocidad, sincronización y demora) de animaciones y transiciones también se pueden configurar con Sass al modificar los valores de las variables respectivas en el _settings.scss expediente.
Después de realizar sus cambios, Motion UI Usa los nuevos valores como predeterminados. en cada animación y transición, por lo que no tendrá que configurar los mixins relacionados uno por uno.
