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

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

من الطرق التي يتيح لك 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

استخدام PathInterpolator

تشير رسالة الأشكال البيانية PathInterpolator class هو أداة تعديل تم تقديمه في الإصدار Android 5.0 (واجهة برمجة التطبيقات 21). وهي تستند إلى منحنى بيزي أو a كائن 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();
}

وينتج عن ذلك منحنى إرخاء يبدأ بسرعة ويتسارع أثناء يقترب من النهاية.

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

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

وينتج نفس منحنى الإرخاء مثل مثال بيزيه المكعّب، ولكنه يستخدم 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();