Swift Academy · บทเรียน

การแปลงและเอฟเฟกต์สามมิติ

ใช้การแปลงแบบแอฟฟีนและสามมิติ

การแปลงและเอฟเฟกต์สามมิติ เป็นบทเรียน Swift Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Swift Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Swift Academy มีบทเรียนทั้งหมด 4 บทเรียน

transform ช่วยเคลื่อนย้ายและบิดรูปทรง

transform เปลี่ยนรูปร่างของ layer เช่น เลื่อนตำแหน่ง ปรับขนาด หมุน และเอียง โดยไม่เปลี่ยน bounds ของ layer Core Animation รองรับทั้งแบบสองมิติ (CGAffineTransform) และสามมิติ (CATransform3D)

transform แบบแอฟฟีนสองมิติ

CGAffineTransform จัดการการแปลงรูปแบบระนาบ คุณสามารถรวมการแปลงหลายรายการด้วยการต่อเข้าด้วยกัน โดยลำดับมีความสำคัญ

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 คือเมทริกซ์ขนาด 4x4 ที่ทำให้เกิดสามมิติจริง เริ่มจาก CATransform3DIdentity แล้วใช้การเลื่อนตำแหน่ง การปรับขนาด และการหมุนในพื้นที่สามมิติ

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

การหมุนสามมิติ

หมุนรอบแกนใดก็ได้ด้วย CATransform3DRotate(t, angle, x, y, z) การหมุนรอบแกน y จะพลิกการ์ด ส่วนการหมุนรอบแกน x จะเอียงการ์ดไปด้านหน้า

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

มุมมองเชิงลึก

การหมุนสามมิติธรรมดาจะดูแบนหากไม่มีมุมมองเชิงลึก กำหนดสมาชิก m34 ของเมทริกซ์เอกลักษณ์ให้เป็นค่าลบขนาดเล็ก ประมาณ -1/500 เพื่อเพิ่มมิติความลึก

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

เหตุใด m34 จึงสร้างมิติความลึก

พจน์ m34 จะหารค่า x และ y ด้วยความลึก ทำให้จุดที่อยู่ไกลหดเล็กลง ค่าสัมบูรณ์ที่เล็กกว่า หรือส่วนหารที่ใหญ่กว่า จะให้มุมมองเชิงลึกที่ละเอียดอ่อนกว่า ส่วนค่าที่ใหญ่กว่าจะทำให้เอฟเฟกต์เด่นชัดขึ้น

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

จุดยึดและ transform

transform จะหมุนรอบ anchorPoint หากต้องการหมุนการ์ดรอบขอบด้านซ้าย ให้กำหนด anchorPoint เป็น (0, 0.5) ก่อน

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

ทำภาพเคลื่อนไหวให้ transform

คุณสมบัติ transform ทั้งหมดทำภาพเคลื่อนไหวได้ คุณสามารถทำภาพเคลื่อนไหวให้เส้นทางคีย์ transform หรือคีย์ย่อย เช่น transform.rotation.y สำหรับแกนเดียว

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

การแปลงซับเลเยอร์

ตั้งค่า sublayerTransform บนเลเยอร์แม่เพื่อใช้มุมมองแบบเปอร์สเปกทีฟกับเลเยอร์ลูกทั้งหมดได้พร้อมกัน ซึ่งเหมาะสำหรับคอนเทนเนอร์ 3D และม้าหมุน

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

zPosition และการเรียงลำดับตามความลึก

zPosition ควบคุมลำดับการวาดในพื้นที่ 3D ค่าที่สูงกว่าจะถูกวาดไว้ด้านหน้า ใช้ร่วมกับการหมุนเพื่อสร้างฉาก 3D แบบซ้อนทับเป็นชั้น

frontCard.zPosition = 10
backCard.zPosition = 0

การรวมการแปลง

นำการแปลงมาต่อกันเพื่อประกอบเป็นเอฟเฟกต์ โปรดจำไว้ว่าการคูณเมทริกซ์ไม่สลับที่ ดังนั้นการหมุนแล้วปรับขนาดจึงให้ผลต่างจากการปรับขนาดแล้วหมุน

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

ตรวจสอบความเข้าใจอย่างรวดเร็ว: การแปลง

ทดสอบความเข้าใจเกี่ยวกับการแปลง 3D ของคุณ

ทบทวน: การแปลงและเอฟเฟกต์ 3D

การแปลงจะปรับรูปร่างของเลเยอร์โดยไม่เปลี่ยนขอบเขต: ใช้ CGAffineTransform สำหรับ 2D และ CATransform3D สำหรับ 3D แท้ เพิ่มความลึกด้วยการตั้งค่า m34 (ประมาณ -1/500) กำหนดจุดหมุนผ่าน anchorPoint และใช้มุมมองแบบเปอร์สเปกทีฟกับคอนเทนเนอร์ด้วย sublayerTransform

ทำให้การแปลงเคลื่อนไหวทั้งหมดหรือแยกตามแกน เรียงลำดับความลึกด้วย zPosition และจำไว้ว่าลำดับการประกอบการแปลงมีผลต่อผลลัพธ์

คำถามที่พบบ่อย

บทเรียน “การแปลงและเอฟเฟกต์สามมิติ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การแปลงและเอฟเฟกต์สามมิติ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Swift Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Swift Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การแปลงและเอฟเฟกต์สามมิติ”

ใช้การแปลงแบบแอฟฟีนและสามมิติ คุณปฏิบัติ Swift Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Swift Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Swift Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “การแปลงและเอฟเฟกต์สามมิติ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Swift Academy นี้ได้ไหม

ได้ บทเรียน Swift Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Swift Academy