نقل طريقة عرض باستخدام الصور المتحركة

تجربة طريقة ComposeAllowed

Jetpack Compose هي مجموعة أدوات واجهة المستخدم التي ننصح بها لنظام التشغيل Android. تعرَّف على كيفية استخدام الصور المتحركة في ميزة "الكتابة".

تحريك الموضع →

غالبًا ما تحتاج العناصر الموجودة على الشاشة إلى تغيير موضعها بسبب تفاعل المستخدم أو معالجتها وراء الكواليس. بدلاً من تعديل موضع الجسم على الفور، ما يؤدي إلى وميضه من منطقة إلى أخرى، استخدِم صورة متحركة لتحريكه من الموضع الأوّلي إلى الموضع النهائي.

من بين الطرق التي يتيح لك Android من خلالها تغيير موضع عناصر العرض على الشاشة استخدام ObjectAnimator. يمكنك تحديد موضع النهاية الذي تريد أن يستقر فيه الكائن، بالإضافة إلى مدة الحركة. يمكنك أيضًا استخدام أدوات فهم الوقت للتحكم في تسريع أو تباطؤ الرسوم المتحركة.

تغيير موضع العرض باستخدام ObjectAnimator

توفّر واجهة برمجة التطبيقات ObjectAnimator طريقة لتغيير خصائص الملف الشخصي خلال مدة محدّدة. يحتوي على طرق ثابتة لإنشاء نُسخ من ObjectAnimator استنادًا إلى نوع السمة التي تنشئ لها مؤثرًا متحركًا. عند إعادة وضع طرق العرض على الشاشة، استخدِم السمتَين translationX وtranslationY.

إليك مثال على ObjectAnimator الذي ينقل العرض إلى موضع 100 بكسل من يسار الشاشة خلال ثانيتين:

Kotlin

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

Java

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

يستخدم هذا المثال الطريقة ObjectAnimator.ofFloat()، لأنّ قيم الترجمة يجب أن تكون أعدادًا عشرية. المعلمة الأولى هي العرض الذي تريد تحريكه. المعلمة الثانية هي السمة التي تريد تحريكها. بما أنّ طريقة العرض تحتاج إلى التحرك أفقيًا، يتم استخدام السمة translationX . المَعلمة الأخيرة هي قيمة نهاية الصورة المتحركة. في هذا المثال، تشير القيمة 100 إلى موضع يبعد هذا العدد من البكسل عن يمين الشاشة.

تحدد الطريقة التالية المدة التي تستغرقها الحركة بالمللي ثانية. في هذا المثال، يتم تشغيل الصورة المتحركة لمدة ثانيتَين (2000 ملي ثانية).

تؤدي الطريقة الأخيرة إلى تشغيل الرسم المتحرك، ما يؤدي إلى تعديل موضع العرض على الشاشة.

لمزيد من المعلومات حول استخدام ObjectAnimator، يرجى الاطّلاع على Animate باستخدام ObjectAnimator.

إضافة حركة منحنية

على الرغم من أنّ استخدام الرمز ObjectAnimator ملائم، إلا أنّه يعيد تلقائيًا وضع العرض على طول خط مستقيم بين نقطتَي البداية والنهاية. يعتمد أسلوب Material Design على الخطوط المنحنية للحركة المكانية للعناصر على الشاشة وتحديد توقيت الرسم المتحرك. يمنح استخدام الصور المتحركة المنحنية تطبيقك مظهرًا أكثر حداثة ويجعل الصور المتحركة أكثر إثارة للاهتمام.

تحديد مسارك الخاص

تحتوي فئة ObjectAnimator على وظائف تنشئ عناصر تتيح لك إضافة تأثيرات متحركة إلى التنسيقات باستخدام سمتَين أو أكثر في الوقت نفسه مع مسار. على سبيل المثال، تستخدم أداة إنشاء الصور المتحركة التالية كائن Path لتحريك السمتَين X وY لملف شخصي:

Kotlin

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
}

Java

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 للمنحنيات الأساسية الثلاثة في مواصفات Material Design:

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

استخدام PathInterpolator

الفئة PathInterpolator هي أداة تعديل تم إطلاقها في الإصدار Android 5.0 (واجهة برمجة التطبيقات 21). يستند إلى منحنى Bézier أو كائن Path. تستخدم أمثلة Android في مستندات Material Design المتعلّقة بتأثيرات التلاشي PathInterpolator.

تحتوي PathInterpolator على منشئين يستندان إلى أنواع مختلفة من منحنيات Bézier. تتضمّن جميع منحنيات Bézier نقطتَي بداية ونهاية ثابتتَين عند (0,0) و(1,1) على التوالي. تعتمد مَعلمات المُنشئ الأخرى على نوع منحنى Bézier الذي يتم إنشاؤه.

على سبيل المثال، بالنسبة لمنحنى بيزيه التربيعي، يلزم فقط الإحداثيتين X وY لنقطة تحكم واحدة:

Kotlin

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

Java

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 الثلاثي على نقطتَي بداية ونهاية ثابتتَين، ولكنه يتطلّب نقطتَي تحكّم:

Kotlin

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

Java

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 عشوائي لتحديد المنحنى:

Kotlin

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

Java

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 أداة الاستيفاء لتحديد التوقيت أو منحنى المسار عند بدء تشغيله.

Kotlin

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

Java

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