Lição: 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!