مقدمه ای بر انیمیشن ها

روش نوشتن را امتحان کنید
Jetpack Compose ابزار رابط کاربری پیشنهادی برای اندروید است. یاد بگیرید که چگونه از انیمیشن‌ها در Compose استفاده کنید.

انیمیشن‌ها می‌توانند نشانه‌های بصری اضافه کنند که کاربران را از اتفاقات برنامه شما مطلع می‌کند. آن‌ها به ویژه زمانی مفید هستند که رابط کاربری تغییر می‌کند، مانند زمانی که محتوای جدید بارگذاری می‌شود یا اقدامات جدیدی در دسترس قرار می‌گیرند. انیمیشن‌ها همچنین ظاهری آراسته به برنامه شما اضافه می‌کنند که به آن ظاهر و حس با کیفیت‌تری می‌دهد.

اندروید بسته به نوع انیمیشنی که می‌خواهید، APIهای انیمیشن مختلفی را در بر می‌گیرد. این مستندات، مروری بر روش‌های مختلف افزودن حرکت به رابط کاربری شما ارائه می‌دهد.

برای درک بهتر اینکه چه زمانی باید از انیمیشن‌ها استفاده کنید، به راهنمای طراحی متریال در مورد حرکت نیز مراجعه کنید.

متحرک‌سازی بیت‌مپ‌ها

شکل ۱. یک فایل قابل ترسیم متحرک.

برای متحرک‌سازی یک گرافیک بیت‌مپ مانند یک آیکون یا تصویر، از APIهای انیمیشن drawable استفاده کنید. معمولاً این انیمیشن‌ها به صورت ایستا با یک منبع drawable تعریف می‌شوند، اما می‌توانید رفتار انیمیشن را در زمان اجرا نیز تعریف کنید.

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

برای اطلاعات بیشتر، بخش «انیمیت کردن گرافیک‌های ترسیمی» را مطالعه کنید.

متحرک‌سازی قابلیت مشاهده و حرکت رابط کاربری

شکل ۲. یک انیمیشن ظریف هنگام ظاهر شدن و ناپدید شدن یک کادر محاوره‌ای، تغییر رابط کاربری را کمتر آزاردهنده می‌کند.

وقتی نیاز دارید که میزان نمایش یا موقعیت نماها را در طرح‌بندی خود تغییر دهید، بهتر است از انیمیشن‌های ظریف استفاده کنید تا به کاربر کمک کنید نحوه تغییر رابط کاربری را درک کند.

برای جابجایی، آشکار کردن یا پنهان کردن نماها در طرح فعلی، می‌توانید از سیستم انیمیشن ویژگی ارائه شده توسط بسته android.animation که در اندروید 3.0 (سطح API 11) و بالاتر موجود است، استفاده کنید. این APIها ویژگی‌های اشیاء View شما را در یک دوره زمانی به‌روزرسانی می‌کنند و با تغییر ویژگی‌ها، نمای را به طور مداوم دوباره ترسیم می‌کنند. به عنوان مثال، وقتی ویژگی‌های موقعیت را تغییر می‌دهید، نما در صفحه حرکت می‌کند. وقتی ویژگی آلفا را تغییر می‌دهید، نما به صورت محو یا محو می‌شود.

برای ساده‌ترین روش ایجاد این انیمیشن‌ها، انیمیشن‌ها را در طرح‌بندی خود فعال کنید تا وقتی قابلیت مشاهده یک نما را تغییر می‌دهید، یک انیمیشن به طور خودکار اعمال شود. برای اطلاعات بیشتر، به به‌روزرسانی‌های خودکار طرح‌بندی متحرک مراجعه کنید.

برای یادگیری نحوه ساخت انیمیشن با استفاده از سیستم انیمیشن Property، مرور کلی انیمیشن Property را مطالعه کنید. همچنین می‌توانید صفحات زیر را برای ایجاد انیمیشن‌های رایج مشاهده کنید:

حرکت مبتنی بر فیزیک

شکل ۳. انیمیشن ساخته شده با ObjectAnimator.

شکل ۴. انیمیشن ساخته شده با API های مبتنی بر فیزیک.

هر زمان که ممکن است، فیزیک دنیای واقعی را در انیمیشن‌های خود اعمال کنید تا طبیعی به نظر برسند. به عنوان مثال، آنها باید هنگام تغییر هدف، حرکت خود را حفظ کنند و در طول هرگونه تغییر، انتقال‌های نرمی داشته باشند.

برای ارائه این رفتارها، کتابخانه پشتیبانی اندروید شامل APIهای انیمیشن مبتنی بر فیزیک است که برای کنترل نحوه وقوع انیمیشن‌های شما به قوانین فیزیک متکی هستند.

دو انیمیشن رایج مبتنی بر فیزیک عبارتند از:

انیمیشن‌هایی که مبتنی بر فیزیک نیستند - مانند انیمیشن‌هایی که با APIهای ObjectAnimator ساخته شده‌اند - نسبتاً ایستا هستند و مدت زمان ثابتی دارند. اگر مقدار هدف تغییر کند، باید انیمیشن را در زمان تغییر مقدار هدف لغو کنید، انیمیشن را با یک مقدار جدید به عنوان مقدار شروع جدید دوباره پیکربندی کنید و مقدار هدف جدید را اضافه کنید. از نظر بصری، این فرآیند یک توقف ناگهانی در انیمیشن و یک حرکت گسسته پس از آن ایجاد می‌کند، همانطور که در شکل 3 نشان داده شده است.

انیمیشن‌هایی که با استفاده از APIهای انیمیشن مبتنی بر فیزیک، مانند DynamicAnimation ، ساخته می‌شوند، توسط نیرو هدایت می‌شوند. تغییر در مقدار هدف منجر به تغییر در نیرو می‌شود. نیروی جدید بر سرعت موجود اعمال می‌شود که باعث انتقال مداوم به هدف جدید می‌شود. این فرآیند منجر به انیمیشنی با ظاهری طبیعی‌تر می‌شود، همانطور که در شکل ۴ نشان داده شده است.

تغییرات طرح‌بندی را متحرک‌سازی کنید

شکل ۵. یک انیمیشن برای نمایش جزئیات بیشتر می‌تواند با تغییر طرح‌بندی یا شروع یک فعالیت جدید ایجاد شود.

در اندروید ۴.۴ (سطح API ۱۹) و بالاتر، می‌توانید از چارچوب انتقال برای ایجاد انیمیشن‌ها هنگام تعویض طرح‌بندی در اکتیویتی یا فرگمنت فعلی استفاده کنید. تنها کاری که باید انجام دهید این است که طرح‌بندی شروع و پایان و نوع انیمیشنی را که می‌خواهید استفاده کنید مشخص کنید. سپس سیستم یک انیمیشن را بین دو طرح‌بندی تشخیص داده و اجرا می‌کند. می‌توانید از این برای تعویض کل رابط کاربری یا جابجایی یا جایگزینی فقط برخی از نماها استفاده کنید.

برای مثال، وقتی کاربر برای دیدن اطلاعات بیشتر روی یک آیتم ضربه می‌زند، می‌توانید طرح‌بندی را با جزئیات آیتم جایگزین کنید و یک انتقال مانند آنچه در شکل ۵ نشان داده شده است را اعمال کنید.

طرح‌بندی شروع و پایان هر کدام در یک Scene ذخیره می‌شوند، اگرچه صحنه شروع معمولاً به طور خودکار از طرح‌بندی فعلی تعیین می‌شود. شما یک Transition ایجاد می‌کنید تا به سیستم بگویید چه نوع انیمیشنی می‌خواهید، سپس TransitionManager.go() را فراخوانی می‌کنید و سیستم انیمیشن را برای تعویض طرح‌بندی‌ها اجرا می‌کند.

برای اطلاعات بیشتر، «تغییرات طرح‌بندی را با استفاده از یک گذار متحرک کنید» را مطالعه کنید. برای نمونه کد، به BasicTransition مراجعه کنید.

بین فعالیت‌ها متحرک‌سازی کنید

در اندروید ۵.۰ (سطح API ۲۱) و بالاتر، می‌توانید انیمیشن‌هایی ایجاد کنید که بین اکتیویتی‌های شما جابه‌جا می‌شوند. این بر اساس همان چارچوب جابه‌جایی است که در بخش قبلی توضیح داده شد، اما به شما امکان می‌دهد انیمیشن‌هایی را بین طرح‌بندی‌ها در اکتیویتی‌های جداگانه ایجاد کنید.

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

طبق معمول، شما startActivity() را فراخوانی می‌کنید، اما مجموعه‌ای از گزینه‌های ارائه شده توسط ActivityOptions.makeSceneTransitionAnimation() را به آن منتقل می‌کنید. این مجموعه گزینه‌ها ممکن است شامل نماهایی باشد که بین فعالیت‌ها به اشتراک گذاشته می‌شوند تا چارچوب انتقال بتواند آنها را در طول انیمیشن به هم متصل کند.

برای منابع بیشتر، رجوع کنید به: