22.11.2024

Aula 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

1. Namespace: Criamos uma variável @Namespace que servirá como um contêiner para nossas geometrias correspondentes.
2. Estado: Um booleano isCircle é usado para alternar entre o círculo e o retângulo.
3. Efeito de Geometria Correspondente: O modificador matchedGeometryEffect é aplicado a ambas as formas, com o mesmo identificador ("forma") e animationNamespace. 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

1. Modelo de Item: Definimos um modelo simples Item representando cada fruta.
2. Gerenciamento de Estado: Gerenciamos o item selecionado com a variável de estado itemSelecionado.
3. NavigationView: Usamos um NavigationView para apresentar os itens em forma de lista.
4. 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!

Video

Navigation