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