แอนิเมชันโดยนัยและโดยชัดแจ้ง
ใช้ตัวปรับแต่ง .animation() เทียบกับบล็อก withAnimation {} สำหรับกรณีการใช้งานต่างกัน
แอนิเมชันโดยนัยและโดยชัดแจ้ง เป็นบทเรียน Swift Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Swift Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Swift Academy มีบทเรียนทั้งหมด 4 บทเรียน
รูปแบบแอนิเมชันสองแบบ
SwiftUI รองรับแอนิเมชันโดยนัย (ตัวปรับแต่ง .animation) และแอนิเมชันที่ระบุชัด (คลุมด้วยการปิดกั้น withAnimation)
struct Demo: View {
@State private var scale = 1.0
var body: some View {
Circle().scaleEffect(scale)
}
}แอนิเมชันโดยนัยด้วย .animation
การแนบ .animation(_:value:) กับมุมมองจะทำให้มุมมองนั้นเคลื่อนไหวทุกครั้งที่ค่าที่ผูกไว้เปลี่ยนแปลง
Circle()
.scaleEffect(scale)
.animation(.easeInOut(duration: 0.3), value: scale)การเรียกใช้แอนิเมชันโดยนัย
การเปลี่ยนแปลงสถานะใด ๆ ที่ส่งผลต่อมุมมองจะเรียกใช้แอนิเมชันโดยนัยที่กำหนดไว้กับมุมมองนั้นโดยอัตโนมัติ
Button("Grow") {
scale = 2.0 // .animation fires automatically
}แอนิเมชันที่ระบุชัดด้วย withAnimation
withAnimation จะครอบการเปลี่ยนแปลงสถานะ และทำให้การเปลี่ยนแปลงของมุมมองทั้งหมดที่เกิดขึ้นตามมาเคลื่อนไหวพร้อมกัน
Button("Animate") {
withAnimation(.spring()) {
scale = 2.0
offset = 50
}
}การทำให้พร็อพเพอร์ตีหลายรายการเคลื่อนไหว
withAnimation เหมาะกว่าเมื่อคุณต้องการให้การเปลี่ยนแปลงสถานะหลายรายการเคลื่อนไหวสอดคล้องกันเป็นการดำเนินการเดียว
withAnimation(.easeOut(duration: 0.5)) {
isExpanded = true
rotation = 90
opacity = 0.5
}ชนิดของแอนิเมชัน
Swift มีแอนิเมชันแบบ spring, easeIn, easeOut, easeInOut, linear และเส้นโค้งกำหนดจังหวะแบบกำหนดเอง
.spring(response: 0.4, dampingFraction: 0.6)
.easeInOut(duration: 0.3)
.linear(duration: 0.5)
.timingCurve(0.2, 0.8, 0.2, 1.0, duration: 0.4)การปิดใช้แอนิเมชัน
ส่งค่า .animation(.none, value:) หรือครอบการเปลี่ยนแปลงด้วย withAnimation(nil) เพื่อปิดใช้แอนิเมชันเป็นบางส่วน
Circle()
.scaleEffect(scale)
.animation(.none, value: scale) // no animationลำดับความสำคัญของแอนิเมชัน
withAnimation ที่ระบุชัดจะมีลำดับความสำคัญเหนือกว่าตัวปรับแต่ง .animation โดยนัยบนมุมมองลูก
withAnimation(.linear) {
value = true // linear wins over any .animation on subviews
}แอนิเมชันแบบทำซ้ำ
ใช้ .repeatForever หรือ .repeatCount สำหรับแอนิเมชันที่วนซ้ำ เช่น เอฟเฟกต์กะพริบเป็นจังหวะ
.animation(
.easeInOut(duration: 0.8).repeatForever(autoreverses: true),
value: pulsing
)การหน่วงเวลาและความเร็ว
นำแอนิเมชันมาประกอบกันด้วยตัวปรับแต่ง .delay และ .speed บนค่าแอนิเมชัน
.animation(.spring().delay(0.2).speed(1.5), value: flag)การเลือกใช้แบบโดยนัยหรือแบบระบุชัด
ใช้แบบโดยนัยสำหรับแอนิเมชันของมุมมองเดียวที่ผูกกับค่าเดียว และใช้แบบระบุชัดเมื่อต้องประสานพร็อพเพอร์ตีหรือมุมมองหลายรายการ
// Implicit: simple, single view
.animation(.easeIn, value: isVisible)
// Explicit: multi-property or cross-view
withAnimation { a = 1; b = 2 }ตรวจสอบความเข้าใจ
แนวทางใดเหมาะที่สุดสำหรับประสานการทำให้คุณสมบัติของสถานะหลายรายการเคลื่อนไหวพร้อมกัน
สรุปบทเรียน
แอนิเมชันโดยนัย (.animation(_:value:)) จะตอบสนองโดยอัตโนมัติเมื่อค่าบนวิวเดียวเปลี่ยนแปลง ส่วนแอนิเมชันแบบชัดแจ้ง (withAnimation {}) ใช้ประสานการเปลี่ยนแปลงหลายรายการ คุณสามารถใช้ร่วมกับ .delay, .speed และ .repeatForever เพื่อสร้างเอฟเฟกต์ที่ซับซ้อนได้
คำถามที่พบบ่อย
บทเรียน “แอนิเมชันโดยนัยและโดยชัดแจ้ง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “แอนิเมชันโดยนัยและโดยชัดแจ้ง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Swift Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Swift Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “แอนิเมชันโดยนัยและโดยชัดแจ้ง”
ใช้ตัวปรับแต่ง .animation() เทียบกับบล็อก withAnimation {} สำหรับกรณีการใช้งานต่างกัน คุณปฏิบัติ Swift Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Swift Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Swift Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “แอนิเมชันโดยนัยและโดยชัดแจ้ง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Swift Academy นี้ได้ไหม
ได้ บทเรียน Swift Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- แอนิเมชันโดยนัยและโดยชัดแจ้ง
- matchedGeometryEffect สำหรับการเปลี่ยนฉากแบบฮีโร่
- AnimatableModifier และ Animatable แบบกำหนดเอง
- TimelineView และ Canvas สำหรับการวาดประสิทธิภาพสูง