انتقال «نما» با پویانمایی

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

Jetpack Compose جعبه‌ابزار واسط کاربر توصیه‌شده برای Android است. با نحوه استفاده از «پویانمایی‌ها» در Compose آشنا شوید.

پویانمایی کردن موقعیت →

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

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

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

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 استفاده می‌شود. پارامتر آخر مقدار پایانی پویانمایی است. در این مثال، مقدار ۱۰۰ نشان‌دهنده موقعیتی است که این تعداد پیکسل از سمت چپ صفحه فاصله دارد.

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

The last method causes the animation to run, which updates the view's position on screen.

برای اطلاعات بیشتر درباره استفاده از 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 پیاده‌سازی منحنی هموارسازی است. برای اطلاعات بیشتر درباره مفهوم منحنی‌های هموارسازی، مستندات طراحی مواد را ببینید. Interpolator تعریف می‌کند که چگونه مقادیر خاص در پویانمایی به‌عنوان تابعی از زمان محاسبه می‌شوند. سیستم منابع XML را برای سه منحنی اصلی در مشخصات طراحی مواد ارائه می‌دهد:

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

استفاده از PathInterpolator

کلاس PathInterpolator یک درون‌یاب است که در Android 5.0 (میانای برنامه‌سازی کاربردی ۲۱) معرفی شده است. این براساس منحنی بزیه یا Path شیء است. نمونه‌های Android در سند طراحی مواد برای آسان‌سازی از 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();
}

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

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

کاتلین

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();
}

این پیاده‌سازی منحنی هموارسازی کاهش سرعت تأکیدشده در Material Design است.

برای کنترل بیشتر، می‌توان از 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();