Transformationen und 3D-Effekte
Wenden Sie affine und 3D-Transformationen an.
Transformationen und 3D-Effekte ist eine kostenlose Swift Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Swift Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Swift Academy-Kurs umfasst insgesamt 4 Lektionen.
Transformationen verschieben und verzerren
Eine Transformation verändert die Form eines Layers durch Verschieben, Skalieren, Drehen oder Scheren, ohne dessen bounds zu ändern. Core Animation unterstützt sowohl 2D-Transformationen mit CGAffineTransform als auch 3D-Transformationen mit CATransform3D.
2D-affine Transformationen
CGAffineTransform verarbeitet ebene Transformationen. Kombinieren Sie sie durch Konkatenation. Die Reihenfolge ist entscheidend.
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 ist eine 4x4-Matrix, die echte 3D-Darstellung ermöglicht. Beginnen Sie mit CATransform3DIdentity und wenden Sie Verschiebung, Skalierung und Drehung im Raum an.
var t = CATransform3DIdentity
t = CATransform3DScale(t, 1.2, 1.2, 1)
layer.transform = t3D-Drehung
Drehen Sie um eine beliebige Achse mit CATransform3DRotate(t, angle, x, y, z). Eine Drehung um die y-Achse lässt eine Karte umklappen, eine Drehung um die x-Achse neigt sie nach vorn.
let angle = CGFloat.pi / 4
layer.transform = CATransform3DRotate(
CATransform3DIdentity, angle, 0, 1, 0) // around yPerspektive
Eine einfache 3D-Drehung wirkt ohne Perspektive flach. Setzen Sie das Element m34 der Einheitsmatrix auf einen kleinen negativen Wert, etwa -1/500, um Tiefe hinzuzufügen.
var perspective = CATransform3DIdentity
perspective.m34 = -1.0 / 500.0
layer.transform = CATransform3DRotate(perspective, .pi / 4, 0, 1, 0)Warum m34 Tiefe erzeugt
Der Term m34 teilt x und y durch die Tiefe, sodass weiter entfernte Punkte kleiner erscheinen. Kleinere Beträge, also größere Nenner, erzeugen eine dezente Perspektive. Größere Beträge verstärken sie.
// -1/2000 = subtle, -1/200 = dramatic
perspective.m34 = -1.0 / 1000.0Ankerpunkt und Transformationen
Transformationen drehen sich um den anchorPoint. Um eine Karte um ihre linke Kante zu drehen, setzen Sie zuerst anchorPoint auf (0, 0.5).
layer.anchorPoint = CGPoint(x: 0, y: 0.5)
layer.transform = CATransform3DRotate(
CATransform3DIdentity, .pi / 3, 0, 1, 0)Transformationen animieren
Die gesamte Transformation ist animierbar. Animieren Sie den Key Path transform oder Unter-Keys wie transform.rotation.y, um nur eine Achse zu animieren.
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-Transformationen
Setzen Sie sublayerTransform auf einem übergeordneten Layer, um die Perspektive gleichzeitig auf alle untergeordneten Layer anzuwenden – praktisch für 3D-Container und Karussells.
var t = CATransform3DIdentity
t.m34 = -1.0 / 500.0
parentLayer.sublayerTransform = tzPosition und Tiefensortierung
zPosition steuert die Zeichenreihenfolge im 3D-Raum. Höhere Werte werden weiter vorne gerendert. Kombinieren Sie dies mit einer Rotation für geschichtete, überlappende 3D-Szenen.
frontCard.zPosition = 10
backCard.zPosition = 0Transformationen kombinieren
Verketten Sie Transformationen, um Effekte zusammenzusetzen. Denken Sie daran, dass die Matrizenmultiplikation nicht kommutativ ist: Erst rotieren und dann skalieren unterscheidet sich von erst skalieren und dann rotieren.
var t = CATransform3DIdentity
t = CATransform3DRotate(t, .pi / 6, 0, 0, 1)
t = CATransform3DScale(t, 2, 2, 1)Schnelltest: Transformationen
Testen Sie Ihr Verständnis von 3D-Transformationen.
Zusammenfassung: Transformationen und 3D-Effekte
Transformationen verändern die Form von Layern, ohne deren Bounds zu verändern: CGAffineTransform für 2D und CATransform3D für echtes 3D. Fügen Sie Tiefe hinzu, indem Sie m34 (etwa -1/500) setzen, legen Sie den Drehpunkt über anchorPoint fest und wenden Sie die Perspektive des Containers mit sublayerTransform an.
Animieren Sie Transformationen als Ganzes oder je Achse, sortieren Sie die Tiefe mit zPosition und denken Sie daran, dass die Reihenfolge beim Zusammensetzen von Transformationen entscheidend ist.
Lerne Swift mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 122
- Lektionen
- 409
Häufig gestellte Fragen
Ist die Lektion „Transformationen und 3D-Effekte“ kostenlos?
Ja — der vollständige Text von „Transformationen und 3D-Effekte“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Swift Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Swift Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Transformationen und 3D-Effekte“?
Wenden Sie affine und 3D-Transformationen an. Du übst Swift Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Swift Academy zu starten?
Keine Vorkenntnisse erforderlich. Swift Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Transformationen und 3D-Effekte“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Swift Academy-Lektion Code schreiben und ausführen?
Ja. Jede Swift Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Grundlagen von CALayer
- Implizite und explizite Animationen
- Transformationen und 3D-Effekte
- Benutzerdefiniertes Zeichnen mit Core Graphics