Swift Academy · Pelajaran

Transformasi dan Kesan 3D

Gunakan transformasi afin dan 3D.

Pelajaran 3 daripada 413 langkah

Transformasi dan Kesan 3D ialah pelajaran Swift Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Swift Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Swift Academy merangkumi sejumlah 4 pelajaran.

Transformasi Mengalih dan Mengubah Bentuk

transform mengubah bentuk layer—mentranslasikan, menskalakan, memutarkan atau menyerongkannya—tanpa mengubah bounds. Core Animation menyokong kedua-dua 2D, iaitu CGAffineTransform, dan 3D, iaitu CATransform3D.

Transformasi Afin 2D

CGAffineTransform mengendalikan transformasi satah. Gabungkan transformasi melalui pencantuman; susunannya 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 ialah matriks 4x4 yang membolehkan 3D sebenar. Mulakan dengan CATransform3DIdentity, kemudian gunakan translasi, penskalaan dan putaran dalam ruang tersebut.

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

Putaran 3D

Putar mengelilingi mana-mana paksi dengan CATransform3DRotate(t, angle, x, y, z). Putaran mengelilingi paksi-y membalikkan kad; putaran mengelilingi paksi-x mencondongkannya ke hadapan.

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

Perspektif

Putaran 3D biasa kelihatan rata tanpa perspective. Tetapkan unsur m34 matriks identiti kepada nilai negatif kecil, kira-kira -1/500, untuk menambah kedalaman.

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

Mengapa m34 Mencipta Kedalaman

Terma m34 membahagikan x dan y dengan kedalaman, jadi titik yang lebih jauh mengecil. Magnitud yang lebih kecil, iaitu penyebut yang lebih besar, menghasilkan perspektif halus; magnitud yang lebih besar membesar-besarkannya.

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

Titik Anchor dan Transformasi

Transformasi berpusat pada anchorPoint. Untuk memutarkan kad mengelilingi tepi kirinya, tetapkan anchorPoint kepada (0, 0.5) terlebih dahulu.

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

Menganimasikan transform

Keseluruhan transform boleh dianimasikan. Animasikan laluan kunci transform, atau sub-kunci seperti transform.rotation.y untuk satu paksi.

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 Sub-lapisan

Tetapkan sublayerTransform pada lapisan induk untuk menggunakan perspektif pada semua anaknya serentak—berguna untuk bekas 3D dan karusel.

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

zPosition dan Pengisihan Kedalaman

zPosition mengawal susunan lukisan dalam ruang 3D. Nilai yang lebih tinggi dipaparkan di hadapan. Gabungkannya dengan putaran untuk menghasilkan pemandangan 3D yang berlapis dan bertindih.

frontCard.zPosition = 10
backCard.zPosition = 0

Menggabungkan Transformasi

Gabungkan transformasi untuk menyusun kesan. Ingat bahawa pendaraban matriks tidak bersifat komutatif—memutar kemudian menskala menghasilkan kesan yang berbeza daripada menskala kemudian memutar.

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

Semakan Pantas: Transformasi

Uji pemahaman Anda tentang transformasi 3D.

Jawab dalam pelajaran interaktif

Imbas Kembali: Transformasi dan Kesan 3D

Transformasi mengubah bentuk lapisan tanpa mengubah sempadannya: CGAffineTransform untuk 2D dan CATransform3D untuk 3D sebenar. Tambahkan kedalaman dengan menetapkan m34 (kira-kira -1/500), tetapkan titik pangsi melalui anchorPoint, dan gunakan perspektif bekas dengan sublayerTransform.

Animasikan transformasi secara keseluruhan atau mengikut paksi, isih kedalaman dengan zPosition, dan ingat bahawa susunan penggabungan transformasi adalah penting.

Percuma untuk bermula

Pelajari Swift dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 122
Pelajaran: 409

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Transformasi dan Kesan 3D” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Swift Academy, termasuk “Transformasi dan Kesan 3D”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Swift Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Transformasi dan Kesan 3D”?

Gunakan transformasi afin dan 3D. Anda berlatih Swift Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Swift Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Swift Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Transformasi dan Kesan 3D” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Swift Academy ini?

Ya. Setiap pelajaran Swift Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Swift Academy