As animações são uma ferramenta poderosa que pode aprimorar a experiência do usuário em um site. Quando usados corretamente, eles podem tornar um site mais atraente, interativo e intuitivo. Neste artigo, vamos explorar a biblioteca de animações para SwifWeb. Estou falando da biblioteca mais famosa. Vamos instalá-lo e dar uma olhada em como usá-lo! animate.css Instalação Se você é novo no SwifWeb, dê uma olhada em como criar um novo projeto . neste artigo No projeto, abra e edite a seção para deixá-la assim: Package.swift dependencies dependencies: [ // the rest of the other dependencies including swifweb/web .package( url: "https://github.com/swifweb/animate", from: "1.0.0" ), ] Em seguida, edite para torná-lo assim: executableTarget .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Animate", package: "animate") ]), Em seguida, abra add e configure-o no método assim: App.swift import Animate didFinishLaunching Lifecycle.didFinishLaunching { Animate.configure() } Não funcionará se você esquecer de configurá-lo. Uso Todas as classes da biblioteca original estão ocultas e, para usuários do SwiftWeb, uma interface Swift muito conveniente e bonita está disponível. Pegue qualquer elemento e adicione uma animação a ele que será iniciada assim que for adicionada ao 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 pegue qualquer elemento na tela e adicione uma animação instantaneamente: 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 } } A lista completa de animações está disponível no site da biblioteca https://animate.style Além disso, você pode definir configurações , e . duration delay repeat .animate(.jello, delay: 0, duration: 1, repeat: 0) Todos esses parâmetros são opcionais. Os valores serão removidos automaticamente quando a animação terminar. Como alternativa, essas opções podem ser definidas usando métodos separados: .animateDelay(0) .animateDuration(1) .animateRepeat(0) E você também deve remover esses valores manualmente: .removeAnimateDelay() .removeAnimateDuration() .removeAnimateRepeat() Vamos falar mais sobre cada opção. Atraso Valores de conveniência 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 Crie seu próprio valor de conveniência na extensão: extension DelayValue { static var delay10s: Self { 10 } // adds a 10-second delay } Ou você pode usar qualquer valor ou como nos exemplos acima. Float Int Duração Valores de conveniência 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 Crie seu próprio valor de conveniência na extensão: extension DurationValue { static var verySlow: Self { 5 } // executes animation for 5s } Ou você pode usar qualquer valor Float ou Int como nos exemplos acima. Repita Valores de conveniência predefinidos: .repeat1 // repeats animation once .repeat2 // repeats animation twice .repeat3 // repeats animation three times .infinite // repeats animation infinitely Crie seu próprio valor de conveniência na extensão: extension RepeatValue { static var repeat5: Self { 5 } // repeats animation five times } Ou você pode usar qualquer valor como nos exemplos acima. Int Exemplo com valores de conveniência .animate(.jello, delay: .delay0s, duration: .slower, repeat: .repeat2) E métodos separados: .animateDelay(.delay0s) .animateDuration(.slower) .animateRepeat(.repeat2) Melhores Práticas As animações podem melhorar significativamente a experiência do usuário com uma interface da web. No entanto, é essencial seguir algumas orientações para garantir que a experiência não seja impactada negativamente. Ao aderir às regras a seguir, você pode criar um começo positivo. Use animações significativas As animações devem transmitir uma intenção clara, em vez de serem apenas decorativas. Evite usar animações que chamam a atenção apenas por seu brilho; em vez disso, use-os para destacar algo especial na interface. Use animações de entrada e saída para orientar o usuário na interface e sinalizar uma transição para um novo estado. A diversão é boa, mas esteja atento Adicionar diversão a uma interface pode ser benéfico, mas certifique-se de que as animações não obstruam a experiência do usuário ou afetem o desempenho da página devido ao uso excessivo. Evite animar elementos grandes A animação de elementos grandes pode levar a uma experiência de usuário insatisfatória, causando confusão e fazendo com que as animações pareçam instáveis. Portanto, é aconselhável evitar animar elementos grandes, pois agregam pouco valor ao usuário. Evite animações infinitas Embora o animate.css forneça classes utilitárias para animações repetidas, incluindo as infinitas, é recomendável evitar animações infinitas. Essas animações podem distrair os usuários e incomodá-los, resultando em uma experiência negativa. Portanto, use-os com sabedoria! Pegadinhas Você não pode animar elementos embutidos A animação de elementos embutidos não é recomendada de acordo com as especificações de animação CSS e pode não funcionar em todos os navegadores. elementos de nível de ou , incluindo contêineres e e seus filhos, devem ser animados em vez disso. Para animar um elemento de nível embutido, você pode definir sua propriedade de exibição como bloco embutido. block inline-block grid flex Transbordar Ao animar elementos na tela, algumas animações Animate.css podem criar barras de rolagem em sua página da web. Para evitar isso, você pode usar a propriedade overflow: hidden no elemento pai que contém o elemento animado. No entanto, não existe uma receita definitiva para quando ou como usá-lo. Intervalos entre repetições Atualmente não é possível definir intervalos entre as repetições usando CSS puro. Mas é possível usar o event listener `.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 ainda mais 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) } } Em ambos os casos, a animação recomeça com um intervalo de . 500ms Isso é tudo Sim, essa biblioteca é compacta, mas poderosa! Quer aprender mais? Fique ligado nos próximos artigos! Não hesite em fazer qualquer pergunta e fique a vontade para contribuir! no nosso Discord
