کار با Motion Editor در اندروید استودیو

در نسخه ۴ اندروید استودیو ویژگی Motion Editor اضافه شده است و با امکانات قوی توانسته است بسیار راحت ساخت و پیاده سازی انیمیشن در اندروید را انجام دهد.در این مطلب قصد داریم با این ویژگی بطور کامل آشنا شویم.

ایجاد انیمیشن با MotionLayout

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

implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta6'

برای پیاده سازی ابتدا میبایستی یک لایوت ایجاد کنید که با تگ MotionLayout  به عنوان والد این لایوت شروع شود ایجاد کرد.

پس از ایجاد فایل ، می بینید که  MotionLayout به تگ layoutDescription نیاز دارد که روی آن تنظیم شود. این فایل MotionScene است که باید به لایوت وصل شود.

MotionScene  چیست ؟

آبجکت MotionScene  تعیین میکند که Motion Layout به چه صورتی میباید انیمیشن کامپوننت را انجام دهد.ما MotionScene را در یک فایل جدا در پوشه xml ایجاد میکنیم. برای ایجاد MotionScene فقط کافی است روی MotionLayout از کلید میبانبر Alt+Enterاستفاده کنید و روی گزینه Generate MotionScene file کلیک کنید.

این کار به طور اتوماتیک یک فایل XML جدید MotionScene را در پوشه xml ایجاد می کند. فایل پیش فرض MotionScene به شرح زیر است:

<?xml version="1.0" encoding="utf-8"?>
<MotionScene
xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
 
    <ConstraintSet android:id="@+id/start">
        <Constraint android:id="@+id/widget" />
    </ConstraintSet>
 
    <ConstraintSet android:id="@+id/end">
        <Constraint android:id="@id/widget" />
    </ConstraintSet>
 
    <Transition
        app:constraintSetEnd="@id/end"
        app:constraintSetStart="@+id/start" />
</MotionScene>

شما باید ویجت Constraint را که از فایل MotionScene ایجاد شده است ، حذف کنید.فایل لایوت MotionLayout ما به شرح زیر است

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:layoutDescription="@xml/motion_layout_demo_scene">
 
</androidx.constraintlayout.motion.widget.MotionLayout>

الان میتوانید برای پیاده سازی انیمیشن به نمای Design بروید

در اینجا همانطور که مشاهده میکنید ویوی Motion  وجود دارد که قصد داریم انیمیشن مابین دو Button را پیاده سازی کنیم.

MotionLayout resting states (ConstraintSet

هدف MotionLayout این است که کل Layout ها حالتهای مختلفی داشته باشد که می تواند در آن ها animation ها را ایجاد کرد. آیتم ها با برچسب ConstraintSet تعریف شده اند.

هنگامی که روی هر کدام از state ها کلیک کنید  start یا end  . ادیتور بسته به انتخاب های بروز رسانی می شود.هنگام افزودن View های جدید و تنظیم وضعیت اولیه این View ها ، می توانید مطمئن شوید که “base state” (“Motion Layout”) را انتخاب کرده اید.

بیایید یک Button به Layout خود اضافه کنیم. ابتدا مطمئن شوید که “Base State” انتخاب شده است ، و سپس یک دکمه جدید را از  پالت  انتخاب کنید. سپس ما آن را بالا می بریم و Constraint ها را شروع می کنیم.

الان State نهایی را که تعریف کرده ایم انتخاب کنید. اکنون می توانیم Constraint های دکمه را برای Constraint کردن در پایین و انتهای صفحه ویرایش کنیم. هنگامی که ما بین State های مختلف Transition می شویم ، می بینیم که دکمه در State شروع و در انتهای State انتهایی در بالا است.

الان دارای دو State و چندین Constraint مختلف هستیم.خب بیاید با هم دوباره یک Motion جدید اضافه کنیم.

افزودن Motion Layout States

برای افزودن یک resting state بر روی اولین دکمه در بخش بالایی کلیک کنید

به طور پیش فرض ، تمام State ها Constraint هایی را از state پایه MotionLayout به ارث می برند (یعنی Constraint هایی که در فایل لایوت وجود دارد). به همین دلیل لازم نیست Constraint هایی را برای استارت ایجاد کنیم ، بلکه فقط State را از MotionLayout به ارث می برد.

State جدیدی که ایجاد کردیم در داخل ادیتور قابل مشاهده میباشد.مشابه مثال های قبلی میبایستی Constraint مربوطه را به state جدید نیز اعمال کنیم.برای اینکار لازم است فقط state را انتخاب کنید و هر چقدر نیاز دارید Constraint ایجاد کنید.مانند تصویر زیر

Transitions بین  state ها

ما State های مختلف خود را تنظیم کرده ایم و می دانیم که چگونه این انیمیشن اجرا شود. ما می خواهیم دکمه  از گوشه بالا سمت چپ به پایین سمت راست Transition شود. اما چگونه ما این اتفاق را می افتد؟

با Transitions ، می توانیم مشخص کنیم که کدام State شروع و کدام State نهایی است. اجرای Transition بین آنها به طور خودکار بین ConstraintSets مختلف که در هر حالت تعریف شده اند اتفاق می افتد.

اجرای MotionLayout animations در اندروید استودیو

اگر به ابتدای این مقاله نگاهی دوباره بندازید,خطوط با فلش بالاتر از State های Transitionشده  بین آنها است. هنگامی که روی خط کلیک می کنید ، ویرایشگر اطلاعات انتقال زیر State ها را نشان می دهد و شما قادر خواهید بود انیمیشن را بین آن دو حالت پخش کنید.

شما میتوانید سرعت انیمیشن را بالا یا پایین بیارید با کلیک کردن بر روی دکمه 1.0x کنار دکمه play و هرکدام از حالات را انتخاب نمایید.

افزودن Transitions های جدید

مشابه افزودن State ها جدید که قبلتر اضافه کرده بودیم, می توانیم تعداد زیادی Transition را نیز به State ها اضافه کنیم.برای اینکار روی دکمه Add Transition کلیک کنید.

ما می توانیم با مشخص کردن id برای transition تعیین کنیم کدام state باید start باشد و کدامیک end باشد.

بعد از تعیین کردن انیمیشن ایجاد شده , در بخش دیزاین Motion Editor می توانید آن را مشاهده کنید. برای اینکار روی Transition کلیک کنید تا انیمیشن play شود.

اتوماتیک transition با MotionLayout  با کلیک روی Button

در این بخش میخواهیم یک انیمیشن ایجاد کنیم تا بتوانیم هنگامی که رو یک button کلیک شد بتوانیم آن انیمیشن را اجرا کنیم.برای افزودن انیمیشن اتوماتیک روی دکمه سوم کلیک کنید تا listener باز شود.

سپس در کادر ظاهر شده تعیین میکنیم که کدام انیمیشن شروع شود.

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

افزودن یک KeyFrame به transition

ابتدا نیاز میباشد که تعیین کنیم State شروع ahpa را برابر مقدار 0.0  برای button قرار دهیم.سپس مقدار end را برابر با 1.0 قرار می دهیم.

الان نیاز داریم که مقدار ConstraintSet را برای start و end تعیین نماییم. برای شروع مقدار KeyFrame را روی 27% برای alpha  برای دکمه 1.0 قرار دهید.

سپس  میتوانیم گزینه های مختلف “KeyAttribute” را انتخاب کنیم. KeyAttribute به ما این امکان را می دهد یک ویژگی را در قسمت مشخص در انیمیشن قرار دهیم (ویژگی هایی مانند Ahpha ، چرخش(Rotation) ، مقیاس(Scale) یا ارتفاع(Elevation)).

اکنون Target View ، موقعیت در انیمیشن را انتخاب می کنیم (از 100٪) و Attribute ی  را که می خواهیم این Target را هدف قرار دهد. ما موقعیت را برابر 27% قرار می دهیم و Attribute آلفا را Target قرار می دهیم.

الان میتوانید مشاهده کنید KeyFrame را که دارای Transition List هست.

با انتخاب کردن هر آیتم و باز کردن Attribute های در پنل کناری , می توانیم ببینیم KeyAttribute هایی که در alpha,motionTarget و  FramePosition را تعیین کرده بودیم.در صورتی که بخواهیم مقدار alpha را برابر 1.0 قرار داده شود , میتوانیم مقادیر را مانند تصویر زیر قرار دهید.

اگر “animation position tracker” را در ویرایشگر بچسبانیم ، می توانیم بطور واضح ببینیم که چگونه این انیمیشن از 0 تا 1 در طی 0 تا 27٪ انیمیشن و از 27٪ به بعد کاملاً مات می شود.

همانطور که در منو مشاهده می کنید ، بسیاری از گزینه های KeyFrame نیز در دسترس شما هستند. اگر می خواهید Attribut های دیگری را در طول انیمیشن تغییر دهید ، می توانید از KeyPosition ، KeyTrigger ، KeyCycle یا KeyTimeCycle برای رسیدن به افکت های مختلف استفاده کنید.

KeyFrames بهترین گزینه برای زمانی است که می خواهید بخشی از انیمیشن متفاوت باشد یا در حین Transition بین حالت Start و End تغییر کند.

سخن اخر

ویرایشگر جدید Motion Editor در Android Studio کار با MotionLayout را بسیار راحت تر از گذشته انجام می دهد. من واقعاً از کار با آن لذت می برم و از پیش نمایش انیمیشن هایم در اندروید استودیو بدون نیاز به اجرای آن بر روی یک دستگاه سرعت کار را خیلی بالا میبرد.