Lição: 101: Animações Avançadas com o Efeito de Geometria Correspondente
Nesta aula, vamos explorar o MatchedGeometryEffect
no SwiftUI, uma ferramenta poderosa para criar animações avançadas que mantêm as relações espaciais entre as visualizações enquanto elas transitam de um estado para outro. Esse efeito ajuda a criar transições visualmente atraentes que podem melhorar a experiência do usuário do seu aplicativo.
O que é o Efeito de Geometria Correspondente?
O MatchedGeometryEffect
permite que você crie animações fluidas entre visualizações ao combinar suas geometries. Ele pode ser especialmente útil para transições onde as visualizações precisam parecer que estão se transformando umas nas outras. Este efeito funciona atribuindo identificadores correspondentes às visualizações que você deseja animar.
Configurando um Projeto SwiftUI
Primeiro, crie um novo projeto SwiftUI no Xcode. Abra o arquivo ContentView.swift
e vamos começar a implementar o efeito de geometria correspondente.
Exemplo Básico: Transição de Círculo para Retângulo
Começaremos com um exemplo simples onde animamos um círculo se transformando em um retângulo.
import SwiftUI
struct ContentView: View {
@Namespace private var animationNamespace
@State private var isCircle = true
var body: some View {
VStack {
if isCircle {
Circle()
.matchedGeometryEffect(id: "forma", in: animationNamespace)
.frame(width: 100, height: 100)
.foregroundColor(.blue)
.onTapGesture {
withAnimation {
isCircle.toggle()
}
}
} else {
Rectangle()
.matchedGeometryEffect(id: "forma", in: animationNamespace)
.frame(width: 150, height: 100)
.foregroundColor(.blue)
.onTapGesture {
withAnimation {
isCircle.toggle()
}
}
}
}
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Explicação
- Namespace: Criamos uma variável
@Namespace
que servirá como um contêiner para nossas geometrias correspondentes. - Estado: Um booleano
isCircle
é usado para alternar entre o círculo e o retângulo. - Efeito de Geometria Correspondente: O modificador
matchedGeometryEffect
é aplicado a ambas as formas, com o mesmo identificador ("forma"
) eanimationNamespace
. Isso conecta as duas formas para a animação.
Exemplo Avançado: Transição Entre Listas
Agora, vamos criar um exemplo mais complexo com uma lista de itens que transitam entre duas visualizações.
import SwiftUI
struct Item: Identifiable {
let id = UUID()
let nome: String
}
struct ContentView: View {
@Namespace private var animationNamespace
@State private var itemSelecionado: Item?
let itens = [
Item(nome: "Maçã"),
Item(nome: "Banana"),
Item(nome: "Cereja"),
Item(nome: "Damasco")
]
var body: some View {
NavigationView {
VStack {
if let itemSelecionado = itemSelecionado {
Text(itemSelecionado.nome)
.font(.largeTitle)
.matchedGeometryEffect(id: "item", in: animationNamespace)
.onTapGesture {
withAnimation {
self.itemSelecionado = nil
}
}
} else {
List(itens) { item in
Text(item.nome)
.matchedGeometryEffect(id: "item", in: animationNamespace)
.onTapGesture {
withAnimation {
self.itemSelecionado = item
}
}
}
}
}
.navigationTitle("Frutas")
.padding()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Explicação
- Modelo de Item: Definimos um modelo simples
Item
representando cada fruta. - Gerenciamento de Estado: Gerenciamos o item selecionado com a variável de estado
itemSelecionado
. - NavigationView: Usamos um
NavigationView
para apresentar os itens em forma de lista. - Efeito de Geometria Correspondente: Tanto a visualização de texto quando um item é selecionado quanto os itens da lista usam o mesmo identificador de efeito de geometria correspondente, o que cria uma transição suave entre os estados.
Conclusão
O MatchedGeometryEffect
no SwiftUI é uma ferramenta poderosa que permite criar transições suaves e envolventes entre visualizações. Abordamos um exemplo básico de uma transição de círculo para retângulo e um exemplo mais avançado de transição entre uma lista de itens. Experimente esse efeito em seus próprios projetos para melhorar a experiência do usuário!
Feliz programação!