استفاده از انیمیشن باعث جذاب شدن و جان گرفتن برنامه‌ها می‌شود، اما استفاده از انیمیشن و پیاده سازی آن‌ها نیازمند مهارت بالا و تجربه‌ی زیادی است که معمولا توسعه دهندگان جوان و تازه‌کار و حتی با تجربه متوسط به راحتی امکان پیاده‌سازی آن‌ها را ندارند. برای حل این مشکل شرکت Airbnb کتابخانه‌ای را توسعه داده که با گرفتن یک فایل json انیمیشن، امکان استفاده و پیاده‌سازی خیلی ساده‌ی انیمیشن‌های زیبا و شکیل را برای برنامه‌های بر پایه‌ی android, ios, react native و flutter فراهم می‌آورد. ما در این روایت به پیاده‌سازی یک انیمیشن ساده با flutter می‌پردازیم.
- مسئله
- برای کی مهمه؟
- شرح مسئله
- راه حل
- قدم اول
- قدم دوم
- نتیجه
مسئله
برای کی مهمه؟
توسعه دهندگان flutter با این موضوع درگیر می‌شوند.
شرح مسئله
Lottie کتابخانه‌ی توسعه داده شده‌ی شرکت airbnb است که امکان استفاده از انیمیشن‌های آماده را برای ما فراهم می‌آورد. همچنین در adobe after effect امکان ایجاد انیمیشن و تبدیل آن به فایل lottie وجود دارد، پس تقریبا هر مدل انیمیشنی که فکرش را بکنید، می‌شود در برنامه‌هایی که می‌نویسیم استفاده کنیم، البته که انیمیشن‌هایی که نیازمند interaction و تعامل زیاد با کاربر هستند قابل پیاده سازی با این کتابخانه نیستند.
راه حل
استفاده از این کتابخانه بسیار راحت است، کافی است کتابخانه را به پروژه‌ی خود اضافه کنیم، انیمیشن‌های مورد نظر را در assets قرار دهیم، و در نهایت به سادگی از آن استفاده کنیم. به طور مثال برنامه‌ای می‌نویسیم که با زدن روی یک دکمه انیمیشن مورد نظر اجرا شود.
قدم اول
وارد پروژه‌ی خود شوید و یا یک پروژه جدید ایجاد کنید. فایل pubsec.yaml را باز کنید و کتابخانه lottie را به افزونه‌ها اضافه کنید.
dependencies:
lottie: ">=0.7.0"توجه کنید که باید assets هم مشخص باشد در پروژه.
assets:
- assets/قدم دوم
حالا کافی است که یک ویجت جدید برای نمایش انیمیشن خود ایجاد کنیم، این ویجت باید statefull باشد چرا که نیازمند animation controller و vsync است.
همانطور که می‌بینید تنها با
Lottie.asset('assets/tweet.json', controller: _controller)
این خط می‌توانیم انیمیشن خود را به برنامه اضافه کنیم و با استفاده از animationController هر زمان که نیاز بود انیمیشن را با ویژگی‌های دلخواهمان شروع کنیم. همچنین می‌توانیم مثل هر انیمیشن دیگری در flutter انیمیشن را تکرار پذیر کنیم، زمان اجرا، نوع حرکت و دیگر مقادیر را برای آن تنظیم کنیم.
نتیجه
همانطور که دیدیم استفاده از این کتابخانه بسیار راحت است. برای انیمیشن‌های نمونه می‌توانید سایت lottie files را مشاهده کنید و یا خودتان با after effect شروع به ساخت انیمیشن‌های جالب کنید تا برنامه‌هایی هرچه زنده‌تر و جذاب‌تر توسعه دهید.
