Przekształcenia i efekty 3D
Stosowanie przekształceń afinicznych i 3D.
Przekształcenia i efekty 3D to bezpłatna lekcja Swift Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Swift Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Swift Academy zawiera 4 lekcji w sumie.
Transformacje przesuwają i zniekształcają
Transformacja zmienia kształt warstwy — przesuwa ją, skaluje, obraca lub pochyla — bez zmiany jej granic. Core Animation obsługuje zarówno transformacje 2D (CGAffineTransform), jak i 3D (CATransform3D).
Transformacje afiniczne 2D
CGAffineTransform obsługuje transformacje płaskie. Można je łączyć przez konkatenację; kolejność ma znaczenie.
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 jest macierzą 4×4 umożliwiającą prawdziwe 3D. Należy rozpocząć od CATransform3DIdentity, a następnie zastosować przesunięcie, skalowanie i obrót w przestrzeni.
var t = CATransform3DIdentity
t = CATransform3DScale(t, 1.2, 1.2, 1)
layer.transform = tObrót 3D
Wokół dowolnej osi można obracać za pomocą CATransform3DRotate(t, angle, x, y, z). Obrót wokół osi y odwraca kartę, a wokół osi x pochyla ją do przodu.
let angle = CGFloat.pi / 4
layer.transform = CATransform3DRotate(
CATransform3DIdentity, angle, 0, 1, 0) // around yPerspektywa
Zwykły obrót 3D wygląda płasko bez perspektywy. Należy ustawić element m34 macierzy jednostkowej na niewielką wartość ujemną (około -1/500), aby dodać głębię.
var perspective = CATransform3DIdentity
perspective.m34 = -1.0 / 500.0
layer.transform = CATransform3DRotate(perspective, .pi / 4, 0, 1, 0)Dlaczego m34 tworzy głębię
Element m34 dzieli współrzędne x i y przez głębię, dzięki czemu dalsze punkty się zmniejszają. Mniejsze wartości bezwzględne (większy mianownik) dają subtelną perspektywę, a większe ją wzmacniają.
// -1/2000 = subtle, -1/200 = dramatic
perspective.m34 = -1.0 / 1000.0Punkt zakotwiczenia a transformacje
Transformacje odbywają się wokół anchorPoint. Aby obrócić kartę wokół jej lewej krawędzi, należy najpierw ustawić anchorPoint na (0, 0.5).
layer.anchorPoint = CGPoint(x: 0, y: 0.5)
layer.transform = CATransform3DRotate(
CATransform3DIdentity, .pi / 3, 0, 1, 0)Animowanie transformacji
Całą transformację można animować. Należy animować ścieżkę klucza transform albo podścieżki, takie jak transform.rotation.y, aby animować pojedynczą oś.
let spin = CABasicAnimation(keyPath: "transform.rotation.y")
spin.fromValue = 0
spin.toValue = CGFloat.pi * 2
spin.duration = 1.5
layer.add(spin, forKey: "spin")Transformacje podwarstwy
Ustawienie sublayerTransform na warstwie nadrzędnej pozwala zastosować perspektywę do wszystkich jej elementów podrzędnych jednocześnie — jest to przydatne w przypadku kontenerów 3D i karuzel.
var t = CATransform3DIdentity
t.m34 = -1.0 / 500.0
parentLayer.sublayerTransform = tzPosition i sortowanie według głębokości
zPosition steruje kolejnością rysowania w przestrzeni 3D. Wyższe wartości są renderowane z przodu. Połącz je z obrotem, aby tworzyć warstwowe, nakładające się sceny 3D.
frontCard.zPosition = 10
backCard.zPosition = 0Łączenie transformacji
Łącz transformacje, aby komponować efekty. Pamiętaj, że mnożenie macierzy nie jest przemienne — obrót, a następnie skalowanie daje inny rezultat niż skalowanie, a następnie obrót.
var t = CATransform3DIdentity
t = CATransform3DRotate(t, .pi / 6, 0, 0, 1)
t = CATransform3DScale(t, 2, 2, 1)Szybkie sprawdzenie: transformacje
Sprawdź swoją wiedzę na temat transformacji 3D.
Podsumowanie: transformacje i efekty 3D
Transformacje zmieniają kształt warstw bez modyfikowania ich granic: CGAffineTransform służy do grafiki 2D, a CATransform3D do prawdziwej grafiki 3D. Dodaj głębię, ustawiając m34 (około -1/500), określ punkt obrotu za pomocą anchorPoint i zastosuj perspektywę kontenera przez sublayerTransform.
Animuj transformacje w całości lub osobno dla poszczególnych osi, sortuj głębię za pomocą zPosition i pamiętaj, że kolejność składania transformacji ma znaczenie.
Często zadawane pytania
Czy lekcja „Przekształcenia i efekty 3D” jest bezpłatna?
Tak — pełny tekst „Przekształcenia i efekty 3D” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Swift Academy, przejdź na CoddyKit PRO. Kurs Swift Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Przekształcenia i efekty 3D”?
Stosowanie przekształceń afinicznych i 3D. Ćwiczysz Swift Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Swift Academy?
Nie wymagamy żadnego doświadczenia. Swift Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Przekształcenia i efekty 3D”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Swift Academy?
Tak. Każda lekcja Swift Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Podstawy CALayer
- Animacje niejawne i jawne
- Przekształcenia i efekty 3D
- Niestandardowe rysowanie za pomocą Core Graphics