یک نما را با انیمیشن جابجا کنید

روش نوشتن را امتحان کنید

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

متحرک سازی موقعیت →

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

یکی از راه‌هایی که اندروید به شما امکان می‌دهد اشیاء نمای خود را روی صفحه تغییر موقعیت دهید، استفاده از ObjectAnimator است. شما موقعیت پایانی مورد نظر برای قرارگیری شیء و همچنین مدت زمان انیمیشن را مشخص می‌کنید. همچنین می‌توانید از میان‌یاب‌های زمانی برای کنترل شتاب یا کاهش شتاب انیمیشن استفاده کنید.

تغییر موقعیت نما با استفاده از ObjectAnimator

API ObjectAnimator راهی برای تغییر ویژگی‌های یک نما با مدت زمان مشخص ارائه می‌دهد. این API شامل متدهای استاتیک برای ایجاد نمونه‌هایی از ObjectAnimator بسته به نوع ویژگی‌ای است که شما در حال متحرک‌سازی آن هستید. هنگام تغییر موقعیت نماهای خود روی صفحه، از ویژگی‌های translationX و translationY استفاده کنید.

در اینجا مثالی از یک ObjectAnimator آورده شده است که نما را در عرض ۲ ثانیه به موقعیتی ۱۰۰ پیکسل از سمت چپ صفحه نمایش منتقل می‌کند:

کاتلین

ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    duration = 2000
    start()
}

جاوا

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setDuration(2000);
animation.start();

این مثال از متد ObjectAnimator.ofFloat() استفاده می‌کند، زیرا مقادیر ترجمه باید اعشاری باشند. پارامتر اول، نمایی است که می‌خواهید متحرک‌سازی کنید. پارامتر دوم، ویژگی‌ای است که می‌خواهید متحرک‌سازی کنید. از آنجایی که نما باید به صورت افقی حرکت کند، از ویژگی translationX استفاده می‌شود. پارامتر آخر، مقدار پایانی انیمیشن است. در این مثال، مقدار ۱۰۰ نشان دهنده موقعیتی است که پیکسل‌های زیادی از سمت چپ صفحه نمایش فاصله دارد.

متد بعدی مدت زمان اجرای انیمیشن را بر حسب میلی ثانیه مشخص می‌کند. در این مثال، انیمیشن به مدت ۲ ثانیه (۲۰۰۰ میلی ثانیه) اجرا می‌شود.

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

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

حرکت منحنی را اضافه کنید

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

مسیر خودتان را مشخص کنید

کلاس ObjectAnimator دارای سازنده‌هایی است که به شما امکان می‌دهند مختصات را با استفاده از دو یا چند ویژگی به طور همزمان به همراه یک مسیر، متحرک‌سازی کنید. برای مثال، انیماتور زیر از یک شیء Path برای متحرک‌سازی ویژگی‌های X و Y یک نما استفاده می‌کند:

کاتلین

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    val path = Path().apply {
        arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true)
    }
    val animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path).apply {
        duration = 2000
        start()
    }
} else {
    // Create animator without using curved path
}

جاوا

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  Path path = new Path();
  path.arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true);
  ObjectAnimator animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
  animator.setDuration(2000);
  animator.start();
} else {
  // Create animator without using curved path
}

انیمیشن قوس به این شکل است:

شکل ۱. یک انیمیشن مسیر منحنی.

یک Interpolator پیاده‌سازی یک منحنی کاهشی (easing curve) است. برای اطلاعات بیشتر در مورد مفهوم منحنی‌های کاهشی ، به مستندات طراحی متریال (Material Design) مراجعه کنید. یک Interpolator نحوه محاسبه مقادیر خاص در یک انیمیشن را به عنوان تابعی از زمان تعریف می‌کند. این سیستم منابع XML را برای سه منحنی اساسی در مشخصات طراحی متریال ارائه می‌دهد:

• @interpolator/fast_out_linear_in.xml
• @interpolator/fast_out_slow_in.xml
• @interpolator/linear_out_slow_in.xml

استفاده از PathInterpolator

کلاس PathInterpolator یک میان‌یاب معرفی شده در اندروید ۵.۰ (API 21) است. این کلاس بر اساس یک منحنی Bézier یا یک شیء Path عمل می‌کند. مثال‌های اندروید در مستندات طراحی متریال برای سهولت استفاده PathInterpolator .

PathInterpolator دارای سازنده‌هایی بر اساس انواع مختلف منحنی‌های بزیه است. تمام منحنی‌های بزیه دارای نقاط شروع و پایان ثابت در (0,0) و (1,1) هستند. سایر آرگومان‌های سازنده به نوع منحنی بزیه که ایجاد می‌شود بستگی دارد.

برای مثال، برای یک منحنی بزیه درجه دوم، فقط مختصات X و Y یک نقطه کنترل مورد نیاز است:

کاتلین

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    PathInterpolator(0.67f, 0.33f)
} else {
    LinearInterpolator()
}

جاوا

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  myInterpolator = new PathInterpolator(0.67f, 0.33f);
} else {
  myInterpolator = new LinearInterpolator();
}

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

سازنده‌ی مکعبی Bézier نیز به طور مشابه نقاط شروع و پایان ثابتی دارد، اما به دو نقطه کنترل نیاز دارد:

کاتلین

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f)
} else {
    LinearInterpolator()
}

جاوا

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  myInterpolator = new PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f);
} else {
  myInterpolator = new LinearInterpolator();
}

این یک پیاده‌سازی از منحنی کاهش سرعت با تأکید بر طراحی متریال است.

برای کنترل بیشتر، می‌توان از یک Path دلخواه برای تعریف منحنی استفاده کرد:

کاتلین

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  val path = Path().apply {
    moveTo(0.0f, 0.0f)
    cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f)
  }
  PathInterpolator(path)
} else {
  LinearInterpolator()
}

جاوا

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  Path path = new Path();
  path.moveTo(0.0f, 0.0f);
  path.cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f);
  myInterpolator = new PathInterpolator(path);
} else {
  myInterpolator = new LinearInterpolator();
}

این همان منحنی کاهشیِ مثالِ مکعبیِ بِزیه را تولید می‌کند، اما به جای آن از یک Path استفاده می‌کند.

همچنین می‌توانید یک میان‌یاب مسیر را به عنوان یک منبع XML تعریف کنید:

<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:controlX1="0.5"
    android:controlY1="0.7"
    android:controlX2="0.1f"
    android:controlY2="1.0f"/>

زمانی که یک شیء PathInterpolator ایجاد می‌کنید، می‌توانید آن را به متد Animator.setInterpolator() منتقل کنید. Animator از میان‌یاب برای تعیین زمان‌بندی یا منحنی مسیر هنگام شروع به کار استفاده می‌کند.

کاتلین

val animation = ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    interpolator = myInterpolator
    start()
}

جاوا

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setInterpolator(myInterpolator);
animation.start();