توضیحات کوتاهی درباره ساخت انیمیشن با اندروید
تصور کنید شما میخواهید مطلبی را به صورت کامل بفهمید و آن را درک کنید به نظرتون با دیدن فیلم و انیمیشن آن مطلب را بهتر درک میکنید یا با خواندن مطالبی در رابطه با آن؟! در ادامه همراه ما با مقاله ساخت انیمیشن با اندروید باشید.
بله درسته فیلم و انیمیشن در درک کردن بهتر و سریعتر مطالب بهتر عمل میکنند و شما با دیدن یک انیمیشن به راحتی میتوانید با تمامی مطالب سخت و دشوار ارتباط برقرار کنید. به طور کلی دیدن یک تصویر یا یک فیلم آموزشی به نوعی مطلب را از یک مقاله چند هزار کلمه ای بهتر به مخاطب القا میکنند یا به زبانی ساده با مخاطب بهتر ارتباط برقرار میکنند.
امروزه، هر برنامه برای درک بهتر مطالب خود از انیمیشن استفاده میکند تا محتوای آن را به روشی قابل فهمتر نشان دهد. وقتی سخن از مفهوم Design Material به میان بیاید این انیمیشنها هستند که وارد میدان میشوند.
چگونگی ساخت انیمیشن با اندروید
ابتدا قبل از غوطه ور شدن در چگونگی ساخت انیمیشن با اندروید بگذارید کمی در رابطه با خود اینکه انیمیشن چیست صحبت کنیم. انیمیشن روشی است که در آن تصاویر دستکاری میشوند تا به عنوان تصاویر متحرک ظاهر شوند تا بتوانند مطالب را بهتر به مخاطب برسانند.
اگر شما از کاربران سیستم عامل اندروید باشید حتما متوجه این موضوع شدهاید که اندروید هیچگونه محدودیتی در ساخت اپلیکشن و نرم افزار ندارد و شما هر برنامهای را که بخواهید برای هر سیستم عاملی میتوانید بسازید.
نکته: انیمیشنها فرآیند ایجاد حرکت و تغییر شکل اشیاء به شیوههای خاص هستند.
چارچوب انیمیشنها به ما اجازه میدهد که بتوانیم در برنامه خود انیمیشنهای جذاب و چهرههای بصری دلانگیزی را ایجاد کنیم. با استفاده از انیمیشنها، میتوان به برنامه ظاهر زیبایی داد و آن را به برنامهای مخاطب پسند تبدیل کرد.
ویجت ConstraintLayout به لطف تطبیقپذیری چشمگیر خود، به “چاقوی ارتش سوئیس” برای توسعهدهندگان برنامههای اندرویدی تبدیل شده است. با این حال اضافه کردن انیمیشنهای پیچیده به محتوای آن اگرچه ممکن است، اما میتواند بسیار وقتگیر باشد. به همین دلیل گوگل ویجت MotionLayout را در ۲۰۱۸ معرفی کرد.
ابزارک MotionLayout، که اکنون بخشی از کتابخانه پشتیبانی Android (اندروید) است ویجت ConstraintLayout را گسترش میدهد. این یک ابزارک منحصر به فرد است که به شما امکان میدهد محتوای آن را فقط با استفاده از XML بصورت کاملا دلخواه متحرک کنید.
علاوه بر این، شما میتوانید بر روی متحرکسازی انیمیشنهای برنامهی خود نظارات مستقیم و دقیقی را داشته باشید.
آشنایی با انواع انیمیشنها
اندروید میتواند از انیمیشنهایی که در viewها و activityها هستند را پشتیبانی کند. به طور کلی سه نوع سیستم انیمیشن وجود دارد که به شکل و حالات مختلفی کار میکنند که این سه سیستم شامل:
Property Animation (انیمیشنهای مشخصه)
توسط Google در نسخههای اندروید ۳ به بالا معرفی شد. این قابلیت به ما اجازه میدهد در یک بازه زمانی مشخص بتوانیم ویژگیهای اشیاء برنامه مورد نظر خود را تغییر دهیم. این نوع سیستم از رایجترین و معروفترین سیستمهای ساخت انیمیشن با اندروید است که توسعهدهندگان زیادی از آن استفاده میکنند.
(View Animations) انیمیشن نما
اگر شما قصد دارید انیمیشنی ساده طراحی کنید که فقط نیاز به تغییر دادن اندازه، موقعیت و چرخش دارد میتوانید از این سیستم استفاده کنید. انیمیشنهایی که با استفاده از این سیستم ساخته میشوند بسیار آسان هستند و روند کندی دارند و نسبتا انعطافپذیری کمتری نسبت به انیمیشنهای مشخصه دارد.
Transition Animations (انیمیشنهای گذار)
این سیستم ساخت انیمیشن با اندروید آخرین سیستم از گروه اصلی ساخت انیمیشن هستند که توسط گوگل و برای نسخههای اندروید ۴ به بالا معرفی شده است.
ساخت انیمیشن با اندروید و استفاده از XML
بهترین قسمتی که در ساخت انیمیشن وجود دارد این است که شما میتوانید فقط با نوشتن چند کد در XML انیمیشن خود را طراحی کنید به همین راحتی!!
همانطور که میدانید ساخت و متحرکسازی انیمیشن همه به قسمت UI مرتبط میشوند و بخش UI با استفاده از کدهای XML به راحتی انیمیشن مورد نظر ما را ایجاد میکند. اگر بخواهیم دانش کاملی در رابطه با ساخت انیمیشن با استفاده از XML داشته باشیم باید با برخی ویژگیهای مهم آن آشنا شویم که این ویژگیها عبارتند از:
duration
در این ویژگی شما مشخص میکنید که مدت زمان انیمیشنها چقدر باشد.
Interpolator
سرعت حرکت انیمیشن را با این قابلیت میتوانید تنظیم کنید. به عنوان مثال شما یک آیکون ماشین در حال حرکت دارید با استفاده از این ویژگی میتوانید مشخص کنید که ماشین در حال حرکت شما سرعت کم یا زیادی داشته باشد.
repeatMode
با این ویژگی شما میتوانید مشخص کنید که چند بار انیمیشن مورد نظر شما تکرار شود. به طور مثال اگر میخواهید انیمیشن شما تا بینهایت تکرار شود میتوانید گزینه تکرار بینهایت را انتخاب کنید.
ساخت انیمیشن با اندروید
حال که کمی در رابطه با انیمیشنها اطلاعات کسب کردید اگر موافق باشید به سراغ چگونگی ساخت آنان برویم در اینجا ما قصد داریم مراحلی را به شما توضیح دهیم که با استفاده از آنان میتوانید برای خود انیمیشنهای گوناگون طراحی کنید.
مرحله اول
Android Studio را باز کنید و یک پروژه جدید با الگوی فعالیت خالی (Empty Activity) ایجاد کنید.
مرحله دوم
پس از ایجاد پروژه، اولین کاری که باید انجام دهید ساخت یک فهرست منابع انیمیشن است که می توانید تمام پروندههای انیمیشن خود را در آن ذخیره کنید.
سپس، به دایرکتوری res بروید و بر روی آن کلیک راست کنید بعد بر روی New> Android Resource Directory کلیک کنید و پس از آن نوع منبع را به عنوان anim انتخاب کنید و سپس بر روی OK کلیک کنید.
مرحله سوم
اکنون، شما باید برخی از پروندههای Animation را در پوشه anim ایجاد کنید که در مرحله قبل ایجاد کردهاید. بنابراین، بر روی res / anim کلیک راست کرده و New> Animation Resource File را انتخاب کرده و نام فایل را وارد کرده و بر روی OK کلیک کنید. در اینجا نحوه استفاده از انیمیشن Fade In را خواهیم دید. بنابراین، نام پرونده fade_in.xml است.
مرحله چهارم
مرحله بعدی ما اضافه کردن انیمیشن است که میخواهیم در فایلی که در مرحله قبل اضافه درست کردیم، اجرا کنیم. کد زیر را برای انیمیشن Fade In در فایل fade_in.xml خود اضافه کنید:
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true"> <alpha android:duration="5000" android:fromAlpha="0.0" android:interpolator="@android:anim/accelerate_interpolator" android:toAlpha="1.0" /> </set>
مرحله پنج
UI را به MainActivity اضافه کنید. در اینجا UI مورد نظر MainActivity را اضافه خواهیم کرد. ما یک TextView و یک دکمه (برای شروع انیمیشن) اضافه میکنیم. بنابراین کد مربوط به پرونده activity_main.xml به صورت زیر است:
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <Button android:id="@+id/btn" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintTop_toBottomOf="@+id/text" app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="8dp" android:layout_marginRight="8dp" app:layout_constraintStart_toStartOf="parent" android:layout_marginLeft="8dp" android:layout_marginStart="8dp" android:layout_marginBottom="8dp" app:layout_constraintBottom_toBottomOf="parent" android:text="Click Me"/> </androidx.constraintlayout.widget.ConstraintLayout>
مرحله شش
بعد از افزودن رابط کاربر (UI)، آخرین مرحله ما اتصال انیمیشن هنگام کلیک روی دکمه است. بنابراین کد فایل MainActivty.kt به شرح زیر است:
class MainActivity : AppCompatActivity() {
//TextView
lateinit var txtMessage: TextView
//Button
lateinit var btn: Button
// Animation
lateinit var animFadein: Animation
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
txtMessage = findViewById<TextView>(R.id.text)
btn = findViewById<Button>(R.id.btn)
//loading Animation
animFadein = AnimationUtils.loadAnimation(
applicationContext,
R.anim.fade_in)
//handling aniamtion on button click
btn.setOnClickListener {
txtMessage.setVisibility(View.VISIBLE)
// starting the animation
txtMessage.startAnimation(animFadein)
}
}
}
از روش loadAnimation () برای بارگذاری انیمیشن مورد نظر استفاده میشود. نام پرونده مورد نظر ما fade_in.xml است.
از روش startAnimation () برای شروع یک انیمیشن روی یک مولفه خاص استفاده میشود. اگر میخواهید قبل، بعد یا حین انیمیشن برخی از عملیات را انجام دهید میتوانید AnimationListener استفاده کنید و سپس عملکردهای زیر را برای لغو همان موارد اجرا کنید:
- onAnimationStart (): با شروع انیمیشن فراخوانی میشود.
- onAnimationEnd (): با اتمام انیمیشن فراخوانی میشود.
- onAnimationRepeat (): هنگام تکرار یک انیمیشن فراخوانی میشود.
تمام کاری که شما باید انجام دهید اجرای AnimationListener و سپس تنظیم شنونده انیمیشن است. کد نهایی ما پس از اجرای AnimationListener بدین شکل میباشد:
class MainActivity : AppCompatActivity(), Animation.AnimationListener {
//TextView
lateinit var txtMessage: TextView
//Button
lateinit var btn: Button
// Animation
lateinit var animFadein: Animation
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
txtMessage = findViewById<TextView>(R.id.text)
btn = findViewById<Button>(R.id.btn)
//loading Animation
animFadein = AnimationUtils.loadAnimation(
applicationContext,
R.anim.fade_in)
//set animation listener
animFadein.setAnimationListener(this)
//handling aniamtion on button click
btn.setOnClickListener {
txtMessage.setVisibility(View.VISIBLE)
// starting the animation
txtMessage.startAnimation(animFadein)
}
}
override fun onAnimationRepeat(p0: Animation?) {
//To change body of created functions use File | Settings | File Templates.
}
override fun onAnimationEnd(p0: Animation?) {
//To change body of created functions use File | Settings | File Templates.
}
override fun onAnimationStart(p0: Animation?) {
//To change body of created functions use File | Settings | File Templates.
}
}
حال برنامه را روی دستگاه اندروید خود اجرا کنید.
سخن آخر
اگر تا به اینجای کار همراه ما بودهاید پس نشان میدهید شما یک طراح و سازنده انیمیشن هستید که میخواهد در آینده انیمیشنهای زیادی را برای سیستم عاملهای مختلف بسازد. ما در این مقاله فقط بخش کوچکی از ساخت انیمیشن را با شما در میان گذاشتهایم، با این حال این مقاله میتواند تا حدودی به ساخت انیمیشن به شما کمک کند.
در آخر تبریک میگوییم زیرا شما توانستهاید انیمیشن دلخواه خود را برای دستگاههای اندرویدی (ساخت انیمیشن با اندروید) بسازید. حال بدون هیچ وقت تلف کردنی، شروع به ساخت انیمیشنهای گوناگون کنید!!
