22.11.2024

Aula 102: AnimatableModifier e Animações Personalizadas

As animações são uma parte essencial da criação de interfaces de usuário envolventes e dinâmicas no SwiftUI. Nesta aula, vamos explorar o AnimatableModifier, que permite criar animações personalizadas definindo como uma visualização deve animar com base nas alterações em suas propriedades.

Entendendo o AnimatableModifier

No SwiftUI, AnimatableModifier é um protocolo que permite criar modificadores personalizados que podem animar suas propriedades ao longo do tempo. Ao conformar-se ao AnimatableModifier, você pode definir não apenas o estado do seu modificador, mas também como ele muda durante a animação.

Criando um Modificador Animável Personalizado

Vamos começar criando um modificador animável personalizado que vai animar o tamanho e a opacidade de uma visualização.

import SwiftUI

struct PulsatingModifier: AnimatableModifier {
    var scale: CGFloat
    var opacity: Double

    var animatableData: AnimatablePair<CGFloat, Double> {
        get { AnimatablePair(scale, opacity) }
        set {
            scale = newValue.first
            opacity = newValue.second
        }
    }

    func body(content: Content) -> some View {
        content
            .scaleEffect(scale)
            .opacity(opacity)
    }
}

extension View {
    func pulsating(scale: CGFloat, opacity: Double) -> some View {
        self.modifier(PulsatingModifier(scale: scale, opacity: opacity))
    }
}

Neste exemplo, nosso PulsatingModifier possui duas propriedades, scale e opacity, que podem ser animadas. A propriedade animatableData retorna um AnimatablePair contendo nossas duas propriedades.

Usando o Modificador Animável Personalizado

Agora que criamos nosso PulsatingModifier, podemos usá-lo em uma visualização SwiftUI. Vamos criar uma visualização simples que utiliza nosso efeito pulsante.

struct ContentView: View {
    @State private var scale: CGFloat = 1.0
    @State private var opacity: Double = 1.0

    var body: some View {
        VStack {
            Circle()
                .fill(Color.blue)
                .frame(width: 100, height: 100)
                .pulsating(scale: scale, opacity: opacity)
                .onAppear {
                    animate()
                }

            Text("Círculo Pulsante")
                .padding()
        }
    }

    private func animate() {
        withAnimation(Animation.easeInOut(duration: 1).repeatForever(autoreverses: true)) {
            scale = 1.5
            opacity = 0.5
        }
    }
}

Nesta ContentView, estamos animando o scale e a opacity de um círculo azul. A animação é acionada no modificador onAppear, e ela se repetirá continuamente, proporcionando um efeito pulsante.

Personalizando a Animação

Você pode personalizar ainda mais a animação modificando os parâmetros da Animation. Por exemplo, você pode mudar a duração ou a curva da animação:

private func animate() {
    withAnimation(Animation.linear(duration: 2).repeatForever(autoreverses: true)) {
        scale = 1.5
        opacity = 0.3
    }
}

Conclusão

Nesta aula, aprendemos sobre AnimatableModifier no SwiftUI e como criar animações personalizadas. Desenvolvemos um simples círculo pulsante e exploramos como modificar o comportamento da animação. Utilizar AnimatableModifier abre um mundo de possibilidades para criar animações únicas e envolventes em suas aplicações SwiftUI. Experimente diferentes propriedades e animações para ver quais efeitos criativos você pode produzir!

Video

Navigation