แอนิเมชันในการพัฒนามือถือ: คืออะไร มีประเภทอะไรบ้าง และวิธีใช้

แอนิเมชันใน Android: Property Animation และ View Animation

Android มีระบบแอนิเมชันหลักสองระบบ: View Animation (แบบเก่า) และ Property Animation (แบบสมัยใหม่) View Animation (หรือ Tween Animation) ทำงานเฉพาะกับการแสดงผลทางภาพ — มันเปลี่ยนการแสดงผลของวิว แต่ไม่เปลี่ยนคุณสมบัติจริงของมัน (ตัวอย่างเช่น พิกัดคลิกยังคงอยู่ที่เดิม) Property Animation ที่นำมาใช้ใน Android 3.0 เปลี่ยนคุณสมบัติจริงของวัตถุผ่าน Animator — ValueAnimator, ObjectAnimator หรือ AnimatorSet

ObjectAnimator และ ValueAnimator

ObjectAnimator เป็นคลาส Property Animation ที่ได้รับความนิยมมากที่สุด มันทำให้คุณสมบัติเฉพาะของวัตถุเคลื่อนไหว (เช่น translationX, alpha, scaleY) ภายในเวลาที่กำหนดด้วย Interpolator ที่กำหนด

ObjectAnimator.ofFloat(myView, "translationX", 0f, 300f).apply {
    duration = 500
    interpolator = FastOutSlowInInterpolator()
    startDelay = 200
}.start()

ValueAnimator ไม่ผูกกับวัตถุเฉพาะ — มันสร้างค่าที่สามารถใช้สำหรับคุณสมบัติหรือตรรกะแบบกำหนดเองใด ๆ

View Animation และแอนิเมชัน XML

View Animation อธิบายในไฟล์ XML res/anim/ รองรับสี่ประเภท: scale, translate, rotate, alpha ข้อเสียคือแอนิเมชันไม่เปลี่ยนพารามิเตอร์จริงของวิว สำหรับเอฟเฟกต์ง่าย ๆ (กะพริบ, หมุน) View Animation ยังคงใช้ได้ แต่สำหรับโปรเจกต์ใหม่แนะนำให้ใช้ Property Animation

แอนิเมชันใน Jetpack Compose

Jetpack Compose มี API แอนิเมชันที่ทันสมัย: animateAsState, Animatable, AnimatedVisibility และ AnimatedContent แอนิเมชันใน Compose เป็นแบบรีแอกทีฟ: เมื่อสถานะเปลี่ยน แอนิเมชันจะเริ่มโดยอัตโนมัติ

var expanded = remember { mutableStateOf(false) }
val size = animateAsState(
    if (expanded) 200f else 50f
)
Box(
    modifier = Modifier
        .size(size.value, size.value)
        .clickable { expanded = !expanded }
        .background(Color.Blue)
)

แอนิเมชันใน iOS: Core Animation และ UIView.animate

iOS มีสแต็กแอนิเมชันที่ทรงพลังซึ่งใช้ Core Animation — เฟรมเวิร์กระดับต่ำที่ทำงานกับ CALayer UIKit สร้างบน Core Animation ด้วยเมธอด UIView.animate และ UIViewPropertyAnimator ที่สะดวก

UIView.animate

UIView.animate เป็นวิธีที่ง่ายที่สุดในการทำแอนิเมชันใน iOS อนุญาตให้เคลื่อนไหว frame, alpha, transform, backgroundColor และคุณสมบัติ UIView อื่น ๆ

UIView.animate(
    withDuration: 0.5,
    delay: 0.2,
    usingSpringWithDamping: 0.6,
    initialSpringVelocity: 1.0,
    options: [.curveEaseInOut]
) {
    myView.frame.origin.x += 300
    myView.alpha = 0.5
}

UIKit Dynamics

UIKit Dynamics — เฟรมเวิร์กสำหรับแอนิเมชันทางกายภาพ: แรงโน้มถ่วง, การชน, สปริง, แรงดึงดูด ช่วยให้สร้างพฤติกรรมวัตถุที่สมจริงโดยไม่ต้องคำนวณฟิสิกส์ด้วยตนเอง ใช้สำหรับการเปลี่ยนภาพแบบกำหนดเอง, เมนูเคลื่อนไหว และองค์ประกอบเกม

CAAnimation และ Core Animation

Core Animation (CAAnimation, CABasicAnimation, CAKeyframeAnimation) — API ระดับต่ำสำหรับแอนิเมชัน CALayer รองรับการแปลง 3 มิติ, แอนิเมชันเส้นทาง (keyframe), การซ่อนและการประกอบ SwiftUI ใช้ Core Animation เบื้องหลังผ่านมอดิไฟเออร์ animation และ withAnimation

let animation = CABasicAnimation(keyPath: "transform.rotation.z")
animation.fromValue = 0
animation.toValue = CGFloat.pi * 2
animation.duration = 1.0
animation.repeatCount = .infinity
myLayer.add(animation, forKey: "rotation")

สำหรับโปรเจกต์ iOS ส่วนใหญ่จะใช้ SwiftUI พร้อมแอนิเมชันในตัว ตัวอย่างเช่น withAnimation ห่อการเปลี่ยนแปลงสถานะ ในบริบทที่เคลื่อนไหว

แอนิเมชันเวกเตอร์: Lottie และ Rive

แอนิเมชันที่ซับซ้อน (ตัวละคร, การเปลี่ยนภาพ, ตัวโหลด) นั้นยากที่จะ implement ด้วยโค้ด Lottie และ Rive แก้ปัญหานี้โดยให้นักออกแบบสร้างแอนิเมชันในโปรแกรมแก้ไขภาพและนักพัฒนาสามารถฝังลงในแอปเป็นคอมโพเนนต์พร้อมใช้งาน

Lottie

Lottie — ไลบรารีจาก Airbnb (ปัจจุบันคือ LottieFiles) ที่เรนเดอร์แอนิเมชันจาก Adobe After Effects ที่ส่งออกในรูปแบบ JSON รองรับบน Android, iOS, Flutter, React Native และ Web แอนิเมชัน Lottie เป็นเวกเตอร์ ปรับขนาดได้โดยไม่สูญเสียคุณภาพและสามารถปรับแต่งได้โดยการเขียนโปรแกรม (ความเร็ว, ความคืบหน้า, สี)

// Android
import com.airbnb.lottie.LottieAnimationView
val lottieView = findViewById<LottieAnimationView>(R.id.lottieView)
lottieView.setAnimation(R.raw.loading_animation)
lottieView.playAnimation()

Rive

Rive (เดิมชื่อ 2Dimensions) — เครื่องมือขั้นสูงกว่าสำหรับแอนิเมชันเวกเตอร์ แตกต่างจาก Lottie ตรงที่ Rive รองรับแอนิเมชันแบบโต้ตอบ: สถานะ, ตัวกระตุ้น, การเปลี่ยนภาพ แอนิเมชันถูกสร้างใน Rive Editor และควบคุมในแอปผ่าน State Machine Rive เหมาะสำหรับอินเทอร์เฟซเกม, ไอคอนเคลื่อนไหว และการเปลี่ยนภาพที่ซับซ้อนพร้อมการตอบสนอง

ที่ IT Sectr เราใช้ Lottie สำหรับแอนิเมชันตกแต่ง (ตัวโหลด, การดำเนินการสำเร็จ, สถานะว่าง) และ Rive สำหรับองค์ประกอบโต้ตอบของหน้าจอแนะนำ ซึ่งช่วยลดเวลาในการพัฒนาแอนิเมชันลง 60% เมื่อเทียบกับการ implement ด้วยตนเองบน UIKit หรือ Canvas

Shared Element Transition และ Hero Animation

Shared Element Transition — แอนิเมชันที่องค์ประกอบ (รูปภาพ, ข้อความ, การ์ด) เคลื่อนที่และเปลี่ยนรูปอย่างราบรื่นเมื่อเปลี่ยนระหว่างหน้าจอ สิ่งนี้สร้างภาพลวงตาของความต่อเนื่อง: ผู้ใช้ไม่ได้ "ไป" ที่หน้าจอใหม่ แต่ "ตกลงไป" ในองค์ประกอบ

Android Shared Element Transition

ใน Android การเปลี่ยนภาพ implement ผ่าน ActivityOptionsCompat และแอตทริบิวต์ transitionName FragmentTransaction รองรับ addSharedElement สำหรับการเปลี่ยนภาพภายใน Activity Compose ใช้ SharedTransitionLayout กับ SharedContentState

iOS Hero Transition

iOS ไม่มี Hero Transition ในตัว แต่ไลบรารี Hero (โดย Luke Zhao) implement รูปแบบนี้บน UIKit เพียงกำหนด id ให้กับองค์ประกอบบนทั้งสองหน้าจอ — Hero จะสร้างการเปลี่ยนภาพที่ราบรื่นโดยอัตโนมัติ ใน SwiftUI แอนิเมชันการเปลี่ยนภาพมีในตัวผ่าน NavigationStack และ matchedGeometryEffect

Flutter Hero

Flutter มีวิดเจ็ต Hero ในตัวพร้อมพารามิเตอร์ tag เมื่อสองหน้ามี Hero ที่มี tag เดียวกัน Flutter จะเคลื่อนไหวการเปลี่ยนภาพระหว่างทั้งสองโดยอัตโนมัติ นี่เป็นหนึ่งในวิธีที่ง่ายที่สุดในการ implement แอนิเมชันที่ซับซ้อนในแอปพลิเคชันมือถือ

Hero(
    tag: 'profile_avatar',
    child: CircleAvatar(
        backgroundImage: AssetImage('avatar.jpg'),
        radius: 50,
    ),
)

Spring Animation, Interpolator และ Easing

เพื่อให้แอนิเมชันดูเป็นธรรมชาติ มีการใช้เส้นโค้งความเร็ว — Interpolator ใน Android และ Easing ใน iOS เส้นโค้งเหล่านี้กำหนดว่าความเร็วของแอนิเมชันเปลี่ยนจากต้นจนจบอย่างไร

Interpolator ของ Android

Android รองรับ Interpolator ในตัวหลายตัว: LinearInterpolator (สม่ำเสมอ), AccelerateDecelerateInterpolator (ช้า-เร็ว-ช้า), FastOutSlowInInterpolator (Material Design), OvershootInterpolator (เกินเป้า) และ BounceInterpolator (กระดอน) Interpolator แบบกำหนดเองสามารถสร้างผ่าน XML หรือคลาส TimeInterpolator

Spring Animation

Spring Animation (แอนิเมชันสปริง) จำลองฟิสิกส์สปริงด้วยพารามิเตอร์ damping (การหน่วง) และ stiffness (ความแข็ง) การหน่วง 0 — การแกว่งไม่สิ้นสุด, 1 — ไม่มีการแกว่ง ความแข็งกำหนดความเร็วในการกลับ Spring Animation พร้อมใช้งานใน iOS (UIViewPropertyAnimator กับ UISpringTimingParameters), Android (SpringAnimation จาก physics2) และ SwiftUI (spring())

เอกสาร Spring Animation ใน Android มีตัวอย่างการกำหนดค่าโดยละเอียด

แอนิเมชันไทม์ไลน์

Timeline (ไทม์ไลน์) — วิธีการที่แอนิเมชันถูกแบ่งเป็นเฟรมตามเวลา ใช้สำหรับลำดับที่ซับซ้อนซึ่ง AnimationSet หรือแอนิเมชันกลุ่มไม่ยืดหยุ่นเพียงพอ Android รองรับ AnimatorSet, iOS — CAAnimationGroup, Flutter — Interval ใน AnimationController