Transformaties en 3D-effecten
Pas affine- en 3D-transformaties toe.
Transformaties en 3D-effecten is een gratis Swift Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Swift Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Swift Academy bevat in totaal 4 lessen.
Transformaties verplaatsen en vervormen
Een transform vervormt een laag door die te verplaatsen, schalen, roteren of scheeftrekken, zonder de bounds te wijzigen. Core Animation ondersteunt zowel 2D (CGAffineTransform) als 3D (CATransform3D).
Affiene 2D-transformaties
CGAffineTransform verwerkt vlakke transformaties. Combineer ze door ze samen te voegen; de volgorde is belangrijk.
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 is een matrix van 4x4 waarmee echte 3D mogelijk wordt. Begin met CATransform3DIdentity en pas verplaatsing, schaling en rotatie toe in de ruimte.
var t = CATransform3DIdentity
t = CATransform3DScale(t, 1.2, 1.2, 1)
layer.transform = t3D-rotatie
Roteer om elke as met CATransform3DRotate(t, angle, x, y, z). Een rotatie om de y-as klapt een kaart om; een rotatie om de x-as kantelt de kaart naar voren.
let angle = CGFloat.pi / 4
layer.transform = CATransform3DRotate(
CATransform3DIdentity, angle, 0, 1, 0) // around yPerspectief
Een gewone 3D-rotatie oogt vlak zonder perspectief. Stel het element m34 van de identiteitsmatrix in op een kleine negatieve waarde, ongeveer -1/500, om diepte toe te voegen.
var perspective = CATransform3DIdentity
perspective.m34 = -1.0 / 500.0
layer.transform = CATransform3DRotate(perspective, .pi / 4, 0, 1, 0)Waarom m34 diepte creëert
De term m34 deelt x en y door de diepte, waardoor verder weg gelegen punten kleiner worden. Kleinere absolute waarden, dus een grotere noemer, geven subtiel perspectief; grotere waarden overdrijven het effect.
// -1/2000 = subtle, -1/200 = dramatic
perspective.m34 = -1.0 / 1000.0Ankerpunt en transformaties
Transformaties draaien om het anchorPoint. Als je een kaart om de linkerrand wilt roteren, stel je eerst anchorPoint in op (0, 0.5).
layer.anchorPoint = CGPoint(x: 0, y: 0.5)
layer.transform = CATransform3DRotate(
CATransform3DIdentity, .pi / 3, 0, 1, 0)Transformaties animeren
De volledige transformatie is animeerbaar. Animeer het key path transform of deelsleutels zoals transform.rotation.y voor één as.
let spin = CABasicAnimation(keyPath: "transform.rotation.y")
spin.fromValue = 0
spin.toValue = CGFloat.pi * 2
spin.duration = 1.5
layer.add(spin, forKey: "spin")Sublayer-transformaties
Stel sublayerTransform in op een bovenliggend element om perspectief in één keer op al zijn onderliggende elementen toe te passen—handig voor 3D-containers en carrousels.
var t = CATransform3DIdentity
t.m34 = -1.0 / 500.0
parentLayer.sublayerTransform = tzPosition en dieptesortering
zPosition bepaalt de tekenvolgorde in de 3D-ruimte. Hogere waarden worden op de voorgrond weergegeven. Combineer dit met rotatie voor gelaagde, overlappende 3D-scènes.
frontCard.zPosition = 10
backCard.zPosition = 0Transformaties combineren
Voeg transformaties samen om effecten te combineren. Onthoud dat matrixvermenigvuldiging niet commutatief is: eerst roteren en dan schalen verschilt van eerst schalen en dan roteren.
var t = CATransform3DIdentity
t = CATransform3DRotate(t, .pi / 6, 0, 0, 1)
t = CATransform3DScale(t, 2, 2, 1)Korte controle: transformaties
Test je begrip van 3D-transformaties.
Samenvatting: transformaties en 3D-effecten
Met transformaties wijzig je de vorm van lagen zonder de grenzen aan te passen: CGAffineTransform voor 2D en CATransform3D voor echte 3D. Voeg diepte toe door m34 in te stellen op ongeveer -1/500, verplaats het draaipunt met anchorPoint en pas perspectief op een container toe met sublayerTransform.
Animeer transformaties als geheel of per as, sorteer diepte met zPosition en onthoud dat de volgorde waarin je transformaties combineert belangrijk is.
Leer Swift met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 122
- Lessen
- 409
Veelgestelde vragen
Is de les “Transformaties en 3D-effecten” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Swift Academy, waaronder “Transformaties en 3D-effecten”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Swift Academy bevat in totaal 4 lessen.
Wat leer ik in “Transformaties en 3D-effecten”?
Pas affine- en 3D-transformaties toe. Je oefent met Swift Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Swift Academy te beginnen?
Ervaring vooraf is niet nodig. Swift Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Transformaties en 3D-effecten”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Swift Academy?
Ja. Elke les over Swift Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Basisprincipes van CALayer
- Impliciete en expliciete animaties
- Transformaties en 3D-effecten
- Aangepast tekenen met Core Graphics