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

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

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

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

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

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

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

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

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

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

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

لمزيد من المعلومات حول استخدام 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
}

إليك الشكل الذي تظهر به الرسوم المتحركة للقوس:

الشكل 1. صورة متحركة لمسار منحنٍ.

علامة Interpolator هي تنفيذ منحنى التخفيف. راجِع مستندات التصميم المتعدد الأبعاد للحصول على مزيد من المعلومات حول مفهوم منحنيات التخفيف. تحدد Interpolator كيفية حساب القيم المحددة في الرسوم المتحركة كدالة للوقت. يوفر النظام موارد XML للمنحنيات الأساسية الثلاثة في مواصفات Material Design:

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

استخدام PathIntersolator

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

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

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

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