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 más famosa. ¡Vamos a instalarlo y veamos cómo usarlo! animate.css Instalación Si es nuevo en SwifWeb, consulte cómo crear un nuevo proyecto . en este artículo En el proyecto, abra y edite la sección para que se vea así: Package.swift dependencies 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 para que se vea así: executableTarget .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Animate", package: "animate") ]), Luego abra agregue y configúrelo en el método de esta manera: App.swift import Animate didFinishLaunching Lifecycle.didFinishLaunching { Animate.configure() } No funcionará si olvida configurarlo. 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 } } La lista completa de animaciones está disponible en el sitio web de la biblioteca https://animate.style Además, puede establecer , y la configuración . duration delay 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 o como en los ejemplos anteriores. Float Int 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 como en los ejemplos anteriores. Int 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 o , incluidos los contenedores y 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. block inline-block grid flex 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) } } En ambos casos, la animación se reinicia con un intervalo . de 500ms Eso es todo ¡Sí, esa biblioteca es compacta pero poderosa! ¿Quieres aprender más? ¡Estén atentos a los próximos artículos! No dude en hacer cualquier pregunta y siéntete libre de contribuir! en nuestro discordia
