انیمیشن ها در طراحی ظاهری جذاب نقش بسزایی دارند. یکی از مشکلاتی که ممکن است در مورد انیمیشن ها داشته باشیم سردرگمی در انتخاب انیمیشن است.

اینکه چه انیمیشنی برای نیاز من مناسب است؟!

برای  اینکه جواب این سوال را بدهیم، ابتدا باید انواع انیمیشن ها را بررسی و دسته بندی کنیم.

بنده خودم همیشه با انیمیشن ها مشکل داشتم و این به خاطر این بود که در ذهن من انواع و اقسام انیمیشن ها وجود داشتند که با ان ها اشنایی نداشتم و در مواجه با آن ها گویا با کوهی از علامت سوال ها مواجه می شدم.

در این مقاله قصد داریم انواع انیمیشن ها در فلاتر را دسته بندی کنیم و یک بررسی اجمالی روی آن ها داشته باشیم.

به صورت کلی، دو نوع انیمیشن در فلاتر داریم :

1. Drawable Animation

2.CodeBase Animation

 نوع اول : Drawable Animation

 این نوع انیمشین ها، انیمیشن هایی هستند که به صورت نقاشی شده هستند، مانند شخصیت های کارتونی یا بازی که نیاز دارند ابتدا طراحی شوند. برای این نوع انیمیشن ها از کتابخانه هایی مانند 

rive , lottie استفاده می کنیم.

نوع دوم : CodeBaseAnimation

این نوع انیمیشن ها در خود فلاتر تعبیه و ساخته شده اند و به طور کلی به دو بخش تقسیم خواهند شد:

1.Explicit
2.Implicit
 هرکدام از این دو بخش خاصیتی دارند که ان ها را از همدیگر متمایز میکند.

هر کدام از این بخش ها نیز خود دارای دو زیرمجموعه هستند

1.Explicit

• Built-in
• custom Explicit

2.Implicit

• Built-in
• Tween Animation Builder

خب در حال حاضر نوع اول یعنی explicit ها را بررسی میکنیم:

Explicit در لغت به معنای صریح می باشد و نیاز است تا برای شروع کار به صورت صریح و واضح به ان ها بگوییم کار را شروع کنند؛ به همین دلیل آن ها نیاز به  کنترلر دارند

انیمیشن های Explicit خود دارای دو بخش هستند:

1.Built-in
2.Custom Explicit

Built-in ها در واقع انمیشن هایی هستن که خود فلاتر ان هارا ساخته است و Custom ها را خودمان با یک سری کلاس ها، خواهیم ساخت.

اما نمونه های Built-in مانند FadeTransaction,PositionedTransaction و … که در واقع به FooTrasaction معروف هستند و Foo همان خاصیتی است که انیمیشن می شود.

اما دسته دوم، یعنی Implicit ها، Implicit در لغت به معنای ضمنی می باشد. این نوع انیمیشن ها با دریافت مقادیری به عنوان ورودی، برخی از ویژگی ها را برای ویجت ها تنظیم میکنند تا ان ها دارای خاصیت انیمیشنی شوند

به طور مثال ما یک میجت به نام Container داریم، و یک AnimatedContainer که با گرفتن ورودی،به ویجت container خاصیت انیمیشنی می دهد.

در این قسمت ما نیازی نداریم تا به این ویجت ها اعلان شروع و … بدهیم، به همین دلیل نیازی به controller نداریم.

 انیمیشن های Implicit ها نیز مانند Explicit ها دارای دو بخش هستند:

1.Built-in

2.Tween AnimationBuilder

Built-in ها در واقع انمیشن هایی هستن که خود فلاتر ان هارا ساخته است و اما Tween ها را خودمان خواهیم ساخت!

اما نمونه های Built-in مانند AnimatedAlign ,AnimatedContainer و … که در واقع به AnimatedFoo معروف هستند و Foo همان خاصیتی است که انیمیشن می شود.

ما در این بخش به صورت کلی، انیمیشن ها را دسته بندی کردیم و وارد جزئیات هر کدام نشدیم!

اما برای انتخاب انیمیشن، اینکه از کدام دسته باید انتخاب کنیم یا اصلا انیمیشنی که من میخواهم وجود دارد یا باید خودم آم را بسازم، باید در ابتدا به انواع انیمیشن ها آشنا شویم و نمونه هایی از آن را ببینیم تا آشنایی کامل تری پیدا کنیم

و سپس چند سوال باید از خودمان بپرسیم تا نیاز ما مشخص شود:

سوال اول:آیا انیمیشن من شبیه نقاشی است یا خیر؟

بله؛ از ابزارهای Rive یا Lotti یا … استفاده کنیم

خیر؛ وارد دسته دوم می شویم:

برای اینکه متوجه شویم از Explicit ها باید استفاده کنیم یا Implicit ها باید چند سوال از خومان بپرسیم:

1.آیا انیمیشن برای همیشه تکرار خواهد شد؟

2.آیا انیمیشن به صورت ناپیوسته است؟(به طور مثال دایره ای داریم که کوچ می شود و سپس بزرگ می شود، پس اندازه دایره ناپیوسته است)

3.آیا چندین ویجت با هم انیمیشن می شوند؟

اگر جواب هر سه سوال بالا “بله” از Explicit ها استفاده می کنیم؛ ودر غیر این صورت از Implicit ها.

حال که دسته انیمیشن مشخص شد، باید دسته داخلی ان ها یعنی Built-in,custom,Tween را انتخاب کنیم:

سوال : آیا انیمشن های Built-in( ساخته شده توسط خود فلاتر) برای نیاز من وجود دارد یا خیر؟

در صورت موجود بودن از همان ها یعنی FooTransaction یا AnimatedFoo ها استفاده می کنیم( بستگی به این دارد که  از Explicit یا Implicit بخواهیم استفاده نماییم)

در غیر اینصورت باید به صورت شخصی آن را ایجاد نماییم و آن هم با توجه به اینکه از Explicit یا Implicit استفاده می کنیم، از Tween AnimationBuilderیا Custom Explicit استفاده خواهیم کرد.

منابع:

https://docs.flutter.dev/development/ui/animations