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

تجربة ميزة "الكتابة"

‫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، اطّلِع على مقالة التحريك باستخدام 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();
}

يؤدي ذلك إلى إنشاء منحنى تمويه يبدأ بسرعة ويبطئ مع اقترابه من النهاية.

تحتوي الدالة الإنشائية المكعبة "بيزيه" على نحو مماثل على نقطتي بداية ونهاية ثابتة، ولكنها تتطلب نقطتين تحكم:

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

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

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