Las animaciones son una herramienta poderosa que puede mejorar la experiencia del usuario en un sitio web. Cuando se usan correctamente, pueden hacer que un sitio web sea más atractivo, interactivo e intuitivo. En este artículo, exploraremos la biblioteca de animaciones para SwifWeb.

Estoy hablando de la biblioteca animate.css más famosa. ¡Vamos a instalarlo y veamos cómo usarlo!

Instalación

Si es nuevo en SwifWeb, consulte cómo crear un nuevo proyecto en este artículo .

En el proyecto, abra Package.swift y edite la sección dependencies para que se vea así:

 dependencies: [ // the rest of the other dependencies including swifweb/web .package( url: "https://github.com/swifweb/animate", from: "1.0.0" ), ]

A continuación, edite executableTarget para que se vea así:

 .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Animate", package: "animate") ]),

Luego abra App.swift agregue import Animate y configúrelo en el método didFinishLaunching de esta manera:

 Lifecycle.didFinishLaunching { Animate.configure() }

Uso

Todas las clases de la biblioteca original están bajo el capó, y para los usuarios de SwiftWeb, está disponible una interfaz Swift muy conveniente y hermosa.

Tome cualquier elemento y agréguele una animación que se iniciará una vez que se agregue al DOM.

 @DOM override var body: DOM.Content { Img() .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg") .width(400.px) .animate(.jello) // <- here we added jello animation }

O tome cualquier elemento en la pantalla y agréguele una animación sobre la marcha:

 lazy var img = Img() @DOM override var body: DOM.Content { self.img .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg") .width(400.px) Button("Animate").onClick { self.img.animate(.jello) // <- here we animate } }

Además, puede establecer duration , delay y la configuración repeat .

 .animate(.jello, delay: 0, duration: 1, repeat: 0)

Todos estos parámetros son opcionales. Los valores se eliminarán automáticamente cuando finalice la animación.

Alternativamente, estas opciones se pueden configurar usando métodos separados:

 .animateDelay(0) .animateDuration(1) .animateRepeat(0)

Y también debe eliminar estos valores manualmente:

 .removeAnimateDelay() .removeAnimateDuration() .removeAnimateRepeat()

Hablemos más sobre cada opción.

Demora

Valores de conveniencia predefinidos:

 .delay0s // animation starts immediately .delay1s // adds a 1-second delay .delay2s // adds a 2-second delay .delay3s // adds a 3-second delay .delay4s // adds a 4-second delay .delay5s // adds a 5-second delay

Cree su propio valor de conveniencia en la extensión:

 extension DelayValue { static var delay10s: Self { 10 } // adds a 10-second delay }

O puede usar cualquier valor Float o Int como en los ejemplos anteriores.

Duración

Valores de conveniencia predefinidos:

 .slow // executes animation for 2 seconds .slower // executes animation for 3 seconds .fast // executes animation for 0.8 seconds .faster // executes animation for 0.5 seconds

Cree su propio valor de conveniencia en la extensión:

 extension DurationValue { static var verySlow: Self { 5 } // executes animation for 5s }

O puede usar cualquier valor Flotante o Int como en los ejemplos anteriores.

Repetir

Valores de conveniencia predefinidos:

 .repeat1 // repeats animation once .repeat2 // repeats animation twice .repeat3 // repeats animation three times .infinite // repeats animation infinitely

Cree su propio valor de conveniencia en la extensión:

 extension RepeatValue { static var repeat5: Self { 5 } // repeats animation five times }

O puede usar cualquier valor Int como en los ejemplos anteriores.

Ejemplo con valores de conveniencia

 .animate(.jello, delay: .delay0s, duration: .slower, repeat: .repeat2)

Y métodos separados:

 .animateDelay(.delay0s) .animateDuration(.slower) .animateRepeat(.repeat2)

Mejores prácticas

Las animaciones pueden mejorar significativamente la experiencia de un usuario con una interfaz web. Sin embargo, es esencial seguir algunas pautas para garantizar que la experiencia no se vea afectada negativamente. Al adherirse a las siguientes reglas, puede crear un comienzo positivo.

Usa animaciones significativas

Las animaciones deben transmitir una intención clara, en lugar de ser solo decorativas. Evite usar animaciones que busquen llamar la atención únicamente por su vistosidad; en su lugar, utilícelos para resaltar algo especial en la interfaz. Use animaciones de entrada y salida para orientar al usuario hacia la interfaz y señalar una transición a un nuevo estado.

La alegría es buena, pero ten cuidado

Agregar diversión a una interfaz puede ser beneficioso, pero asegúrese de que las animaciones no obstruyan la experiencia del usuario ni afecten el rendimiento de la página debido al uso excesivo.

Evite animar elementos grandes

La animación de elementos grandes puede generar una experiencia de usuario deficiente, lo que genera confusión y hace que las animaciones parezcan nerviosas. Por tanto, es recomendable evitar animar elementos grandes, ya que aportan poco valor al usuario.

Evita animaciones infinitas

Si bien animate.css proporciona clases de utilidad para repetir animaciones, incluidas las infinitas, se recomienda evitar las animaciones interminables. Estas animaciones pueden distraer a los usuarios y molestarlos, lo que resulta en una experiencia negativa. Por lo tanto, ¡utilícelos sabiamente!

trampas

No puedes animar elementos en línea

No se recomienda animar elementos en línea de acuerdo con las especificaciones de animación CSS y es posible que no funcione en todos los navegadores. en su lugar, los elementos de nivel block o inline-block , incluidos los contenedores grid y flex y sus elementos secundarios, deben estar animados. Para animar un elemento de nivel en línea, puede establecer su propiedad de visualización en bloque en línea.

Desbordamiento

Al animar elementos en la pantalla, algunas animaciones de Animate.css pueden crear barras de desplazamiento en su página web. Para evitar esto, puede usar la propiedad overflow: hidden en el elemento principal que contiene el elemento animado. Sin embargo, no existe una receta definitiva sobre cuándo o cómo usarlo.

Intervalos entre repeticiones

Actualmente no es posible establecer intervalos entre repeticiones usando CSS puro.

Pero es posible usar el detector de eventos `.animationEnd`:

 Img() .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg") .width(400.px) .animate(.jello, delay: 0, duration: 2) .addEventListener( .animationEnd, options: .init(once: true) ) { event, element in Dispatch.asyncAfter(0.5) { element.animate(.jello, delay: 0, duration: 2) } }

O aún más conveniente:

 Img() .src("https://i.ytimg.com/vi/1Ne1hqOXKKI/maxresdefault.jpg") .width(400.px) .animate(.jello, delay: 0, duration: 2) { element in Dispatch.asyncAfter(0.5) { element.animate(.jello, delay: 0, duration: 2) } }

Eso es todo

¡Sí, esa biblioteca es compacta pero poderosa!

¿Quieres aprender más? ¡Estén atentos a los próximos artículos!