Les animations sont un outil puissant qui peut améliorer l'expérience utilisateur sur un site Web. Lorsqu'ils sont utilisés correctement, ils peuvent rendre un site Web plus attrayant, interactif et intuitif. Dans cet article, nous allons explorer la bibliothèque d'animations pour SwifWeb.

Je parle de la bibliothèque animate.css la plus connue. Installons-le et voyons comment l'utiliser !

Installation

Si vous êtes nouveau sur SwifWeb, veuillez voir comment créer un nouveau projet dans cet article .

Dans le projet, ouvrez Package.swift et modifiez la section dependencies pour qu'elle ressemble à ceci :

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

Modifiez ensuite executableTarget pour qu'il ressemble à ceci :

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

Ouvrez ensuite App.swift add import Animate et configurez-le dans la méthode didFinishLaunching comme ceci :

 Lifecycle.didFinishLaunching { Animate.configure() }

Usage

Toutes les classes de la bibliothèque d'origine sont sous le capot, et pour les utilisateurs de SwiftWeb, une interface Swift très pratique et belle est disponible.

Prenez n'importe quel élément et ajoutez-y une animation qui sera lancée une fois ajoutée au 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 }

Ou prenez n'importe quel élément à l'écran et ajoutez-y une animation à la volée :

 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 } }

De plus, vous pouvez définir les paramètres duration , delay et repeat .

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

Tous ces paramètres sont facultatifs. Les valeurs seront supprimées automatiquement à la fin de l'animation.

Ces options peuvent également être définies à l'aide de méthodes distinctes :

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

Et vous devez également supprimer ces valeurs manuellement :

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

Parlons plus de chaque option.

Retard

Valeurs de commodité prédéfinies :

 .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

Créez votre propre valeur de commodité dans l'extension :

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

Ou vous pouvez utiliser n'importe quelle valeur Float ou Int comme dans les exemples ci-dessus.

Durée

Valeurs de commodité prédéfinies :

 .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

Créez votre propre valeur de commodité dans l'extension :

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

Ou vous pouvez utiliser n'importe quelle valeur Float ou Int comme dans les exemples ci-dessus.

Répéter

Valeurs de commodité prédéfinies :

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

Créez votre propre valeur de commodité dans l'extension :

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

Ou vous pouvez utiliser n'importe quelle valeur Int comme dans les exemples ci-dessus.

Exemple avec des valeurs de commodité

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

Et méthodes séparées :

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

Les meilleures pratiques

Les animations peuvent considérablement améliorer l'expérience d'un utilisateur avec une interface Web. Cependant, il est essentiel de suivre certaines directives pour s'assurer que l'expérience ne soit pas affectée négativement. En respectant les règles suivantes, vous pouvez créer un départ positif.

Utilisez des animations significatives

Les animations doivent transmettre une intention claire, plutôt que d'être simplement décoratives. Évitez d'utiliser des animations attirant l'attention uniquement pour leur éclat ; utilisez-les plutôt pour mettre en évidence quelque chose de spécial dans l'interface. Utilisez des animations d'entrée et de sortie pour orienter l'utilisateur vers l'interface et signaler une transition vers un nouvel état.

L'espièglerie c'est bien, mais attention

Ajouter de l'aspect ludique à une interface peut être bénéfique, mais assurez-vous que les animations n'obstruent pas l'expérience de l'utilisateur ou n'affectent pas les performances de la page en raison d'une utilisation excessive.

Évitez d'animer de grands éléments

L'animation de grands éléments peut entraîner une mauvaise expérience utilisateur, provoquant de la confusion et rendant les animations instables. Par conséquent, il est conseillé d'éviter d'animer des éléments volumineux, car ils ajoutent peu de valeur à l'utilisateur.

Évitez les animations infinies

Alors que animate.css fournit des classes utilitaires pour répéter les animations, y compris les animations infinies, il est recommandé d'éviter les animations sans fin. Ces animations peuvent distraire les utilisateurs et les ennuyer, entraînant une expérience négative. Par conséquent, utilisez-les à bon escient!

Pièges

Vous ne pouvez pas animer des éléments en ligne

L'animation d'éléments en ligne n'est pas recommandée selon les spécifications d'animation CSS et peut ne pas fonctionner sur tous les navigateurs. les éléments de niveau block ou inline-block , y compris les conteneurs grid et flex et leurs enfants, doivent être animés à la place. Pour animer un élément de niveau inline, vous pouvez définir sa propriété display sur inline-block.

Débordement

Lors de l'animation d'éléments sur l'écran, certaines animations Animate.css peuvent créer des barres de défilement sur votre page Web. Pour éviter cela, vous pouvez utiliser la propriété overflow: hidden dans l'élément parent contenant l'élément animé. Cependant, il n'y a pas de recette définitive pour savoir quand ou comment l'utiliser.

Intervalles entre les répétitions

Il n'est actuellement pas possible de définir des intervalles entre les répétitions à l'aide de CSS pur.

Mais il est possible d'utiliser l'écouteur d'événement `.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) } }

Ou encore plus pratique :

 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) } }

C'est tout

Oui, cette bibliothèque est compacte mais puissante !

Vous voulez en savoir plus ? Restez à l'affût des prochains articles!