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 animate.css mais famosa. Vamos instalá-lo e dar uma olhada em como usá-lo!

Instalação

Se você é novo no SwifWeb, dê uma olhada em como criar um novo projeto neste artigo .

No projeto, abra Package.swift e edite a seção dependencies para deixá-la assim:

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

Em seguida, edite executableTarget para torná-lo assim:

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

Em seguida, abra App.swift add import Animate e configure-o no método didFinishLaunching assim:

 Lifecycle.didFinishLaunching { Animate.configure() }

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

Além disso, você pode definir configurações duration , delay e 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 Float ou Int como nos exemplos acima.

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 Int como nos exemplos acima.

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 block ou inline-block , incluindo contêineres grid e flex 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.

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

Isso é tudo

Sim, essa biblioteca é compacta, mas poderosa!

Quer aprender mais? Fique ligado nos próximos artigos!