Lottie — คืออะไร, อนิเมชันเวกเตอร์ในแอปมือถือ

Lottie คืออะไร?

Lottie — ไลบรารีข้ามแพลตฟอร์มสำหรับเล่นอนิเมชันเวกเตอร์ พัฒนาที่ Airbnb ในปี 2015 มันแก้ปัญหาไฟล์วิดีโอขนาดใหญ่และสไปรต์ชีตแบบราสเตอร์: นักออกแบบสร้างอนิเมชันใน After Effects ส่งออกผ่าน Bodymovin เป็น JSON และนักพัฒนานำไฟล์นี้ไปฝังในแอปมือถือ Lottie เรนเดอร์อนิเมชันโดยโปรแกรมผ่าน Canvas, Core Animation หรือ Skia ขึ้นอยู่กับแพลตฟอร์ม

ข้อได้เปรียบหลักของ Lottie — อนิเมชันเวกเตอร์สามารถขยายขนาดได้โดยไม่สูญเสียคุณภาพบนหน้าจอใด ๆ ตั้งแต่ Apple Watch ถึง TV 4K ขนาดไฟล์ JSON อนิเมชันโดยทั่วไปอยู่ที่ 5–50 KB ซึ่งเล็กกว่าไฟล์วิดีโอที่เทียบเท่าหลายสิบเท่า ตามข้อมูล Airbnb Engineering (2025) Lottie รองรับมากกว่า 80% ของฟีเจอร์ Adobe After Effects รวมถึงมาสก์ เอฟเฟกต์ เส้นโค้ง และนิพจน์

Bodymovin — เป็นปลั๊กอินสำหรับ After Effects (ฟรี, GitHub) ที่ทำให้คอมโพซิชันเป็นรูปแบบ JSON ที่รันไทม์ Lottie เข้าใจ รองรับ After Effects CC 2018 และใหม่กว่า สำหรับอนิเมชันที่ซับซ้อนที่มีคีย์เฟรมจำนวนมาก แนะนำให้ใช้ dotLottie — รูปแบบที่ใช้ Lottie JSON แต่ถูกบีบอัดและบรรจุในไฟล์เดียว

สถาปัตยกรรม Lottie: การเรนเดอร์ทำงานอย่างไร

Lottie ใช้สถาปัตยกรรมการเรนเดอร์แบบเลเยอร์ที่ปรับตามความสามารถของแพลตฟอร์ม บน Android อนิเมชันจะถูกวาดผ่าน Canvas API — เรนเดอร์เนอร์ของ Lottie เอง (LottieDrawable) ซึ่งไม่ใช้ระบบอนิเมชันของระบบ บน iOS Lottie อาศัย Core Animation Layers ให้ประสิทธิภาพสูงและ 60 FPS บน Flutter Lottie ใช้ Skia Canvas ผ่าน CustomPainter

การเรนเดอร์ผ่านสามขั้นตอน: การแยกวิเคราะห์ JSON — แยกวิเคราะห์อนิเมชันเป็น LottieComposition (เลเยอร์ทั้งหมด รูปร่าง คีย์เฟรม); การประมาณค่า — คำนวณค่าระหว่างกลางระหว่างคีย์เฟรมโดยพิจารณาจากเส้นโค้ง easing; การวาด — เรนเดอร์เฟรมปัจจุบันบน Canvas หรือผ่าน Core Animation Lottie รองรับการเร่งด้วยฮาร์ดแวร์: บน Android — การเร่งผ่าน Canvas ด้วย Hardware Accelerator บน iOS — CALayer พร้อมการเร่ง GPU ในตัวของ Core Animation

การใช้ Lottie บน Android (Kotlin)

บน Android LottieAnimationView ขยาย AppCompatImageView และจัดการวงจรการโหลดและเรนเดอร์ทั้งหมด ไฟล์ JSON วางในโฟลเดอร์ res/raw หรือ assets LottieAnimationView รองรับการควบคุมการเล่น — play, pause, resume, setFrame, setProgress, repeat, speed — และการฟังผ่าน AnimatorUpdateListener และ AnimatorListener

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animationView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:lottie_rawRes="@raw/loading_animation"
    app:lottie_autoPlay="true"
    app:lottie_loop="true" />

import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieListener

// การตั้งค่า LottieAnimationView โดยโปรแกรม
val lottieView = LottieAnimationView(context).apply {
    setAnimation(R.raw.celebrate_animation)
    repeatCount = ValueAnimator.INFINITE
    speed = 1.5f
    addAnimatorUpdateListener { animator ->
        val progress = animator.animatedValue as Float
        progressBar.progress = (progress * 100).toInt()
    }
    playAnimation()
}

// การโหลดจาก assets และแคช
lottieView.setAnimation("animations/confetti.json")
lottieView.setCacheStrategy(LottieAnimationView.CacheStrategy.Strong)

// LottieDrawable — การวาดแบบกำหนดเองโดยไม่ต้องใช้ View
val drawable = LottieDrawable().apply {
    setComposition(
        LottieCompositionFactory.fromRawRes(context, R.raw.star)
            .addListener { composition -> composition?.let { setComposition(it); play() } }
    )
}

แนวปฏิบัติที่ดีที่สุดสำหรับ Android: ใช้ setCacheStrategy(CacheStrategy.Strong) สำหรับอนิเมชันที่ทำซ้ำบ่อย ๆ — คอมโพซิชันถูกแคชในหน่วยความจำ และอินสแตนซ์ใหม่แต่ละตัวไม่ต้องแยกวิเคราะห์ JSON อีก สำหรับรายการ (RecyclerView) ให้ใช้ LottieAnimationView กับ enableMergePathsForKitKatAndAbove(true) และ disableExtraScaleModeForOlderWorkarounds() เพื่อเพิ่มประสิทธิภาพการเรนเดอร์ สำหรับอนิเมชันที่มีพื้นหลังโปร่งใส ให้ตั้งค่า android:layerType="hardware" เพื่อการเร่ง GPU

การใช้ Lottie บน iOS (Swift)

บน iOS AnimationView เป็นคลาส Lottie หลักสำหรับ UIKit และ SwiftUI มันถูกเพิ่มผ่าน Swift Package Manager หรือ CocoaPods ไฟล์ JSON ถูกเพิ่มในบันเดิลโปรเจกต์ AnimationView จะกำหนดสเกล (ความหนาแน่นของหน้าจอเชิงตรรกะ) โดยอัตโนมัติและใช้ Core Animation เพื่อเรนเดอร์เลเยอร์ที่ 60 FPS

import Lottie

// UIKit: AnimationView พร้อมควบคุมด้วยตนเอง
let animationView = AnimationView(name: "confetti")
animationView.frame = view.bounds
animationView.contentMode = .scaleAspectFit
animationView.loopMode = .loop
animationView.animationSpeed = 1.5
animationView.play(fromProgress: 0, toProgress: 0.5) { finished in
    print("Animation segment finished: \(finished)")
}
view.addSubview(animationView)

// UIKit: อนิเมชันพร้อมความคืบหน้า (สำหรับผูกกับเหตุการณ์)
animationView.play(fromFrame: AnimationFrameTime(30),
                    toFrame: AnimationFrameTime(90))

// SwiftUI: LottieView เป็น UIViewRepresentable
import Lottie
import SwiftUI

struct LottieView: UIViewRepresentable {
    let name: String
    var loopMode: LottieLoopMode = .loop
    @Binding var progress: CGFloat

    func makeUIView(context: Context) -> AnimationView {
        let view = AnimationView(name: name)
        view.contentMode = .scaleAspectFit
        view.loopMode = loopMode
        return view
    }

    func updateUIView(_ uiView: AnimationView, context: Context) {
        uiView.currentProgress = progress
    }
}

// การใช้งานใน SwiftUI
LottieView(name: "loading", progress: $animationProgress)
    .frame(width: 100, height: 100)

แนวปฏิบัติที่ดีที่สุดสำหรับ iOS: สำหรับอนิเมชันที่เริ่มทันทีหลังจากโหลด ให้ใช้ animationView.play(fromProgress: 0, toProgress: 1) กับ loopMode = .playOnce สำหรับเอฟเฟกต์เน้นเสียงแบบครั้งเดียว สำหรับ Lottie ใน UITableView/UICollectionView ให้ใช้ AnimationView กับไฟล์อนิเมชันที่แคชไว้ผ่าน LottieAnimation.cached การเรนเดอร์เลเยอร์จำนวนมาก (50+) อาจทำให้ FPS ลดลง — ในกรณีดังกล่าว ให้เปิดใช้งาน renderingEngine = .mainThread (ค่าเริ่มต้น) หรือ .coreAnimation สำหรับ macOS

Lottie เทียบกับวิดีโอ: เปรียบเทียบรูปแบบอนิเมชัน

Lottie แตกต่างจากไฟล์วิดีโอโดยพื้นฐาน: มันไม่เก็บพิกเซล แต่อธิบายรูปร่างเวกเตอร์ การแปลง และเส้นโค้งการเปลี่ยนแปลงเมื่อเวลาผ่านไป วิดีโอ (MP4, WebM) คือลำดับของเฟรมราสเตอร์ที่ความละเอียดคงที่ ความแตกต่างปรากฏในขนาดไฟล์ คุณภาพการปรับขนาด การโต้ตอบ และประสิทธิภาพ

เมื่อใดควรเลือก Lottie: ไอคอนโหลด, อนิเมชันไลก์/รีแอคชัน, หน้าจอแนะนำ, ไมโครอนิเมชันเน้นเสียงของปุ่ม สำหรับฉากที่ซับซ้อนที่มีเอฟเฟกต์ 3D, แสงเสมือนจริง หรือตัวละครเสมือนจริง วิดีโอยังคงเป็นตัวเลือกที่ใช้งานได้จริงกว่า Lottie ไม่ได้ออกแบบมาสำหรับเล่นฉากยาว (เกิน 10 วินาที) — ระยะเวลาที่เหมาะสมของอนิเมชันหนึ่งคือ 2–5 วินาที

การเพิ่มประสิทธิภาพ Lottie

ประสิทธิภาพ Lottie ขึ้นอยู่กับจำนวนเลเยอร์ ความซับซ้อนของมาสก์และเอฟเฟกต์ และเรนเดอร์เนอร์ เพื่อรักษา 60 FPS บนอุปกรณ์ระดับกลาง ให้ปฏิบัติตามคำแนะนำเหล่านี้: จำกัดจำนวนเลเยอร์ไว้ที่ 30–40 ต่อฉาก หลีกเลี่ยงการซ้อนทับของพรีคอมโพซิชันที่ซ้อนกัน ใช้ dotLottie สำหรับอนิเมชันที่ซับซ้อน

// การเพิ่มประสิทธิภาพ Lottie สำหรับ RecyclerView
import com.airbnb.lottie.LottieAnimationView
import com.airbnb.lottie.LottieDrawable
import com.airbnb.lottie.LottieCompositionFactory

// การแคชคอมโพซิชันในหน่วยความจำ
private val cache = LottieCompositionFactory.setCacheStrategy(CacheStrategy.Strong)

// พูล LottieAnimationView สำหรับการนำกลับมาใช้ใหม่
class LottiePool {
    private val pool = LinkedList<LottieAnimationView>()

    fun acquire(context: Context): LottieAnimationView {
        return pool.poll() ?: LottieAnimationView(context)
    }

    fun release(view: LottieAnimationView) {
        view.pauseAnimation()
        view.cancelAnimation()
        pool.add(view)
    }
}

// การปิดใช้งานฟีเจอร์ที่ไม่จำเป็น
lottieView.enableMergePathsForKitKatAndAbove(true)
lottieView.setHardwareAcceleration(true)
lottieView.setMaxFrame(60) // การจำกัดจำนวนเฟรม

การเพิ่มประสิทธิภาพเพิ่มเติม: เปิดใช้งาน enableMergePathsForKitKatAndAbove(true) สำหรับอุปกรณ์ที่ใช้ Android 4.4+ — ซึ่งจะรวมเส้นทางที่ซ้อนทับเป็นเส้นทางเดียว ลดจำนวนการเรียกวาด ใช้ dotLottie แทน JSON — รูปแบบไบนารีบีบอัดอนิเมชัน 50–80% ผ่านการทำให้เป็นอนุกรม protobuf ลดเวลาในการแยกวิเคราะห์ สำหรับอนิเมชันใน RecyclerView ให้ตั้งค่า repeatCount = 0 (เล่นครั้งเดียว) และหยุดอนิเมชันเมื่อเลื่อนผ่าน recyclerView.addOnScrollListener ตามข้อมูล Airbnb Engineering Blog (2025) มาตรการเหล่านี้ลดโหลด CPU ได้ถึง 40%