Trasformazioni ed effetti 3D
Applichi trasformazioni affini e 3D.
Trasformazioni ed effetti 3D è una lezione Swift Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Swift Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Swift Academy include 4 lezioni in totale.
Le trasformazioni spostano e deformano
Una transform rimodella un layer, traslandolo, ridimensionandolo, ruotandolo o inclinandolo, senza modificarne i bounds. Core Animation supporta trasformazioni 2D (CGAffineTransform) e 3D (CATransform3D).
Trasformazioni affini 2D
CGAffineTransform gestisce le trasformazioni piane. Le combini tramite concatenazione; l’ordine è 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 è una matrice 4x4 che consente il vero 3D. Parta da CATransform3DIdentity e applichi traslazione, ridimensionamento e rotazione nello spazio.
var t = CATransform3DIdentity
t = CATransform3DScale(t, 1.2, 1.2, 1)
layer.transform = tRotazione 3D
Ruoti attorno a qualsiasi asse con CATransform3DRotate(t, angle, x, y, z). La rotazione attorno all’asse y ribalta una scheda; quella attorno all’asse x la inclina in avanti.
let angle = CGFloat.pi / 4
layer.transform = CATransform3DRotate(
CATransform3DIdentity, angle, 0, 1, 0) // around yProspettiva
Una semplice rotazione 3D appare piatta senza perspective. Imposti l’elemento m34 della matrice identità su un piccolo valore negativo, circa -1/500, per aggiungere profondità.
var perspective = CATransform3DIdentity
perspective.m34 = -1.0 / 500.0
layer.transform = CATransform3DRotate(perspective, .pi / 4, 0, 1, 0)Perché m34 crea profondità
Il termine m34 divide x e y per la profondità, quindi i punti più lontani si rimpiccioliscono. Valori assoluti più piccoli, con un denominatore maggiore, producono una prospettiva delicata; valori più grandi la accentuano.
// -1/2000 = subtle, -1/200 = dramatic
perspective.m34 = -1.0 / 1000.0Punto di ancoraggio e trasformazioni
Le trasformazioni ruotano attorno a anchorPoint. Per ruotare una scheda attorno al bordo sinistro, imposti prima anchorPoint su (0, 0.5).
layer.anchorPoint = CGPoint(x: 0, y: 0.5)
layer.transform = CATransform3DRotate(
CATransform3DIdentity, .pi / 3, 0, 1, 0)Animare le trasformazioni
L’intera trasformazione è animabile. Animi il key path transform oppure sottochiavi come transform.rotation.y per intervenire su un singolo asse.
let spin = CABasicAnimation(keyPath: "transform.rotation.y")
spin.fromValue = 0
spin.toValue = CGFloat.pi * 2
spin.duration = 1.5
layer.add(spin, forKey: "spin")Trasformazioni dei sottolivelli
Impostare sublayerTransform su un livello padre per applicare la prospettiva a tutti i relativi elementi figli in una sola volta: è utile per contenitori 3D e caroselli.
var t = CATransform3DIdentity
t.m34 = -1.0 / 500.0
parentLayer.sublayerTransform = tzPosition e ordinamento in profondità
zPosition controlla l'ordine di disegno nello spazio 3D. I valori più alti vengono renderizzati in primo piano. Combinarlo con la rotazione per creare scene 3D stratificate e sovrapposte.
frontCard.zPosition = 10
backCard.zPosition = 0Combinare le trasformazioni
Concatenare le trasformazioni per comporre gli effetti. Ricordare che la moltiplicazione tra matrici non è commutativa: ruotare e poi ridimensionare produce un risultato diverso dal ridimensionare e poi ruotare.
var t = CATransform3DIdentity
t = CATransform3DRotate(t, .pi / 6, 0, 0, 1)
t = CATransform3DScale(t, 2, 2, 1)Verifica rapida: trasformazioni
Verificare la propria comprensione delle trasformazioni 3D.
Riepilogo: trasformazioni ed effetti 3D
Le trasformazioni rimodellano i livelli senza modificarne i limiti: CGAffineTransform per il 2D, CATransform3D per il vero 3D. Aggiungere profondità impostando m34 (circa -1/500), definire il punto di rotazione tramite anchorPoint e applicare la prospettiva al contenitore con sublayerTransform.
Animare le trasformazioni nel loro insieme o per singolo asse, gestire l'ordine in profondità con zPosition e ricordare che l'ordine di composizione delle trasformazioni è importante.
Domande Frequenti
La lezione «Trasformazioni ed effetti 3D» è gratuita?
Sì — il testo completo di «Trasformazioni ed effetti 3D» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Swift Academy, passa a CoddyKit PRO. Il corso Swift Academy include 4 lezioni in totale.
Cosa imparerò in «Trasformazioni ed effetti 3D»?
Applichi trasformazioni affini e 3D. Eserciti Swift Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Swift Academy?
Non è richiesta alcuna esperienza precedente. Swift Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Trasformazioni ed effetti 3D»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Swift Academy?
Sì. Ogni lezione Swift Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Fondamenti di CALayer
- Animazioni implicite ed esplicite
- Trasformazioni ed effetti 3D
- Disegno personalizzato con Core Graphics