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

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

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

موقعیت نمایش را با ObjectAnimator تغییر دهید

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

در اینجا نمونه ای از ObjectAnimator است که نمای را در عرض 2 ثانیه به موقعیتی 100 پیکسلی از سمت چپ صفحه منتقل می کند:

کاتلین

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

جاوا

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

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

روش بعدی مشخص می کند که انیمیشن چقدر طول می کشد، در میلی ثانیه. در این مثال، انیمیشن به مدت 2 ثانیه (2000 میلی ثانیه) اجرا می شود.

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

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

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

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

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

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

کاتلین

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
}

در اینجا انیمیشن قوس به نظر می رسد:

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

Interpolator اجرای یک منحنی کاهش است. برای اطلاعات بیشتر در مورد مفهوم کاهش منحنی ها به مستندات طراحی مواد مراجعه کنید. Interpolator نحوه محاسبه مقادیر خاص در یک انیمیشن را به عنوان تابعی از زمان تعریف می کند. این سیستم منابع XML را برای سه منحنی اصلی در مشخصات طراحی مواد فراهم می کند:

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

از PathInterpolator استفاده کنید

کلاس PathInterpolator یک درون یابی است که در اندروید 5.0 (API 21) معرفی شده است. این بر اساس یک منحنی بزیه یا یک شی Path است. مثال‌های اندروید در مستندات طراحی مواد برای سهولت از PathInterpolator استفاده می‌کنند.

PathInterpolator سازنده هایی بر اساس انواع مختلف منحنی های Bézier دارد. تمام منحنی های Bézier دارای نقاط شروع و پایان هستند که به ترتیب در (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();
}

این منحنی آسان‌سازی مشابه نمونه مکعبی Bézier را ایجاد می‌کند، اما در عوض از یک 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();