Lottie: คืออะไร อนิเมชัน และทำงานอย่างไรบนแพลตฟอร์มมือถือ

Lottie คืออะไรและทำงานอย่างไร

Lottie เป็นไลบรารีโอเพนซอร์สที่สร้างโดย Airbnb ในปี 2015 สำหรับเรนเดอร์อนิเมชันเวกเตอร์แบบเรียลไทม์ นักพัฒนาสร้างอนิเมชันใน Adobe After Effects ส่งออกผ่านปลั๊กอิน Bodymovin เป็น JSON และ Lottie เล่น JSON นั้นบนอุปกรณ์เป้าหมายโดยตีความเลเยอร์ รูปร่าง ความโปร่งใส และเส้นโค้งอนิเมชัน

แตกต่างจากไฟล์วิดีโอหรือ GIF ตรงที่ Lottie ไม่ขึ้นกับความละเอียด — อนิเมชันจะถูกเรนเดอร์เป็นเวกเตอร์และดูเหมือนกันบนอุปกรณ์ที่มี DPI ใดก็ได้ อนิเมชัน JSON มีขนาดเล็กกว่า GIF หรือวิดีโอที่เทียบเท่าโดยเฉลี่ย 5-10 เท่า ซึ่งสำคัญสำหรับแอปพลิเคชันมือถือที่มีแบนด์วิธจำกัด

ตามข้อมูลของ Airbnb Engineering การนำ Lottie มาใช้ลดขนาดอนิเมชันในแอปลง 80% เมื่อเทียบกับลำดับวิดีโอ Precomposed ในขณะที่ยังคง 60 FPS บนอุปกรณ์ที่รองรับทั้งหมด ปัจจุบัน Lottie รองรับบน iOS, Android, Flutter, React Native, Web (HTML Canvas และ SVG) และแพลตฟอร์มเดสก์ท็อป

ประสิทธิภาพของ Lottie มาจากการเรนเดอร์แบบเนทีฟ: บน iOS ใช้ Core Animation กับ CALayer บน Android — ใช้ Canvas เรนเดอเรอร์ของตัวเองใน C++ ผ่าน JNI ซึ่งช่วยให้สามารถเล่นอนิเมชันที่ซับซ้อนที่มีเลเยอร์หลายสิบชั้นได้โดยไม่ต้องดรอปเฟรมแม้บนอุปกรณ์ระดับกลาง แตกต่างจากโซลูชันที่ใช้ WebView (GIF, APNG, วิดีโอ) ตรงที่ Lottie ไม่สร้างกระบวนการเรนเดอร์แยกต่างหากและไม่ใช้หน่วยความจำเพิ่มเติมสำหรับการถอดรหัสเฟรม

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

ระบบนิเวศของ Lottie รวมถึงเครื่องเล่นอย่างเป็นทางการสำหรับแปดแพลตฟอร์ม ตัวแก้ไข LottieFiles สำหรับแสดงตัวอย่างในเบราว์เซอร์ และตลาดที่มีอนิเมชันพร้อมใช้นับพันรายการ นักพัฒนาสามารถดาวน์โหลด JSON รวมเข้ากับโปรเจกต์ และปรับสีและความเร็วตามระบบการออกแบบโดยไม่ต้องเปิด After Effects LottieFiles ยังมี SDK สำหรับการรวมที่รวดเร็วด้วยความสามารถในการโหลดอนิเมชันผ่านลิงก์ AIR ซึ่งช่วยให้อัปเดตอนิเมชันบนอุปกรณ์โดยไม่ต้องเผยแพร่แอปเวอร์ชันใหม่ใน App Store หรือ Google Play

รูปแบบ JSON ของ Lottie และ Bodymovin

สคีมา JSON ของ Lottie เป็นมาตรฐานเปิดสำหรับอธิบายอนิเมชันเวกเตอร์ ประกอบด้วยสามระดับ: องค์ประกอบ (composition) เลเยอร์ (layers) และรูปร่าง (shapes) องค์ประกอบประกอบด้วยข้อมูลเมตา: ขนาดผืนผ้าใบ อัตราเฟรม และระยะเวลา

โครงสร้าง JSON

ออบเจกต์ JSON หลักประกอบด้วยฟิลด์ layers — อาร์เรย์ของเลเยอร์อนิเมชัน แต่ละเลเยอร์สามารถเป็น Shape Layer, Image Layer, Text Layer หรือ PreComp Layer สำหรับแต่ละเลเยอร์จะกำหนดคุณสมบัติการแปลง: ตำแหน่ง มาตราส่วน การหมุน และความโปร่งใสที่เชื่อมโยงกับคีย์เฟรม

const animationData = {
    "v": "5.5.2",
    "fr": 60,
    "w": 200,
    "h": 200,
    "layers": [{
        "ty": 4,
        "nm": "Circle",
        "shapes": [{
            "ty": "el",
            "p": { "k": [100, 100] }
        }]
    }]
}

คีย์เฟรมถูกกำหนดเป็นอาร์เรย์ที่มีการประทับเวลา ค่า และเส้นโค้งเบซิเยร์สำหรับการประมาณค่า Bodymovin จะแปลงเส้นโค้ง After Effects เป็นรูปแบบที่ Lottie เข้าใจโดยอัตโนมัติ โดยคงจังหวะเวลาและฟังก์ชัน easing ไว้ด้วยความแม่นยำระดับเฟรม

Bodymovin — ปลั๊กอินส่งออก

Bodymovin เป็นส่วนขยายของ Adobe After Effects ที่ส่งออกองค์ประกอบเป็นไฟล์ JSON ของ Lottie ปลั๊กอินรองรับความสามารถส่วนใหญ่ของ After Effects: รูปร่าง มาสก์ เอฟเฟกต์ เลเยอร์ข้อความ และการติดตาม ข้อจำกัดใช้กับเลเยอร์ 3D และปลั๊กอินบางตัว — ไม่ได้ถูกส่งออกและจำเป็นต้องทำให้อนิเมชันง่ายขึ้นเป็น 2D

การรวม Lottie บน iOS

บน iOS Lottie ถูกรวมผ่าน Swift Package Manager, CocoaPods หรือ Carthage คลาสหลักคือ LottieView สำหรับ SwiftUI และ LottieAnimationView สำหรับ UIKit แพ็กเกจ lottie-ios รองรับอนิเมชันจากบันเดิล เครือข่าย และออบเจกต์ Data

LottieView ใน SwiftUI

LottieView เป็นคอมโพเนนต์ View สำหรับ SwiftUI ที่รับชื่อไฟล์ JSON จากบันเดิลหรือ URL สำหรับโหลดจากเครือข่าย อนิเมชันจะเล่นอัตโนมัติด้วยความเร็วและจำนวนครั้งที่ระบุ

import Lottie

LottieView(animation: LottieAnimation
    .named("loading_spinner"))
    .loopMode(.loop)
    .animationSpeed(1.5)
    .frame(width: 100, height: 100)

สำหรับ UIKit ใช้ LottieAnimationView ซึ่งสามารถกำหนดค่าผ่าน Interface Builder หรือโดยโปรแกรม View รองรับสถานะอนิเมชันทั้งหมด: play, pause, stop รวมถึงแถบความคืบหน้าสำหรับการโหลดข้อมูล LottieAnimationView สามารถฝังใน UITableViewCell หรือ UICollectionViewCell สำหรับไอคอนอนิเมชันในรายการ — เมื่อเลื่อน อนิเมชันจะหยุดชั่วคราว และเมื่อเซลล์ปรากฏบนหน้าจอจะเริ่มใหม่ ประหยัดทรัพยากร CPU และ GPU

การพัฒนา iOS สมัยใหม่ใช้ Lottie ร่วมกับ SwiftUI อย่างแข็งขันเพื่อสร้างหน้าจอแนะนำแบบอนิเมชันและองค์ประกอบแบบโต้ตอบ: เมื่อเลื่อนหน้าจอ ความคืบหน้าของอนิเมชันจะซิงค์กับตำแหน่งการเลื่อนผ่าน ScrollViewReader สร้างเอฟเฟกต์พารัลแลกซ์ที่อนิเมชันติดตามการเคลื่อนไหวของนิ้วผู้ใช้อย่างต่อเนื่อง เพิ่มการมีส่วนร่วมโดยไม่ต้องใช้ไฟล์วิดีโอขนาดหนัก

การควบคุมการเล่น

เครื่องเล่น Lottie บน iOS ให้ API สำหรับการเล่นจากเฟรมหนึ่งไปอีกเฟรมหนึ่ง การเปลี่ยนสี fill/stroke ผ่าน KeyPaths และการฟังเหตุการณ์ผ่าน LottieAnimationDelegate สามารถหยุดอนิเมชันชั่วคราวระหว่างการเลื่อนและเริ่มใหม่เมื่อหยุดเพื่อเพิ่มประสิทธิภาพ

การรวม Lottie บน Android

บน Android Lottie ถูกเพิ่มผ่านการพึ่งพา Gradle com.airbnb.android:lottie คอมโพเนนต์หลักคือ LottieAnimationView ซึ่งสามารถวางในเค้าโครง XML เป็น View ทั่วไปและกำหนดค่าผ่านแอตทริบิวต์หรือโดยโปรแกรม

@Composable
fun LoadingAnimation() {
    val composition by rememberLottieComposition(
        spec = LottieCompositionSpec.RawRes(R.raw.loading)
    )
    LottieAnimation(
        composition = composition,
        iterations = LottieConstants.IterateForever
    )
}

ในเค้าโครง XML LottieAnimationView ถูกกำหนดค่าผ่านแอตทริบิวต์: lottie_rawRes (การอ้างอิงถึง JSON ใน res/raw), lottie_autoPlay, lottie_loop การโหลดจากเครือข่ายรองรับผ่าน lottie_url หรือโดยโปรแกรมผ่าน setAnimationFromUrl Android เวอร์ชันของ Lottie ใช้ Canvas เรนเดอเรอร์ของตัวเอง ซึ่งไม่ขึ้นกับการเร่งด้วยฮาร์ดแวร์

การโหลดจาก RawRes และเครือข่าย

สำหรับอนิเมชันแบบคงที่ JSON จะถูกวางใน res/raw และอ้างอิงผ่าน RawRes สำหรับอนิเมชันแบบไดนามิก Lottie จะโหลด JSON จาก URL หรือออบเจกต์ Data พร้อม callback ความคืบหน้าที่แสดงเปอร์เซ็นต์การดาวน์โหลด แคชของ Lottie จะเก็บอนิเมชันที่โหลดไว้ในหน่วยความจำโดยอัตโนมัติเพื่อหลีกเลี่ยงการดาวน์โหลดซ้ำเมื่อเรนเดอร์อีกครั้ง

Lottie สำหรับ Android รองรับอนิเมชันใน RecyclerView ผ่าน LottieAnimationView ที่ฝังอยู่ในรายการโดยตรง เพื่อเพิ่มประสิทธิภาพ ขอแนะนำให้ใช้ setAnimation แบบโหลดช้าและปิดอนิเมชันสำหรับองค์ประกอบที่อยู่นอกหน้าจอผ่าน callback RecyclerView.OnChildAttachStateChangeListener ซึ่งป้องกัน FPS ดรอปเมื่อเลื่อนรายการยาวที่มีไอคอนอนิเมชัน

การปรับแต่งและควบคุมอนิเมชัน Lottie

Lottie มี API ที่ทรงพลังสำหรับปรับแต่งอนิเมชันสำเร็จรูปโดยไม่ต้องแก้ไขไฟล์ After Effects ต้นฉบับ ซึ่งช่วยให้ปรับอนิเมชันเดียวให้เข้ากับธีม สี และขนาดแอปที่แตกต่างกันได้

การเปลี่ยนสีผ่าน KeyPath

สี fill และ stroke สามารถเปลี่ยนได้ในรันไทม์ผ่าน KeyPath — เส้นทางสตริงไปยังองค์ประกอบอนิเมชัน ตัวอย่างเช่น ในการเปลี่ยนสีไอคอนตะกร้าจากสีแดงเป็นสีน้ำเงิน เพียงค้นหา KeyPath ของมันและใช้ค่าใหม่ ซึ่งช่วยลดความจำเป็นในการจัดเก็บอนิเมชันเดียวกันหลายเวอร์ชันสำหรับโทนสีที่แตกต่างกัน

การควบคุมความเร็วและความคืบหน้า

อนิเมชัน Lottie แต่ละรายการสามารถควบคุมได้ด้วยความเร็ว (animationSpeed), ความคืบหน้า (setProgress) และช่วงเฟรม (play(fromFrame:toFrame:)) โหมดความคืบหน้าช่วยให้ซิงค์อนิเมชันกับท่าทางการเลื่อน: ยิ่งเลื่อนหน้าจอมากเท่าไหร่ อนิเมชันก็ยิ่งคืบหน้ามากขึ้นเท่านั้น — เทคนิคยอดนิยมสำหรับหน้าจอแนะนำและเอฟเฟกต์พารัลแลกซ์