Swift Academy · Aula

Transformações e Efeitos 3D

Aplique transformações afins e 3D.

Transformações e Efeitos 3D é uma aula grátis de Swift Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Swift Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Swift Academy inclui 4 aulas no total.

Transformações movem e distorcem

Uma transform remodela uma layer — translada, escala, gira e inclina — sem alterar seus limites. Core Animation oferece suporte a transformações 2D, com CGAffineTransform, e 3D, com CATransform3D.

Transformações afins 2D

CGAffineTransform lida com transformações planas. Combine-as por concatenação; a ordem é importante.

import UIKit
var t = CGAffineTransform.identity
t = t.scaledBy(x: 1.5, y: 1.5)
t = t.rotated(by: .pi / 6)
layer.setAffineTransform(t)

CATransform3D

CATransform3D é uma matriz 4x4 que permite 3D real. Comece com CATransform3DIdentity e aplique translação, escala e rotação no espaço.

var t = CATransform3DIdentity
t = CATransform3DScale(t, 1.2, 1.2, 1)
layer.transform = t

Rotação 3D

Gire em torno de qualquer eixo com CATransform3DRotate(t, angle, x, y, z). Girar em torno do eixo y vira um cartão; em torno do eixo x, inclina-o para a frente.

let angle = CGFloat.pi / 4
layer.transform = CATransform3DRotate(
    CATransform3DIdentity, angle, 0, 1, 0) // around y

perspective

Uma rotação 3D simples parece plana sem perspective. Defina o elemento m34 da matriz identidade com um pequeno valor negativo, cerca de -1/500, para adicionar profundidade.

var perspective = CATransform3DIdentity
perspective.m34 = -1.0 / 500.0
layer.transform = CATransform3DRotate(perspective, .pi / 4, 0, 1, 0)

Por que m34 cria profundidade

O termo m34 divide x e y pela profundidade, fazendo com que os pontos mais distantes diminuam. Magnitudes menores, com denominador maior, produzem uma perspective sutil; magnitudes maiores a exageram.

// -1/2000 = subtle, -1/200 = dramatic
perspective.m34 = -1.0 / 1000.0

anchorPoint e transformações

As transformações giram em torno de anchorPoint. Para girar um cartão em torno da borda esquerda, defina primeiro anchorPoint como (0, 0.5).

layer.anchorPoint = CGPoint(x: 0, y: 0.5)
layer.transform = CATransform3DRotate(
    CATransform3DIdentity, .pi / 3, 0, 1, 0)

Animando transformações

A transform inteira é animável. Anime o caminho de chave transform ou subchaves como transform.rotation.y para um único eixo.

let spin = CABasicAnimation(keyPath: "transform.rotation.y")
spin.fromValue = 0
spin.toValue = CGFloat.pi * 2
spin.duration = 1.5
layer.add(spin, forKey: "spin")

Transformações de subcamadas

Defina sublayerTransform em um contêiner pai para aplicar perspectiva a todos os filhos de uma só vez — algo útil para contêineres 3D e carrosséis.

var t = CATransform3DIdentity
t.m34 = -1.0 / 500.0
parentLayer.sublayerTransform = t

zPosition e ordenação por profundidade

zPosition controla a ordem de desenho no espaço 3D. Valores maiores são renderizados à frente. Combine-o com rotação para criar cenas 3D em camadas e sobrepostas.

frontCard.zPosition = 10
backCard.zPosition = 0

Combinando transformações

Concatene transformações para compor efeitos. Lembre-se de que a multiplicação de matrizes não é comutativa: girar e depois dimensionar produz um resultado diferente de dimensionar e depois girar.

var t = CATransform3DIdentity
t = CATransform3DRotate(t, .pi / 6, 0, 0, 1)
t = CATransform3DScale(t, 2, 2, 1)

Verificação rápida: transformações

Teste sua compreensão sobre transformações 3D.

Recapitulação: transformações e efeitos 3D

As transformações remodelam as camadas sem alterar seus limites: CGAffineTransform para 2D e CATransform3D para 3D verdadeiro. Adicione profundidade definindo m34 (aproximadamente -1/500), defina o pivô por meio de anchorPoint e aplique perspectiva ao contêiner com sublayerTransform.

Anime as transformações por inteiro ou por eixo, ordene a profundidade com zPosition e lembre-se de que a ordem de composição das transformações é importante.

Perguntas Frequentes

A aula “Transformações e Efeitos 3D” é grátis?

Sim — o texto completo de “Transformações e Efeitos 3D” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Swift Academy, atualize para CoddyKit PRO. O curso de Swift Academy inclui 4 aulas no total.

O que vou aprender em “Transformações e Efeitos 3D”?

Aplique transformações afins e 3D. Você pratica Swift Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Swift Academy?

Nenhuma experiência prévia é necessária. Swift Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Transformações e Efeitos 3D”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Swift Academy?

Sim. Cada aula de Swift Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Swift Academy