Swift Academy · Pelajaran

Transformasi dan Efek 3D

Terapkan transformasi afin dan 3D.

Pelajaran 3 dari 413 langkah

Transformasi dan Efek 3D adalah pelajaran Swift Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Swift Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Swift Academy mencakup 4 pelajaran total.

Transformasi Memindahkan dan Mengubah Bentuk

Sebuah transform mengubah bentuk lapisan—memindahkan, menskalakan, memutar, atau memiringkan—tanpa mengubah batasnya. Core Animation mendukung transformasi 2D (CGAffineTransform) dan 3D (CATransform3D).

Transformasi Afinitas 2D

CGAffineTransform menangani transformasi datar. Gabungkan transformasi dengan konkatenasi; urutannya penting.

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 adalah matriks 4x4 yang memungkinkan 3D sejati. Mulailah dari CATransform3DIdentity, lalu terapkan pemindahan, penskalaan, dan rotasi dalam ruang 3D.

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

Rotasi 3D

Putar pada sumbu apa pun dengan CATransform3DRotate(t, angle, x, y, z). Rotasi pada sumbu y membalik kartu, sedangkan rotasi pada sumbu x memiringkannya ke depan.

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

Perspektif

Rotasi 3D biasa terlihat datar tanpa perspective. Tetapkan elemen m34 pada matriks identitas ke nilai negatif kecil, sekitar -1/500, untuk menambahkan kedalaman.

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

Mengapa m34 Menciptakan Kedalaman

Istilah m34 membagi x dan y dengan kedalaman, sehingga titik yang lebih jauh terlihat lebih kecil. Besaran yang lebih kecil, dengan penyebut yang lebih besar, menghasilkan perspektif yang halus; besaran yang lebih besar membuat efeknya berlebihan.

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

Titik Jangkar dan Transformasi

Transformasi berporos pada anchorPoint. Untuk memutar kartu pada tepi kirinya, tetapkan anchorPoint ke (0, 0.5) terlebih dahulu.

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

Menganimasikan Transformasi

Seluruh transformasi dapat dianimasikan. Animasikan jalur kunci transform, atau subkunci seperti transform.rotation.y untuk satu sumbu saja.

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

Transformasi Sublayer

Atur sublayerTransform pada induk untuk menerapkan perspektif ke semua turunannya sekaligus—berguna untuk kontainer 3D dan carousel.

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

zPosition dan Pengurutan Kedalaman

zPosition mengontrol urutan penggambaran dalam ruang 3D. Nilai yang lebih tinggi dirender di depan. Gabungkan dengan rotasi untuk membuat adegan 3D berlapis dan saling tumpang tindih.

frontCard.zPosition = 10
backCard.zPosition = 0

Menggabungkan Transformasi

Rangkaikan transformasi untuk menyusun berbagai efek. Ingat bahwa perkalian matriks tidak komutatif—memutar lalu menskalakan berbeda dari menskalakan lalu memutar.

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

Pemeriksaan Singkat: Transformasi

Uji pemahaman Anda tentang transformasi 3D.

Jawab di pelajaran interaktif

Ringkasan: Transformasi dan Efek 3D

Transformasi mengubah bentuk layer tanpa mengubah batasnya: CGAffineTransform untuk 2D dan CATransform3D untuk 3D sejati. Tambahkan kedalaman dengan mengatur m34 (sekitar -1/500), tentukan titik pivot melalui anchorPoint, dan terapkan perspektif kontainer dengan sublayerTransform.

Animasikan transformasi secara keseluruhan atau per sumbu, urutkan kedalaman dengan zPosition, dan ingat bahwa urutan composition transformasi berpengaruh.

Gratis untuk memulai

Belajar Swift dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 122
Pelajaran: 409

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Transformasi dan Efek 3D” gratis?

Ya — teks lengkap “Transformasi dan Efek 3D” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Swift Academy, upgrade ke CoddyKit PRO. Kursus Swift Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Transformasi dan Efek 3D”?

Terapkan transformasi afin dan 3D. Kamu berlatih Swift Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Swift Academy?

Tidak diperlukan pengalaman sebelumnya. Swift Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Transformasi dan Efek 3D” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Swift Academy ini?

Ya. Setiap pelajaran Swift Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Swift Academy