การใช้ Lottie สำหรับ After Effects Animations

การใช้ Lottie สำหรับ After Effects Animations ใน Flutter

จากบทความที่แล้ว เราได้เรียนรู้การใช้ Rive (Flare) สำหรับสร้าง Vector Animations ที่สวยงามและมีประสิทธิภาพ ในบทความนี้ เราจะมาสำรวจอีกหนึ่งเครื่องมือที่ได้รับความนิยมอย่างมากในการสร้าง Animations ใน Flutter นั่นคือ Lottie ซึ่งใช้ After Effects เป็นเครื่องมือหลักในการสร้าง Animation

Lottie คือ library สำหรับ Android, iOS, Web และ Flutter ที่ช่วยให้เราสามารถแสดง Animations ที่สร้างจาก Adobe After Effects ได้อย่างง่ายดาย โดยแปลง Animation ให้เป็น JSON format ที่มีขนาดเล็กและสามารถ render ได้อย่างรวดเร็วบนแพลตฟอร์มต่างๆ ทำให้เราสามารถสร้าง animations ที่ซับซ้อนและสวยงามได้โดยไม่ต้องเขียนโค้ด animation เอง

ข้อดีของการใช้ Lottie

• คุณภาพสูง: สามารถแสดง animations ที่ซับซ้อนและสวยงามที่สร้างจาก After Effects ได้อย่างสมบูรณ์
• ประสิทธิภาพ: ไฟล์ JSON มีขนาดเล็กและ render ได้อย่างรวดเร็ว ทำให้ไม่กระทบต่อ performance ของแอปพลิเคชัน
• ข้ามแพลตฟอร์ม: รองรับการใช้งานบน Android, iOS, Web และ Flutter
• ง่ายต่อการใช้งาน: มี library ที่ใช้งานง่ายและ documentation ที่ครอบคลุม
• Animation Ecosystem: มี Animation สำเร็จรูปให้เลือกใช้มากมายบน LottieFiles

ขั้นตอนการใช้งาน Lottie ใน Flutter

ต่อไปนี้เป็นขั้นตอนการใช้งาน Lottie ใน Flutter แบบ Step-by-Step:

1. ติดตั้ง Package

ขั้นแรกคือการติดตั้ง lottie package ใน Flutter project ของคุณ โดยเพิ่ม dependency ในไฟล์ pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  lottie: ^2.7.0 # ตรวจสอบเวอร์ชันล่าสุด

จากนั้นทำการ flutter pub get เพื่อดาวน์โหลดและติดตั้ง package

2. สร้าง Animation ด้วย After Effects

ใช้ Adobe After Effects เพื่อสร้าง Animation ที่คุณต้องการ หากคุณไม่มี After Effects หรือต้องการ Animation สำเร็จรูป สามารถดาวน์โหลดได้ฟรีจาก LottieFiles เว็บไซต์นี้มี Animation ให้เลือกใช้มากมายและสามารถดาวน์โหลดเป็นไฟล์ JSON ได้

ข้อควรระวัง: ก่อนที่จะ Export Animation เป็น JSON ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งปลั๊กอิน Bodymovin ใน After Effects Bodymovin เป็นปลั๊กอินที่ใช้แปลง After Effects Animation เป็น Lottie JSON format

เมื่อติดตั้ง Bodymovin แล้ว ให้เลือก Composition ที่คุณต้องการ Export แล้วไปที่ Window > Extensions > Bodymovin เลือกโฟลเดอร์ที่ต้องการบันทึกไฟล์ JSON แล้วคลิก Render

3. นำเข้าไฟล์ JSON ใน Flutter

สร้างโฟลเดอร์ assets ใน project ของคุณ (ถ้ายังไม่มี) แล้วนำไฟล์ JSON ที่ Export มาใส่ไว้ในโฟลเดอร์นี้ จากนั้นเพิ่ม assets path ในไฟล์ pubspec.yaml:

flutter:
  assets:
    - assets/animations/your_animation.json # เปลี่ยนเป็น path ของไฟล์ JSON ของคุณ

ทำการ flutter pub get อีกครั้งเพื่อให้ Flutter รู้จัก assets ใหม่

4. แสดง Animation ด้วย LottieView

ตอนนี้เราสามารถแสดง Animation ใน Flutter ได้แล้ว โดยใช้ LottieView widget:

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class LottieExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lottie Example'),
      ),
      body: Center(
        child: Lottie.asset(
          'assets/animations/your_animation.json', // เปลี่ยนเป็น path ของไฟล์ JSON ของคุณ
          width: 200,
          height: 200,
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

ในโค้ดนี้ เราใช้ Lottie.asset constructor เพื่อโหลด Animation จากไฟล์ JSON ใน assets folder คุณสามารถปรับขนาด Animation ได้โดยใช้ properties width, height และ fit

5. การใช้งาน LottieBuilder

LottieBuilder เป็นอีกทางเลือกหนึ่งในการแสดง Animation โดยมีข้อดีคือสามารถจัดการ error ได้ดีกว่า Lottie.asset ตัวอย่างการใช้งาน:

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class LottieBuilderExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lottie Builder Example'),
      ),
      body: Center(
        child: LottieBuilder.asset(
          'assets/animations/your_animation.json', // เปลี่ยนเป็น path ของไฟล์ JSON ของคุณ
          width: 200,
          height: 200,
          fit: BoxFit.cover,
          errorBuilder: (context, error, stacktrace) {
            return Text('Error loading animation!');
          },
        ),
      ),
    );
  }
}

ในโค้ดนี้ เราเพิ่ม errorBuilder เพื่อจัดการกรณีที่โหลด Animation ไม่สำเร็จ ซึ่งจะแสดงข้อความ "Error loading animation!" แทน

6. การควบคุม Animation

Lottie ยังมีฟังก์ชันต่างๆ ที่ช่วยให้เราสามารถควบคุม Animation ได้ เช่น การเล่น, หยุด, เล่นซ้ำ, และกำหนดความเร็วในการเล่น ตัวอย่างการใช้งาน:

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class ControlledLottieExample extends StatefulWidget {
  @override
  _ControlledLottieExampleState createState() => _ControlledLottieExampleState();
}

class _ControlledLottieExampleState extends State<ControlledLottieExample> with TickerProviderStateMixin {
  late final AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Controlled Lottie Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Lottie.asset(
              'assets/animations/your_animation.json', // เปลี่ยนเป็น path ของไฟล์ JSON ของคุณ
              controller: _controller,
              width: 200,
              height: 200,
              fit: BoxFit.cover,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () {
                    _controller.forward();
                  },
                  child: Text('Play'),
                ),
                SizedBox(width: 16),
                ElevatedButton(
                  onPressed: () {
                    _controller.stop();
                  },
                  child: Text('Stop'),
                ),
                SizedBox(width: 16),
                ElevatedButton(
                  onPressed: () {
                    _controller.reverse();
                  },
                  child: Text('Reverse'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

ในโค้ดนี้ เราสร้าง AnimationController เพื่อควบคุม Animation และใช้ ElevatedButton เพื่อสั่งให้ Animation เล่น, หยุด, และเล่นย้อนกลับ

กรณีใช้งานจริง

• Loading Indicators: สร้าง loading animations ที่น่าสนใจแทนที่ loading spinner แบบเดิมๆ
• Onboarding Screens: ใช้ animations เพื่ออธิบายคุณสมบัติของแอปพลิเคชันใน onboarding screens
• Interactive Tutorials: สร้าง interactive tutorials ที่มี animations ที่ตอบสนองต่อการกระทำของผู้ใช้
• Game UI: สร้าง UI ที่สวยงามและมีชีวิตชีวาสำหรับเกม
• Error States: แสดง animations ที่น่าสนใจเมื่อเกิดข้อผิดพลาด

ข้อผิดพลาดที่พบบ่อยและวิธีแก้ไข

• Animation ไม่แสดง: ตรวจสอบให้แน่ใจว่า path ของไฟล์ JSON ใน pubspec.yaml และในโค้ดถูกต้อง
• Animation กระตุก: ลดความซับซ้อนของ Animation ใน After Effects หรือ optimize performance ของ Flutter app
• Animation ไม่เล่น: ตรวจสอบให้แน่ใจว่า AnimationController ถูก initialized และ disposed อย่างถูกต้อง
• Error loading animation: ตรวจสอบให้แน่ใจว่าไฟล์ JSON ไม่เสียหาย และปลั๊กอิน Bodymovin ถูกติดตั้งอย่างถูกต้องใน After Effects

สรุป

Lottie เป็นเครื่องมือที่ยอดเยี่ยมในการสร้าง Animations ที่สวยงามและมีประสิทธิภาพใน Flutter ด้วยการใช้ After Effects และ Lottie library เราสามารถสร้าง Animations ที่ซับซ้อนและน่าสนใจได้โดยไม่ต้องเขียนโค้ด animation เอง ทำให้แอปพลิเคชันของเราดูน่าสนใจและดึงดูดผู้ใช้มากยิ่งขึ้น

ในบทความถัดไป เราจะมาเรียนรู้เกี่ยวกับการสร้าง Accessibility-Friendly Apps ใน Flutter ซึ่งเป็นสิ่งสำคัญในการทำให้แอปพลิเคชันของเราสามารถใช้งานได้กับผู้ใช้ทุกคน