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

تجربة طريقة "الكتابة"

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

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

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

إحدى الطرق التي يتيح لك 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 للرسومات البيانية الأساسية الثلاثة في مواصفات التصميم المتعدد الأبعاد:

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

استخدام PathInterpolator

فئة PathInterpolator هي أداة ربط تم تقديمها في Android 5.0 (المستوى 21 من واجهة برمجة التطبيقات). ويستند إلى منحنى بيزير أو كائن Path. تستخدم أمثلة Android في مستندات التصميم المتعدد الأبعاد الخاصة بتغيير السرعة PathInterpolator.

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

على سبيل المثال، لا يلزم سوى إحداثيات 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();