استفاده از Lottie در فلاتر | آموزش انیمیشن در برنامه نویسی فلاتر

یکی از مهم‌ترین عوامل در افزایش کیفیت تجربه کاربری (UX) در اپلیکیشن‌های موبایل، استفاده از انیمیشن‌های روان و جذاب است. در فلاتر روش‌های مختلفی برای ساخت انیمیشن وجود دارد، اما طراحی و پیاده‌سازی انیمیشن‌های پیچیده معمولاً زمان‌بر است و نیاز به دانش بیشتری دارد. اینجاست که Lottie به عنوان یکی از محبوب‌ترین کتابخانه‌های انیمیشن وارد میدان می‌شود.

Lottie به شما امکان می‌دهد انیمیشن‌هایی که در نرم‌افزار Adobe After Effects طراحی شده‌اند را با حجم بسیار کم و کیفیت بالا در اپلیکیشن فلاتر اجرا کنید. این انیمیشن‌ها علاوه بر ظاهر حرفه‌ای، عملکرد بسیار روانی دارند و برای نمایش صفحه بارگذاری (Loading)، پیام موفقیت، خطا، صفحات خالی (Empty State)، آنبوردینگ و بسیاری از بخش‌های دیگر اپلیکیشن ایده‌آل هستند.

در این مقاله از آموزش فلاتر با مفهوم Lottie در فلاتر آشنا می‌شویم، مزایا و کاربردهای آن را بررسی می‌کنیم، نحوه نصب و استفاده از پکیج lottie را یاد می‌گیریم و در نهایت با یک مثال عملی، اولین انیمیشن خود را در فلاتر پیاده‌سازی خواهیم کرد. اگر قصد دارید رابط کاربری اپلیکیشن خود را حرفه‌ای‌تر و جذاب‌تر کنید، این آموزش می‌تواند نقطه شروع مناسبی برای شما باشد.

Lottie چیست؟

Lottie یک کتابخانه متن‌باز (Open Source) است که ابتدا توسط تیم Airbnb توسعه داده شد و امروزه به یکی از محبوب‌ترین ابزارها برای نمایش انیمیشن در اپلیکیشن‌های موبایل، وب و دسکتاپ تبدیل شده است. این کتابخانه به توسعه‌دهندگان اجازه می‌دهد انیمیشن‌هایی که در Adobe After Effects طراحی شده‌اند و با استفاده از پلاگین Bodymovin به فرمت JSON خروجی گرفته‌اند را بدون نیاز به تبدیل به ویدئو یا GIF، مستقیماً در برنامه اجرا کنند.

برخلاف فایل‌های ویدئویی یا GIF که معمولاً حجم بالایی دارند و کیفیت آن‌ها در اندازه‌های مختلف کاهش پیدا می‌کند، فایل‌های Lottie سبک، مقیاس‌پذیر و بسیار روان هستند. به همین دلیل استفاده از آن‌ها تأثیر مثبتی بر عملکرد اپلیکیشن و تجربه کاربری (UX) خواهد داشت.

در فلاتر نیز با استفاده از پکیج lottie می‌توانید تنها با چند خط کد، انیمیشن‌های حرفه‌ای را به بخش‌های مختلف برنامه اضافه کنید. این انیمیشن‌ها برای سناریوهای مختلفی مانند موارد زیر کاربرد دارند:

• نمایش صفحه بارگذاری (Loading)
• نمایش موفقیت یا شکست عملیات (Success & Error)
• صفحات خالی (Empty State)
• آنبوردینگ (Onboarding)
• دکمه‌ها و تعاملات کاربر
• انیمیشن‌های خوش‌آمدگویی و معرفی قابلیت‌های برنامه

به همین دلیل، Lottie یکی از بهترین انتخاب‌ها برای توسعه‌دهندگان فلاتر است که می‌خواهند بدون صرف زمان زیاد برای طراحی و پیاده‌سازی انیمیشن، رابط کاربری مدرن و حرفه‌ای ایجاد کنند.

در واقع، Lottie بدون نیاز به رندر سنگین یا کدنویسی پیچیده، انیمیشن‌هایی بسیار روان، سبک و قابل‌تنظیم در اختیار شما قرار می‌دهد.

امکانات Lottie در فلاتر

استفاده از Lottie در برنامه‌نویسی فلاتر تنها به نمایش چند انیمیشن ساده محدود نمی‌شود. این کتابخانه امکانات متنوعی را در اختیار توسعه‌دهندگان قرار می‌دهد که باعث می‌شود بتوانند بدون افزایش حجم اپلیکیشن، رابط کاربری جذاب‌تر و حرفه‌ای‌تری طراحی کنند. مهم‌ترین قابلیت‌های Lottie عبارت‌اند از:

اجرای روان و سبک انیمیشن‌ها

فایل‌های Lottie با فرمت JSON ذخیره می‌شوند و حجم بسیار کمتری نسبت به فایل‌های ویدئویی یا GIF دارند. همین موضوع باعث می‌شود انیمیشن‌ها با مصرف منابع کمتر و عملکردی روان در دستگاه‌های مختلف اجرا شوند.

امکان شخصی‌سازی انیمیشن

پکیج lottie در فلاتر امکانات مختلفی برای کنترل انیمیشن در اختیار شما قرار می‌دهد. برای مثال می‌توانید سرعت پخش، تعداد تکرار، جهت اجرا، اندازه و موقعیت انیمیشن را تغییر دهید و حتی اجرای آن را با استفاده از AnimationController کنترل کنید.

پشتیبانی از تعاملات کاربر

می‌توانید اجرای انیمیشن را به رویدادهای مختلف مانند کلیک روی دکمه، لمس صفحه یا پایان یک عملیات متصل کنید. این قابلیت تجربه کاربری (UX) را به شکل قابل توجهی بهبود می‌بخشد.

بارگذاری از فایل محلی یا اینترنت

Lottie از هر دو روش بارگذاری انیمیشن پشتیبانی می‌کند. می‌توانید فایل JSON را در پوشه assets پروژه قرار دهید یا آن را به صورت آنلاین از یک URL دریافت و در برنامه نمایش دهید.

مناسب برای بخش‌های مختلف اپلیکیشن

از Lottie می‌توان در قسمت‌های مختلف یک برنامه استفاده کرد، از جمله:

• صفحه شروع (Splash Screen)
• انیمیشن‌های بارگذاری (Loading)
• صفحات خالی (Empty State)
• نمایش موفقیت یا خطا (Success & Error)
• آنبوردینگ (Onboarding)
• دکمه‌ها و تعاملات کاربر
• پیام‌های خوش‌آمدگویی و معرفی قابلیت‌های برنامه

سازگاری با چندین پلتفرم

یکی دیگر از مزایای مهم Lottie این است که علاوه بر Flutter Mobile، در پلتفرم‌های دیگر مانند Android، iOS، Web و Desktop نیز قابل استفاده است. بنابراین اگر پروژه شما چندسکویی (Cross-Platform) باشد، می‌توانید از یک فایل انیمیشن در تمامی نسخه‌های برنامه استفاده کنید.

به لطف این قابلیت‌ها، Lottie یکی از بهترین ابزارها برای افزودن انیمیشن‌های حرفه‌ای، سبک و قابل کنترل به پروژه‌های فلاتر محسوب می‌شود و امروزه در بسیاری از اپلیکیشن‌های مطرح دنیا مورد استفاده قرار می‌گیرد.

اضافه کردن Lottie به پروژه فلاتر

dependencies:
  flutter:
    sdk: flutter

  lottie: ^3.3.2

flutter pub get

import 'package:lottie/lottie.dart';

flutter:
  assets:
    - assets/animations/

flutter pub get

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

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Lottie Animation'),
      ),
      body: Center(
        child: Lottie.asset(
          'assets/animations/loading.json',
          width: 250,
          height: 250,
        ),
      ),
    );
  }
}

Lottie.network(
  'https://example.com/animation.json',
)

سوالات متداول درباره Lottie در فلاتر

آیا می‌توانم فایل‌های Lottie را از اینترنت لود کنم؟

بله. از Lottie.network('https://...') استفاده کنید.

آیا Lottie فقط برای لودینگ استفاده می‌شود؟

خیر! می‌توانید برای splash screen، تایید عملیات، خطاها، انیمیشن‌های واکنش به لمس و ده‌ها مورد دیگر از آن استفاده کنید.

آیا Lottie از فایل‌های حجیم پشتیبانی می‌کند؟

فایل‌های Lottie معمولاً سبک هستند، اما بهتر است برای عملکرد بهتر، انیمیشن‌های خود را بهینه‌سازی کنید.

نتیجه‌گیری

در این آموزش فلاتر با کتابخانه Lottie آشنا شدیم و یاد گرفتیم چگونه با استفاده از آن، انیمیشن‌های حرفه‌ای و کم‌حجم را به اپلیکیشن‌های فلاتر اضافه کنیم. همچنین نحوه نصب پکیج، نمایش فایل‌های JSON و مهم‌ترین امکانات این کتابخانه را بررسی کردیم. اگر به دنبال پیاده‌سازی انیمیشن در فلاتر بدون پیچیدگی‌های مربوط به ساخت انیمیشن از صفر هستید، Lottie یکی از بهترین و محبوب‌ترین گزینه‌ها محسوب می‌شود.

استفاده از Lottie نه‌تنها باعث زیباتر شدن رابط کاربری می‌شود، بلکه تجربه کاربری (UX) را نیز بهبود می‌بخشد. از صفحه‌های بارگذاری و آنبوردینگ گرفته تا نمایش پیام‌های موفقیت، خطا و صفحات خالی، این کتابخانه می‌تواند جلوه‌ای مدرن و حرفه‌ای به اپلیکیشن شما ببخشد، بدون اینکه تأثیر محسوسی بر حجم یا عملکرد برنامه داشته باشد.

اگر به تازگی یادگیری فلاتر را آغاز کرده‌اید، پیشنهاد می‌کنیم پس از مطالعه این مقاله، آموزش‌های زیر را نیز دنبال کنید تا مهارت خود را در توسعه رابط کاربری افزایش دهید:

• آموزش ویجت‌های فلاتر
• آموزش انیمیشن در فلاتر
• آموزش Custom Painter در فلاتر
• آموزش مدیریت State در فلاتر

همچنین برای دریافت هزاران انیمیشن آماده و رایگان، می‌توانید به وب‌سایت LottieFiles مراجعه کنید، فایل‌های JSON موردنظر خود را دانلود کرده و تنها با چند خط کد در پروژه‌های فلاتر از آن‌ها استفاده کنید. با کمی خلاقیت، می‌توانید اپلیکیشن‌هایی طراحی کنید که علاوه بر عملکرد مناسب، از نظر ظاهری نیز تجربه‌ای جذاب و به‌یادماندنی برای کاربران ایجاد کنند.