غالبًا ما تحتاج الأشياء الموجودة على الشاشة إلى إعادة ضبط موضعها بسبب تفاعل المستخدم أو معالجة ما وراء الكواليس. وبدلاً من تحديث واجهة برمجة تطبيقات الكائن فورًا مما يؤدي إلى وميض من منطقة إلى أخرى، واستخدام الرسوم المتحركة ونقله من موضع البداية إلى موضع النهاية.
من الطرق التي يتيح لك 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
" ملائم، فإنّه يؤدي تلقائيًا إلى تغيير موضع
العرض على طول خط مستقيم بين نقطتي البداية والنهاية. المادة الأساسية
يعتمد تصميمه على منحنيات للحركة المكانية للأجسام على الشاشة
توقيت الرسوم المتحركة. إنّ استخدام الحركة المنحنية يمنح تطبيقك طابعًا ماديًا أكثر.
مع جعل الرسوم المتحركة أكثر تشويقًا.
تحديد مسارك الخاص
تضم فئة 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
class هو أداة تعديل تم تقديمه في الإصدار Android 5.0 (واجهة برمجة التطبيقات 21). وهي تستند إلى
منحنى بيزي أو a
كائن Path
. تتضمن أمثلة Android في وثائق التصميم المتعدد الأبعاد
التخفيف
استخدام PathInterpolator
.
تتضمن الدالة PathInterpolator
دالة إنشاء تستند إلى أنواع مختلفة من منحنيات بيزيه.
تحتوي جميع منحنيات بيزيه على نقاط بداية ونهاية ثابتة عند (0,0)
و(1,1)
،
على التوالي. تعتمد وسيطات الدالة الإنشائية الأخرى على نوع Bézier.
إنشاء المنحنى.
فعلى سبيل المثال، بالنسبة لمنحنى بيزيه التربيعي إحداثيي س وص هناك حاجة إلى نقطة تحكم واحدة:
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(); }
وينتج نفس منحنى الإرخاء مثل مثال بيزيه المكعّب، ولكنه يستخدم
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();