صفر تا صد انیمیشن در اندروید

انیمیشن در اندرویدانیمیشن ها در طراحی رابط کاربری اندروید قدرت فوق العاده ای در ایجاد احساس تعامل با نرم افزار در کاربر ایجاد میکند .کاربر دکمه ای را در نرم افزار لمس میکند و المان ها با ایجاد کنش حرکتی نشان میدهند خواسته کاربر را درک میکنند .با استفاده از API های که در این خصوص ساخته شده ، میتوان هر چیز در در صفحه حرکت داد ، از یک دکمه ساده گرفته تا حتی تصاویر ایکون ها . انیمیشن در اندروید در سه چارچوب ارائه شده که هر کدام برای وضعیت های مختلف طراحی شده :انیمیشن خصوصیات ( Property Animations ) : رابط ی پر قدرت که از اندروید 3 معرفی شده و خصوصیات المان ها را انیمیت می کندانیمیشن ویو ( View Animations ) : رابطی کند و کمتر استفاده در مقابل Property Animations که View ها را انیمیت میکند انیمیشن جابجای ( Transition Animations ) : برای اجرا در اندروید 4.4 به بالاتر ساخته شده که جابجایی بین اکتیویتی ها و فرگمنت ها را انیمیت می کنددر این چارچوب ها 5 قالب انیمیشن قابل طراحی است و تمام کلاس ها و رابط های برنامه نویسی طراحی شده در این قالب ها جای میگیرند :انیمیت خصوصیت ( Property Animations ) : این انیمیت برای تغییر یک خصوصیت بین دو مقدار می باشد و معمولا برای انیمیت کردن view ها در صفحه با چرخش و تغییر مکان و غیره انجام میگیرد انیمیت جابجایی اکتیویتی ( Activity Transitions ) : این انیمیت در زمان ورود یا خروج اکتیویتی از صفحه اجرا میشود . انیمیت جابجایی فرگمنت ( Fragment Transitions ) : این انیمیت در زمان جابجایی بین فرگمنت ها در صفحه اجرا میشود . انیمیت لی اوت ( Layout Animations ) : این انیمیت روی لی اوت ها یا ViewGroup ها اجرا میشود و تمام المان های داخل لی اوت را انیمیت می کند .انیمیت تصاویر ( Drawable Animations ) : این انیمیت برای تغییر تصاویر drawable بصورت انیمیشن اجرا میشود .انیمیشن Property Animationsاین نوع انیمیشن از اندروید 3 معرفی شده و با آن میتوان هر چیزی را در صفحه طبق روش های تعریف شده انیمیت کرد . بطور مثال متداول ترین روش های انیمیت در زیر معرفی شده .alpha ( محو شدگی ) rotation, rotationX, rotationY ( چرخش و یا برگرداندن ) scaleX, scaleY ( بزرگنمایی یا کوچک کردن ) x, y, z ( جابجایی ) translationX, translationY, translationZ (API 21+) ( موقعیت دهی ) همانطور که می بینید این نوع انیمیشن روی روش های انیمیت کردن متمرکز شده و برایش فرقی ندارد که المان مورد نظر از چه نوعی میباشد و با آن میتوان به راحتی انیمیشن های گسترده ای ایجاد کرد . در زیر به انواع کلاس های طراحی شده برای اینکار خواهیم پرداختکلاس ObjectAnimator:با استفاده از کلاس ObjectAnimator می توان خصوصیات مختلف یک view را انیمیت کرد . متد های طراحی شده در این کلاس view مورد نظر و روش انیمیت و مقدار نهایی را دریافت کرده و خودش بقیه کار را به عهده میگرد .ObjectAnimator fadeAnim = ObjectAnimator.ofFloat(tvLabel, &quotalpha&quot, 0.2f); fadeAnim.start();در کد بالا tvLabel یک view برای انیمیت کردن و رشته ی "alpha" با استفاده از reflection خصوصیت مورد نظر برای انیمیت کردن را پیدا کرده و آن را تا مقدار 0.2f انیمیت خواهد کرد . البته میتوان به جای این کار از properties system in 4.0 استفاده کرد تا سرعت اجرا نیز بیشتر شود . زیرا اینکار دیگر نیاز به جستجوی خصوصیات در reflection نخواهد داشت . ObjectAnimator fadeAltAnim = ObjectAnimator.ofFloat(image, View.ALPHA, 0, 1); fadeAltAnim.start();در ObjectAnimator میتوان از روش های انیمیت شامل ALPHA, ROTATION, ROTATION_X, ROTATION_Y, SCALE_X, SCALE_Y, TRANSLATION_X, TRANSLATION_Y, TRANSLATION_Z, X, Y, Z استفاده کرد . همچینین میتوان مدت زمان و تکرار انیمیشن را نیز تعریف کرد .ObjectAnimator scaleAnim = ObjectAnimator.ofFloat(tvLabel, &quotscaleX&quot, 1.0f, 2.0f); scaleAnim.setDuration(3000); scaleAnim.setRepeatCount(ValueAnimator.INFINITE); scaleAnim.setRepeatMode(ValueAnimator.REVERSE); scaleAnim.start();در ضمن AnimatorListenerAdapter رویداد های را در حین اجرای انیمیشن در اختیار ما قرار میدهد تا بتوان کنترل درستی روی اجرای انیمیشن داشت .ObjectAnimator anim = ObjectAnimator.ofFloat(v, &quotalpha&quot, 0.2f); anim.addListener(new AnimatorListenerAdapter() { @Override public void (Animator animation) { Toast.makeText(MainActivity.this, &quotEnd!&quot, Toast.LENGTH_SHORT).show(); } }); anim.start();گاهی اوقات نیاز است که چند انیمیت با هم اجرا شوند. کلاس AnimatorSet برای اینکار طراحی شده و با تعریف ObjectAnimator ها آنها را با هم اجرا میکند :AnimatorSet set = new AnimatorSet(); set.playTogether( ObjectAnimator.ofFloat(tvLabel, &quotscaleX&quot, 1.0f, 2.0f) .setDuration(2000), ObjectAnimator.ofFloat(tvLabel, &quotscaleY&quot, 1.0f, 2.0f) .setDuration(2000), ObjectAnimator.ofObject(tvLabel, &quotbackgroundColor&quot, new ArgbEvaluator(), /*Red*/0xFFFF8080, /*Blue*/0xFF8080FF) .setDuration(2000) ); set.start(); کلاس ViewPropertyAnimatorاین انیمیشن که بالاتر از ObjectAnimator قرار خواهد گرفت ، انیمیشن های سریعتری را اجرا خواهد کرد میتوان با آن خصوصیاتی را تغییر داد بدون استفاده از Support Libraryدر صورت استفاده نکردن از Support Library میتوان بصورت مستقیم از آن استفاده کرد Button btnExample = (Button) findViewById(R.id.btnExample); btnExample.animate().alpha(0.2f).xBy(-100).yBy(100);با این انیمیشن هم میتوان خصوصیاتی زیادی را بصورت موازی تغییر داد و زمان اجرای انیمیشن و رویداد های آن را تغییر داده و انمیشن های پیچیده نوشت btnExample.animate().alpha(0.5f).rotation(90f). scaleX(2).xBy(100).yBy(100).setDuration(1000).setStartDelay(10). setListener(new AnimatorListenerAdapter() { @Override public void (Animator animation) { Toast.makeText(MainActivity.this, &quotStarted...&quot, Toast.LENGTH_SHORT).show(); }; });با استفاده از Support Libraryزمانی که ازSupport Library استفاده میکنید و در گرادل کد زیر را اضافه کردید:implementation 'com.android.support:support-v4:24.2.0'باید به این شکل از انیمیشن استفاده کنید تا در اندروید با API 11 نیز قابل اجرا باشد :Button btnExample = (Button) findViewById(R.id.btnExample); ViewCompat.animate(btnExample).alpha(0.2f).xBy(-100).yBy(100);میتوان انیمیشن ها را در فایل های xml نیز تعریف کرد . که در مسیر res/animator قرار خواهد گرفت . و فایل آن بصورت زیر خواهد بود <?xml version=&quot1.0&quot encoding=&quotutf-8&quot?> <set xmlns:android=&quothttp://schemas.android.com/apk/res/android&quot android:ordering=&quottogether&quot > <objectAnimator android:propertyName=&quotalpha&quot android:valueTo=&quot0.5&quot > </objectAnimator> <objectAnimator android:propertyName=&quotrotation&quot android:valueTo=&quot90.0&quot > </objectAnimator> <objectAnimator android:propertyName=&quotscaleX&quot android:valueTo=&quot2.0&quot > </objectAnimator> <objectAnimator android:propertyName=&quottranslationX&quot android:valueTo=&quot100.0&quot > </objectAnimator> <objectAnimator android:propertyName=&quottranslationY&quot android:valueTo=&quot100.0&quot > </objectAnimator> </set>و اینطوری از آن استفاده خواهد شد Animator anim = AnimatorInflater.loadAnimator(this, R.animator.multi_button); anim.setTarget(tvBlah); anim.setDuration(1000); anim.setStartDelay(10); anim.addListener(new AnimatorListenerAdapter() { @Override public void (Animator animation) { Toast.makeText(MainActivity.this, &quotStarted...&quot, Toast.LENGTH_SHORT).show(); }; }); anim.start();کلاس ValueAnimatorبرخی از اوقات بجای تغییر خصوصیت یک view نیاز است که روی روند اجرای انیمیشن کنترل داشته باشیم . برای این شرایط ValueAnimator گزینه بسیار خوبی است .ValueAnimator valueAnim = ValueAnimator.ofFloat(0, 1); valueAnim.setDuration(700); valueAnim.setInterpolator(new DecelerateInterpolator()); valueAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { float animatedValue = (float) animation.getAnimatedValue(); } }); if (!valueAnim.isStarted()) { valueAnim.start(); }انیمیشن های View Animationsاین نوع انیمیشن قبل از Property Animations معرفی شده بود و سیستمی کند تر دارد . معمولا نسبت به آن کمتر کاربرد دارد .با استفاده از Xmlفایل انیمیشن در مسیر res/anim قرار خواهد گرفت و معمولا بصورت زیر ساخته میشود :<?xml version=&quot1.0&quot encoding=&quotutf-8&quot?> <set xmlns:android=&quothttp://schemas.android.com/apk/res/android&quot android:fillAfter=&quottrue&quot > <alpha android:duration=&quot1000&quot android:interpolator=&quot@android:anim/accelerate_interpolator&quot android:fromAlpha=&quot1.0&quot android:toAlpha=&quot0.0&quot /> </set>حال بصورت زیر از ان استفاده خواهیم کرد :Animation animFadeOut = AnimationUtils.loadAnimation(this, R.anim.fade_out); animFadeOut.setAnimationListener(new AnimationListener() { @Override public void (Animation animation) { // Fires when animation starts } @Override public void (Animation animation) { // ... } @Override public void onAnimationRepeat(Animation animation) { // ... } }); // start the animation btnExample.startAnimation(animFadeOut);انتقال اکتیویتی Activity Transitionsهمانند انیمیشنی که برای view ها اجرا کردیم میتوان برای زمان انتقال اکتیویتی نیز انیمیشن اجرا کرد و اینکار معمولا در زمان ساختن intent انجام میگیرد :Intent i = new Intent(MainActivity.this, SecondActivity.class); startActivity(i); overridePendingTransition(R.anim.right_in, R.anim.left_out);پارامتر اول انیمیشن ورود به صفحه و پارامتر دوم انیمیشن خروج از صفحه می باشد که بصورت فایل xml تعریف شده است :<?xml version=&quot1.0&quot encoding=&quotutf-8&quot?> <set xmlns:android=&quothttp://schemas.android.com/apk/res/android&quot android:interpolator=&quot@android:anim/linear_interpolator&quot> <translate android:fromXDelta=&quot100%p&quot android:toXDelta=&quot0&quot android:duration=&quot500&quot/> </set> و برای اینکه بتوان موقع برگشت به صفحه ( زدن دکمه back ) نیز انیمیشن بصورت برعکس اجرا شود باید فایل های xml جدا و بصورت برعکس را ایجاد کرده و در رویداد مورد نظر آن را صدا زد @Override public void onBackPressed() { finish(); overridePendingTransition(R.anim.left_in, R.anim.right_out); }انتقال اکتیویتی Activity Transitions در اندروید 5 به بعد کلاس Transitions API معرفی شده در اندروید 5 انیمیشن انتقال اکتیویتی را راحتر کرده ولی امکان استفاده از ان در ورژن های قبل از اندروید 5 وجود ندارد . برای اینکار کافی است در مسیر res/transition فایل های xml با تگ های slide, fade, explode, autoTransition, و recolor ایجاد کنیم <slide xmlns:android=&quothttp://schemas.android.com/apk/res/android&quot xmlns:app=&quothttp://schemas.android.com/apk/res-auto&quot android:slideEdge=&quotright&quot android:duration=&quot1000&quot/>و به این صورت از ان استفاده کنیم :public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { Transition transition =TransitionInflater.from(this).inflateTransition(R.transition.slide_right); getWindow().setExitTransition(transition);کد بالا برای انیمیشن خروج اکتیویتی می باشد که در جای خود تعریف شده و در واقع 4 حالت میتوان انیمیشن تعریف کرد ، ورود / خروج - بازگشت / ورود مجدد . برای تعریف انیمیشن ورود به صفحه باید هنگام تعریف intent آن را تعریف کرد Intent i = new Intent(MainActivity.this, SecondActivity.class); ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this); startActivity(i, options.toBundle());در صورتی که انیمیشن های بازگشت / ورود مجدد تعریف نشوند ، همان انمیشن های ورود و خروج بصورت برعکس اجرا خواهد شد ولی اگر بخواهید انیمیشنی برای بازگشت اجرا شود باید بجای متد finish از متد finishAfterTransition استفاده کنید . برای دیدن نمونه های مختلف استفاده از این نوع انیمیشن به اینجا و اینجا و اینجا و اینجا و اینجا و اینجا سر بزنید تغییر انیمیشن پیش فرض انتقال اکتیویتیمیتوان انیمیشن پیش فرض در مسیر res/styles.xml را در theme نیز تغییر داد . <style name=&quotAppTheme&quot parent=&quotAppBaseTheme&quot> <item name=&quotandroid:windowAnimationStyle&quot>@style/CustomAnimation.Activity</item> </style> <style name=&quotCustomAnimation.Activity&quot parent=&quot@android:style/Animation.Activity&quot> <item name=&quotandroid:activityOpenEnterAnimation&quot>@anim/slide_in_right</item> <item name=&quotandroid:activityOpenExitAnimation&quot>@anim/slide_out_left</item> <item name=&quotandroid:activityCloseEnterAnimation&quot>@android:anim/slide_in_left</item> <item name=&quotandroid:activityCloseExitAnimation&quot>@android:anim/slide_out_right</item> </style>انیمیشن Fragment Transitionsفرگمنت ها را نیز همانند اکتیویتی میتوان هنگام انتقال انیمیت کرد . برای اینکار کافی ایست مثل اکتیویتی در مسیر res/anim فایل xml ایجاد کرد <?xml version=&quot1.0&quot encoding=&quotutf-8&quot?> <set xmlns:android=&quothttp://schemas.android.com/apk/res/android&quot> <translate android:fromXDelta=&quot-50%p&quot android:toXDelta=&quot0&quot android:duration=&quot@android:integer/config_mediumAnimTime&quot/> <alpha android:fromAlpha=&quot0.0&quot android:toAlpha=&quot1.0&quot android:duration=&quot@android:integer/config_mediumAnimTime&quot /> </set>و سپس در هنگام ایجاد فرگمنت با استفاده از setCustomAnimations آنها را صدا زد FragmentTransaction fts = getSupportFragmentManager().beginTransaction(); // Configure the &quotin&quot and &quotout&quot animation files fts.setCustomAnimations(R.anim.slide_in_left, R.anim.slide_out_right); // Perform the fragment replacement ft.replace(R.id.fragment_container, newFragment, &quotfragment&quot); // Start the animated transition. ft.commit();در ضمن اندروید یکسری انیمیشن های از پیش تعریف شده را در مسیر R.anim دارد که میتوان مستقیم به آن دسترسی داشته و در انیمیشن استفاده کرد . برای خواندن مطالب بیشتر به اینجا مراجعه کنید FragmentTransaction fts = getSupportFragmentManager().beginTransaction(); fts.setCustomAnimations(android.R.anim.slide_in_left, android.R.anim.slide_out_right); fts.replace(R.id.fragment_container, newFragment, &quotfragment&quot); fts.commit();انیمیشن های لی اوت Layout Animationsانیمیشن شروع کنندهمی توان برای هر layout انیمیشنی را تعریف کرد که هنگام ظاهر شدن در صفحه اجرا شود . برای اینکار کافی است انیمیشن مورد نظر را در فایل xml در مسیر res/anim ایجاد کنید <set xmlns:android=&quothttp://schemas.android.com/apk/res/android&quot android:interpolator=&quot@android:anim/accelerate_interpolator&quot> <translate android:fromXDelta=&quot-100%p&quot android:toXDelta=&quot0&quot android:duration=&quot1000&quot /> </set>و سپس یک فایل xml دیگر با تگ layoutAnimation میسازیم و انیمیشن مورد نظر را ادرس دهی میکنیم <layoutAnimation xmlns:android=&quothttp://schemas.android.com/apk/res/android&quot android:delay=&quot30%&quot android:animationOrder=&quotreverse&quot android:animation=&quot@anim/slide_right&quot />حال در android:layoutAnimation در فایل لی اوت آن را قرار میدهیم <LinearLayout ... android:layoutAnimation=&quot@anim/layout_bottom_to_top_slide&quot />به همین سادگی هنگام شروع برنامه تمام view هایی که در این لی اوت قرار دارند زمان ظاهر شدن در صفحه با انیمیت خواهند شدمتریال انیمیشن Material Animationsدر اندروید 5 امکانات مختلفی برای انیمیشن طبق زبان طراحی متریال معرفی شده که کار انیمیت کردن زیبا تر می کند المان اشتراکی در انیمیشن انتقال اکتیویتی - Shared Element Activity Transition : در این انیمیشن با معرفی یک المان مشترک در دو اکتیویتی میتوان انیمیشنی ساخت که در هر دو اکتیویتی برای همان المان اجرا شود بصورت ادامه دار اجرا شود .انیمیشن موجی - Ripple Animation :این انیمیشن با ایجاد افکتی مثل موج پس از لمس المان ایجاد میشودانیمیشن ظاهر شونده - Circular Reveal Animationاین انیمیشن یک انیمیت ظاهر شونده دایره ای است که بیشتر در float button اعمال میشودانیمیشن سلسه مراتبی - View Hierarchy Animationsدر این انیمیشن با تعریف مراحل بصورت Scene کنترلی روی اجرای انیمیشن خواهیم داشتدر پایان چند کتابخانه مهم برای انیمیشن در اندروید را معرفی میکنم :ViewAnimator - AndroidViewAnimations - RecyclerView Animators - ListViewAnimations - NineOldAndroids - Leonids - Like Button