آموزش استفاده از Motion Editor در اندروید استودیو

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

یکی از بهترین ویژگی هایی که در اندروید استودیو معرفی شد قابلیت Motion Editor بود که به توسعه دهندگان این امکان را میدهد تا لایه های جذاب و انیمیشنی تر طراحی کنند.

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

موارد پایه درباره Motion Editor

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

اما این روش کار و برای شما بسیار آسان تر کرده است و با استفاده از یک محیط گرافیکی میتونید انیمیشن های گوناگونی طراحی کنید.

اساسا در این روش نسخه های مختلفی از هر لایه را باید طراحی کنید و المنت های خودتون را داخل آن قرار دهید سپس با ساختن transitions ها و انتقال المنت ها به مقصد انیمیشن خودتان را طراحی میکنید.

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

آماده سازی

برای شروع کار اول باید اندروید استودیو را به نسخه 4.0 آپدیت کنید.

بعد از آن باید کتابخانه مرتبط با ConstraintLayout  را اضافه کنید چون MotionLayout جزوی از ConstraintLayout است.

implementation 'com.android.support.constraint:constraint-layout:2.0.0-beta1'

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

androidx.constraintlayout.motion.widget.MotionLayout

بعد از ساخت این فایل شما احتمالا با خطای MotionScene Syntax error مواجه می شوید.

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

ساخت اولین MotionScene

برای شروع نیاز داریم تا یک motion scene بسازیم.

آبجکت های motion scene توصیف میکنند که چگونه المنت های مختلف انیمیشن های مختلف بگیرند در MotionLayout.

برای تعریف این آبجکت نیاز داریم تا یک فایل xml دیگر بسازیم.

این فایل حالت های لایه را لیست میکنید و تعیین میکند چگونه رفتار کنند.

با کلیک کردن روی متن قرمز رنگ MotionLayout سمت چپ اندروید استودیو بصورت خودکار این فایل را برای شما میسازد.

فایل جدید همنام فایل اصلی و با پسوند _scene.xml می باشد.

بریم سراغ کدهای خودمون.

فایل scene  شما میتونه شامل xml های زیر باشد.

<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>

حالا وارد فایل motion layout شوید. در اینجا از مثال خود گوگل استفاده خواهیم کرد.

<android.support.constraint.motion.MotionLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/motionLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="@xml/motionlayoutexample_scene"
tools:showPaths="true">

<View
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:background="@color/colorAccent"
android:text="Button" />

</android.support.constraint.motion.MotionLayout>

این کد به شکل خیلی ساده یک دکمه با ایدی button را درون صفحه نمایش میدهد.

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

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

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

اجرای انیمیشن

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

یکی حالت شروع start و یکی حالت پایانی end.

یک حالت پایه هم وجود دارد به نام base state که حالت فعلی لایه شما را نمایش میدهد.

به این حالات ConstraintSets میگوییم.

آیکون سمت چپ بالا که شبیه به دوتا گره و یک علامت + سبز رنگ هست به شما امکان ساخت حالت یا state جدید را میدهد.

آیکون وسط ساخت transition را انجام را میدهد.

آیکون سمت راست را هم ساخت اکشن را انجام میدهد.

اگر وارد فایل scene شوید دو تگ Start و End را مشاهده میکنید. البته در قسمت پایین تر transition  را هم میبینید که به اندروید استودیو میگوید بین این دو state یک انیمیشن وجود دارد.

شما هر state که بخواهید را میتوانید انتخاب کنید.

فایل خودمون و به شکل زیر آپدیت میکنیم.

<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>

<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginEnd="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>

برای دیدن انیمیشن روی خود اکشن transition  که آیکون فلش مانند هست کلیک کنید.

در این حالت باید ببینید که دکمه داخل صفحه مرتبا به سمت پایین میرود.

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