آموزش انیمیشن در فلاتر Flutter

  • مدرس : عماد قاسم پور
  • سطح آموزش : متوسط
  • مدت : 78 دقیقه
  • تعداد دانشجو : 9

انیمیشن در فلاتر Flutter

یکی از جذاب ترین بحث ها در فریمورک فلاتر پیاده سازی انیمیشن هست. با پیاده سازی انیمیشن در نرم افزار های موبایلی یا همان اپلیکیشن ها، ظاهر UI زیباتر و جذاب تر و تجربه کاربری UX بهتری برای کاربر رقم میزنیم. در فلاتر امکان پیاده سازی انواع انیمیشنها بر روی ویجت ها وجود داره. بیشتر ویجت ها به ویژه متریال ویجت در فلاتر جلوه های حرکتی استانداردی در ساختار خودشون دارن، اما بهتر هست بدونید که امکان سفارشی سازی جلوه ها هم وجود داره.

دو نوع انیمیشن در flutter وجود داره که توضیح مختصری راجع به هر کدوم از اونها میدیم.

انیمشین تویین Tween animation in flutter:

در این نوع انمیشین نقطه شروع و پایان داریم که دارای زمان و سرعت حرکت از نقطه شروع به پایان هست. مانند تایم لاین

انیمیشن های فیزیک پایه در فلاتر  Physics-based animation in flutter:

این نوع انیمیشن بر اساس حرکات واقعی مثل پرتاب یک توپ در واقعیت ساخته میشن.

 

انیمیشن در فلاتر الگو هایی داره که اغلب مورد استفاده قرار میگیرن و بسیار پر کاربرد هستن. چند تا نمونه از اونها رو براتون توضیح میدم.

لیست متحرک یا گرید Animated list or grid:

این الگو شامل اضافه یا حذف کردن یک عنصر به لیست یا گرید هست.

 

انتقال عنصر مشترک shared element transition:

در این الگو کاربر یک المان رو انتخاب می کنه که با حرکتی به صفحه جدید منتقل میشه و جزئیات بیشتری به کاربر نشون میده. در فلاتر با استفاده از ابزارک هیرو hero به راحتی میتونیم انتقال عنصر مشترک بین صفحات رو پیاده کنیم. مثلا با استفاده از ویجت هیرو در فلاتر ضمن تغییر شکل و اندازه از صفحه ای به صفحه ای پرواز می کنیم🤨

 

staggered animation:

این انمیشین از چندین جلوه کوچک تشکیل شده که ممکنه این انیمیشن های کوچک پشت سر هم اجرا بشن یا به طور کامل یا تا حدی همپوشانی داشته باشن. مثلا فرض کنین یک مربع تبدیل به یک دایره بشه و بعد رنگش عوض بشه و مجددا رنگ دایره به حالت قبل برگرده و به مربع تبدیل بشه.

در این دوره آموزشی به نحوه ایجاد انیمیشن ها در Flutter میپردازیم و نحوه استفاده از انها رو به صورت عملی توضیح میدیم. در طول دوره به هم انواع مختلف انیمیشن ها در Flutter و روش پیاده سازی انها رو بررسی خواهیم کرد.

 

خب تا این جا توضیحات مختصری در مورد کلیات انیمیشن در flutter دادیم. اگر احتیاج به توضیحات بیشتر و مشاهده نمونه انمیشین های ساخته شده داشتین می تونین به لینک زیر مراجعه کنین.

توضیح انیمیشن در فلاتر

چرا انیمیشن در Flutter مهم است؟

فریمورک Flutter یک ابزار فوق العاده برای طراحی اپلیکشن های اندروید و iOS است. امکان طراحی UI بسیار جذاب در Flutter از نقاط قوت اش محسوب میشه. انیمیشن ها در تجربه کاربری(UX) برنامه ها تاثیر خییییییلی مهمی دارند . اشنایی با انیمیشن ها در ایجاد یک UI و UX دلچسب و کاربردی و در دنیای امروز برنامه های موبایل حیاتی است.

توی دوره انیمیشن ها در فلاتر چی یاد میگریم؟

توی این دوره با انواع Animated Widget و روش کار با اونها اشنا میشیم بعد به سراغ استفاده از Tween میریریم که با استفاده از اون میتونیم تقریبا به هر چیزی در Flutter انیمیشن بدیم. در ادامه نحوه کنترل انیمیشن ها رو با Animation Controller یاد میگیریم. و همچنین یاد میگیریم چطور انیمیشن ها رو با هم ترکیب کنیم و چند تا انیمیشن رو با هم اجرا کنیم و همچنین با Hero و روش استفاده از اون آشنا میشیم.

  • درس 1 : معرفی دوره آموزشی

    1 دقیقه
  • 18 دقیقه

    در این قسمت ، قصد داریم اولین نوع Animation در فلاتر رو بررسی کنیم.
    در فلاتر همه چیز وابسته به Widget هست. همچون Container , Padding , Text و …
    حالا برای بحث Animation ، فلاتر یک سری Widget رو ایجاد کرده که این نوع ویجت ها امکان انیمیشن شدن رو دارند یعنی همان Animated Widget
    به طور مثال Animated Container داریم. همان Container که میتونه دارای انیمیشن باشه. یعنی یک نقطه ابتدا و انتها از ما دریافت کنه و مسیر این دو رو خودش Animate کنه.

    در اولین مثال قصد داریم یک نمونه از همین ویجت ها رو Animate کنیم.در مرحله اول یک stateful widget ایجاد می کنیم.

    حالا اپلیکیشن رو یکبار ریست می کنیم.
    در دومین قدم نیاز داریم برنامه ما ساختار اپلیکیشن داشته باشه. در نتیجه از Scaffold استفاده می کنیم.

    برای حذف بنر نیز از debugShowCheckedModeBanner استفاده کنید.

    حالا میایم و یک Animated Widget ایجاد می کنیم اون ویجت رو با استفاده از یک Button کنترل می کنیم.
    در مرحله اول یک ویجت Center ایجاد میکنیم تا تمام ویجت ها در مرکز قرار بگیرند.
    در ویجت children نیز یک Animated Widget رو ایجاد می کنیم.

    AnimatedContainer چندین ویژگی داره که دو تا از اونها کاربرد بیشتری دارند. از جمله duration و curve

    پس از مشخص کردن duration نیز میایم یک عرض و ارتفاع ثابت در نظر میگیریم.

    پس از run برنامه یک باکس بنفش برای ما نمایش داده میشه. بعد از ویجت AnimatedContainer از SizedBox استفاده می کنیم که یک button رو با فاصله از مربع نمایش دهیم.

    برای ایجاد یک button نیز از ویجت RaisedButton استفاده می کنیم و پارامترهای child و onPressed رو پیاده سازی میکنیم.

    دقت کنید تا الان هیچ عملیاتی روی button ایجاد نشده.
    خب تا اینجا ، یک باکس 300 در 300 و یک button ایجاد کردیم. حالا قصد داریم با فشردن دکمه Press عرض و ارتفاع باکس رو با یک ساختار Animate کم کنیم.
    پس در مرحله اول باید عرض و ارتفاع باکس رو متغییر کنیم.
    در مرحله اول یک مقدار boolean تعریف می کنیم.

    حالا در پارامترهای width , height داریم.

    حالا قصد داریم با فشردن button عرض و ارتفاع این باکس رو مدیریت کنیم.
    پس در نتیجه از تابع setState استفاده می کنیم.

    خب تا اینجا انیمیشن باکس ما از طریق button در حال مدیریت هست. این انیمیشن ما به صورت خطی هست و ما میتونیم از طریق پارامتر curve نوع های دیگه ای از انیمیشن نیز داشته باشیم.
    به طور مثال easeOutQuart
    در نتیجه داریم :

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

  • 10 دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    خب ما تا اینجا در مورد Animate Widget و Tween صحبت کردیم. اما مشکلی که در این دو مورد هست ، این هست که ما کنترلی روی انیمیشن نداریم. یعنی ابتدا و انتها رو به ویجت میدادیم و انیمیشن ایجاد می شد. اما در وسط انیمیشن کنترلی نداریم که بخوایم stop کنیم یا حتی انیمیشن رو برعکس کنیم. خب حالا چطور یک کنترل مشخص در مورد انیمیشن داشته باشیم؟ جواب سادست : Animation Controller که از اسم اون هم مشخص هست ، روند کنترل انیمیشن رو بر عهده داره.
    یعنی به طور مثال از طریق Animation Controller می توانیم انیمیشن ویجت رو در وسط متوقف یا برعکس اجرا کنیم و یا …

    حالا بریم سراغ یک مثال جذاب

    AnimationController چندین پارامتر داره که یکی از آنها همان duration هست.

    پارامتر دیگه vsync هست. این پارامتر به ما کنترل عملکرد انیمیشن رو میده. حالا چطور این vsync رو مقدار بدیم.
    به کلاس قسمت State تایپ می کنیم.

    یعنی داریم :

    حالا به vsync پارامتر this v رو پاس می دهیم. حالا بیایم ویجت مورد نظرمون رو پیاده سازی کنیم. ویجت RotationTransition رو پیاده سازی می کنیم.

    طبیعتا برای کنترل انیمیشن هم یک button ایجاد می کنیم.

    دقت کنید که initState حتما باید فراخوانی بشه تا AnimationController ما مقدار دهی بشه.
    حالا اگر بیایم در تابع initState انیمیشن رو با تابع forward فراخوانی کنیم و برنامه رو ریست کنیم ، انیمیشن اجرا می شود.

    یعنی داریم :

    حالا قصد داریم از طریق Button انیمیشن ویجت رو کنترل کنیم.
    حالا میایم از طریق تابع onPressed یک شرط پیاده سازی می کنیم.

    خب در نهایت از طریق قطعه کد زیر ما میتونیم روی انیمیشن یک ویجت از طریق Animation Controller کنترل داشته باشیم.

  • 11 دقیقه

    در جلسه قبل با Animated Widgets آشنا شدیم.حالا اگر قصد داشته باشیم یک Widget رو Animate کنیم که داخل Animated Widgets نبود ، روال کار به چه صورت هست؟
    یکی از راه حل ها ، استفاده از Tween هست که به ما کمک می کند ، هر Value رو با یک ساختار Animate ایجاد کنیم.Tween میاد یک مقدار ابتدا و انتها از هر نوعی ، به عنوان ورودی دریافت و بین این مقادیر رو با Animated تغییر می کند. یعنی ما می توانیم با این مقادیر ابتدا و انتها یک انیمیشن ایجاد کنیم.

    حالا چطور از Tween استفاده کنیم؟
    خب در جلسه قبل مثال زیر رو داشتیم

    حالا قصد داریم یک Container دیگه ایجاد و از طریق Tween فاصله این دو Container رو Animate کنیم. طبیعتا ما چنین Animated Widget برای این روند نداریم و باید خودمون این ساختار رو پیاده سازی کنیم.در مرحله اول از تابع TweenAnimationBuilder استفاده می کنیم. این تابع نیز همانند Animated Widget دو ویژگی duration و curve رو نیز دارد.

    ویژگی های دیگری که در این تابع داریم ، ویژگی tween هست که ما باید ابتدا و انتهای آیتمی که قصد داریم Animate کنیم را مشخص کنیم.در این مرحله باید مشخص کنیم چه نوع Value رو باید Animate کنیم. ما double تعریف می کنیم.
    این Value داخل Tween مشخص می کند نوعی که میخواد تو این مدت 600 میلی ثانیه از نقطه ابتدا به انتها برود double هست. ما داخل tween دو پارامتر begin و end داریم. برای مقدار end یک متغیر تعریف می کنیم.

    حالا باید آیتم builder رو مشخص کنیم. در واقع اون قسمتی هست که میاد و موقع Animate رفرش میشه. 3 پارامتر ورودی داره.

    حالا باید رابط کاربری که در این builder میخوایم نمایش بدیم رو پیاده سازی کنیم.

    در مرحله اول یک Column ایجاد و مقدار mainAxisAlignment رو center در نظر میگیریم که آیتم های ما در وسط اپ قرار بگیرن.
    رنگ و عرض و ارتفاع widget رو نیز تعریف میکنیم.

    پس از ساخت widget یک sidebox نیز ایجاد میکنیم که این sidebox ارتفاع بین دو widget هست.

    یک widget دیگه نیز پیاده سازی می کنیم.

    و در نهایت از طریق یک button این انیمیشن رو کنترل می کنیم.

    در نهایت داریم

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

نظرات دوره آموزش مجازی انیمیشن در فلاتر Flutter

  • برای مشاهده نظرات و سوالات، بر روی دکمه مربوطه کلیک کنید
  • ارتباط سریع و موثر با مدرس دوره
  • امکان ارسال فایل های پروژه
  • پاسخگویی متنی، صوتی و تصویری به سوالات شما