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 la plus connue. Installons-le et voyons comment l'utiliser ! animate.css Installation Si vous êtes nouveau sur SwifWeb, veuillez voir comment créer un nouveau projet . dans cet article Dans le projet, ouvrez et modifiez la section pour qu'elle ressemble à ceci : Package.swift dependencies dependencies: [ // the rest of the other dependencies including swifweb/web .package( url: "https://github.com/swifweb/animate", from: "1.0.0" ), ] Modifiez ensuite pour qu'il ressemble à ceci : executableTarget .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Animate", package: "animate") ]), Ouvrez ensuite add et configurez-le dans la méthode comme ceci : App.swift import Animate didFinishLaunching Lifecycle.didFinishLaunching { Animate.configure() } Cela ne fonctionnera pas si vous oubliez de le configurer. 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 } } La liste complète des animations est disponible sur le site de la bibliothèque https://animate.style De plus, vous pouvez définir les paramètres , et . duration delay 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 ou comme dans les exemples ci-dessus. Float Int 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 comme dans les exemples ci-dessus. Int 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 ou , y compris les conteneurs et 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. block inline-block grid flex 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) } } Dans les deux cas, l'animation redémarre avec un intervalle . de 500 ms C'est tout Oui, cette bibliothèque est compacte mais puissante ! Vous voulez en savoir plus ? Restez à l'affût des prochains articles! N'hésitez pas à poser des questions et n'hésitez pas à contribuer ! dans notre Discord
