Swift Academy · บทเรียน

แอนิเมชันโดยนัยและโดยชัดแจ้ง

ทำให้คุณสมบัติของเลเยอร์เคลื่อนไหวด้วย CABasicAnimation

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

สองวิธีในการทำภาพเคลื่อนไหวให้ layer

Core Animation มีภาพเคลื่อนไหวแบบ โดยปริยาย ซึ่งทำงานอัตโนมัติเมื่อคุณสมบัติเปลี่ยนแปลง และภาพเคลื่อนไหวแบบ ระบุเอง ซึ่งคุณสร้างวัตถุภาพเคลื่อนไหวขึ้นมา

การเข้าใจทั้งสองแบบและวิธีที่ทั้งสองทำงานร่วมกันเป็นกุญแจสำคัญของการเคลื่อนไหวที่ราบรื่น

ภาพเคลื่อนไหวโดยปริยาย

การเปลี่ยนคุณสมบัติที่ทำภาพเคลื่อนไหวได้ของ layer ที่ทำงานอย่างอิสระ จะเรียกภาพเคลื่อนไหวโดยปริยายโดยใช้เส้นโค้งเริ่มต้น 0.25 วินาที โดยไม่ต้องสร้างวัตถุภาพเคลื่อนไหว

let layer = CALayer()
// Later, this animates automatically:
layer.opacity = 0.0

คุณสมบัติที่ทำภาพเคลื่อนไหวได้

คุณสมบัติของ layer หลายรายการทำภาพเคลื่อนไหวได้ ได้แก่ opacity, position, bounds, backgroundColor, transform, cornerRadius และอื่น ๆ

layer.cornerRadius = 20 // animates implicitly
layer.backgroundColor = UIColor.systemGreen.cgColor

การกระทำและกลไกการกระทำ

ภาพเคลื่อนไหวโดยปริยายขับเคลื่อนด้วยการกระทำ เมื่อคุณสมบัติเปลี่ยนแปลง layer จะค้นหา CAAction เพื่อเรียกใช้ คุณสามารถปรับแต่งหรือปิดการกระทำเหล่านี้ได้

layer ที่มีมุมมองอยู่เบื้องหลังจะปิดภาพเคลื่อนไหวโดยปริยาย

layer ที่เชื่อมกับ UIView จะปิดภาพเคลื่อนไหวโดยปริยาย คุณใช้ UIView.animate เพื่อ animate สิ่งเหล่านั้นแทน หรือใช้ภาพเคลื่อนไหวแบบระบุเอง

UIView.animate(withDuration: 0.3) {
    view.alpha = 0
}

CABasicAnimation

CABasicAnimation ทำภาพเคลื่อนไหวให้คุณสมบัติหนึ่งเปลี่ยนจาก fromValue ไปเป็น toValue เพิ่มลงใน layer ด้วยเส้นทางคีย์ที่ตรงกับคุณสมบัตินั้น

let anim = CABasicAnimation(keyPath: "opacity")
anim.fromValue = 1.0
anim.toValue = 0.0
anim.duration = 0.5
layer.add(anim, forKey: "fade")

ค่าที่แสดงกับค่าแบบจำลอง

ภาพเคลื่อนไหวแบบระบุเองจะเปลี่ยนเฉพาะค่าที่แสดงบนหน้าจอ ส่วนค่าแบบจำลองของ layer จะกลับไปเป็นค่าเดิมเมื่อภาพเคลื่อนไหวจบลง

หากต้องการให้การเปลี่ยนแปลงคงอยู่ ให้ตั้งค่าของแบบจำลองด้วย

layer.opacity = 0.0 // set model value so it persists
layer.add(anim, forKey: "fade")

ภาพเคลื่อนไหวแบบคีย์เฟรม

CAKeyframeAnimation ทำภาพเคลื่อนไหวผ่าน values หลายค่าตาม keyTimes หรือเคลื่อนไปตาม path เหมาะอย่างยิ่งสำหรับการเด้งหรือการเคลื่อนที่ตามเส้นโค้ง

let move = CAKeyframeAnimation(keyPath: "position")
move.values = [
    NSValue(cgPoint: CGPoint(x: 0, y: 0)),
    NSValue(cgPoint: CGPoint(x: 100, y: 0)),
    NSValue(cgPoint: CGPoint(x: 100, y: 100))
]
move.duration = 1.0
layer.add(move, forKey: "path")

ฟังก์ชันกำหนดจังหวะ

ควบคุมการเร่งด้วย timingFunction ซึ่งอาจเป็นการเร่งเข้า การผ่อนออก แบบเชิงเส้น หรือเส้นโค้งเบซิเยร์ลูกบาศก์ที่กำหนดเอง

anim.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)

การจัดกลุ่มและทรานแซกชัน

ครอบการเปลี่ยนแปลงหลายรายการไว้ใน CATransaction เพื่อใช้ระยะเวลาและจังหวะร่วมกัน หรือเพื่อปิดภาพเคลื่อนไหวโดยปริยายทั้งหมด

CATransaction.begin()
CATransaction.setDisableActions(true)
layer.position = CGPoint(x: 200, y: 200)
CATransaction.commit()

ผู้มอบหมายภาพเคลื่อนไหวและการทำงานเมื่อเสร็จสิ้น

กำหนด CATransaction.setCompletionBlock หรือผู้มอบหมายภาพเคลื่อนไหว เพื่อเรียกใช้โค้ดเมื่อการเคลื่อนไหวเสร็จสิ้น เช่น การล้างข้อมูล การเชื่อมภาพเคลื่อนไหวต่อกัน หรือการอัปเดตสถานะ

CATransaction.begin()
CATransaction.setCompletionBlock { print("done") }
layer.add(anim, forKey: "fade")
CATransaction.commit()

ตรวจสอบสั้น ๆ: ภาพเคลื่อนไหว

ทดสอบความเข้าใจเกี่ยวกับภาพเคลื่อนไหวโดยปริยายและแบบระบุเอง

สรุป: ภาพเคลื่อนไหวโดยปริยายและแบบระบุเอง

layer ที่ทำงานอย่างอิสระจะทำภาพเคลื่อนไหวโดยปริยายผ่านการกระทำเมื่อคุณสมบัติที่ทำภาพเคลื่อนไหวได้เปลี่ยนแปลง ส่วน layer ที่มีมุมมองอยู่เบื้องหลังจะปิดการทำงานนี้และใช้ UIView.animate ภาพเคลื่อนไหวแบบระบุเองอย่าง CABasicAnimation และ CAKeyframeAnimation จะทำภาพเคลื่อนไหวให้ค่าที่แสดง ดังนั้นให้อัปเดตค่าแบบจำลองเพื่อให้ผลลัพธ์คงอยู่

ปรับแต่งการเคลื่อนไหวด้วยฟังก์ชันกำหนดจังหวะ รวมการเปลี่ยนแปลงเป็นชุดด้วย CATransaction และใช้บล็อกการทำงานเมื่อเสร็จสิ้นสำหรับงานต่อเนื่อง

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

บทเรียน “แอนิเมชันโดยนัยและโดยชัดแจ้ง” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “แอนิเมชันโดยนัยและโดยชัดแจ้ง”

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

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

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

บทเรียน “แอนิเมชันโดยนัยและโดยชัดแจ้ง” ใช้เวลานานแค่ไหน

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

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

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

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

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