إنشاء صورة متحركة انتقالية مخصصة

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

تجربة ميزة "الكتابة"

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

أضِف مواقع متعدّدة باستخدام انتقال في علامة التبويب "إنشاء" →

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

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

توضّح لك هذه الصفحة كيفية تسجيل قيم السمات وإنشاء صور متحركة لإنشاء عمليات انتقال مخصّصة.

تمديد فئة الانتقال

لإنشاء انتقال مخصّص، أضِف فئة إلى مشروعك تمدّد فئة Transition وتلغي الوظائف الموضّحة في المقتطف التالي:

class CustomTransition : Transition() {

    override fun captureStartValues(transitionValues: TransitionValues) {}

    override fun captureEndValues(transitionValues: TransitionValues) {}

    override fun createAnimator(
        sceneRoot: ViewGroup,
        startValues: TransitionValues?,
        endValues: TransitionValues?
    ): Animator? {}

}

public class CustomTransition extends Transition {

    @Override
    public void captureStartValues(TransitionValues values) {}

    @Override
    public void captureEndValues(TransitionValues values) {}

    @Override
    public Animator createAnimator(ViewGroup sceneRoot,
                                   TransitionValues startValues,
                                   TransitionValues endValues) {}
}

توضّح الأقسام التالية كيفية إلغاء هذه الدوالّ.

تسجيل قيم سمات العرض

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

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

تسجيل القيم الأولية

لتمرير قيم العرض الأوّلي إلى إطار العمل، نفِّذ الدالة captureStartValues(transitionValues). يستدعي إطار العمل هذه الدالة لكل عرض في المشهد الأوّلي. وسيطة الدالة هي عنصر TransitionValues يحتوي على إشارة إلى العرض ومثيل Map يمكنك فيه تخزين قيم العرض التي تريدها. في عملية التنفيذ، استرجع قيم السمات هذه وأعِدها إلى الإطار من خلال تخزينها في الخريطة.

لضمان عدم تعارض مفتاح قيمة السمة مع مفاتيح TransitionValues أخرى، استخدِم مخطّط التسمية التالي:

package_name:transition_name:property_name

يعرض المقتطف التالي عملية تنفيذ الدالة captureStartValues():

class CustomTransition : Transition() {

    // Define a key for storing a property value in
    // TransitionValues.values with the syntax
    // package_name:transition_class:property_name to avoid collisions
    private val PROPNAME_BACKGROUND = "com.example.android.customtransition:CustomTransition:background"

    override fun captureStartValues(transitionValues: TransitionValues) {
        // Call the convenience method captureValues
        captureValues(transitionValues)
    }

    // For the view in transitionValues.view, get the values you
    // want and put them in transitionValues.values
    private fun captureValues(transitionValues: TransitionValues) {
        // Get a reference to the view
        val view = transitionValues.view
        // Store its background property in the values map
        transitionValues.values[PROPNAME_BACKGROUND] = view.background
    }

    ...

}

public class CustomTransition extends Transition {

    // Define a key for storing a property value in
    // TransitionValues.values with the syntax
    // package_name:transition_class:property_name to avoid collisions
    private static final String PROPNAME_BACKGROUND =
            "com.example.android.customtransition:CustomTransition:background";

    @Override
    public void captureStartValues(TransitionValues transitionValues) {
        // Call the convenience method captureValues
        captureValues(transitionValues);
    }


    // For the view in transitionValues.view, get the values you
    // want and put them in transitionValues.values
    private void captureValues(TransitionValues transitionValues) {
        // Get a reference to the view
        View view = transitionValues.view;
        // Store its background property in the values map
        transitionValues.values.put(PROPNAME_BACKGROUND, view.getBackground());
    }
    ...
}

تسجيل القيم النهائية

يستدعي إطار العمل دالة captureEndValues(TransitionValues) مرة واحدة لكلّ مرّة ظهور مستهدَفة في المشهد الأخير. من جميع الجوانب الأخرى، يعمل captureEndValues() بالطريقة نفسها التي يعمل بها captureStartValues().

يعرض مقتطف الرمز البرمجي التالي تنفيذ الدالة captureEndValues():

override fun captureEndValues(transitionValues: TransitionValues) {
    captureValues(transitionValues)
}

@Override
public void captureEndValues(TransitionValues transitionValues) {
    captureValues(transitionValues);
}

في هذا المثال، تستدعي كلّ من الدالتَين captureStartValues() وcaptureEndValues() الدالة captureValues() لاسترداد القيم وتخزينها. سمة العرض التي يسترجعها captureValues() هي نفسها، ولكنّها لها قيم مختلفة في المشهدَين الأول والأخير. يحتفظ إطار العمل بخرائط منفصلة لحالَي البدء والانتهاء لطريقة العرض.

إنشاء مُشغِّل رسوم متحركة مخصّص

لإضافة رسوم متحركة للتغييرات في طريقة عرض بين حالتها في المشهد الأول وحالتها في المشهد الأخير، قدِّم عنصرًا متحركًا من خلال إلغاء الدالة createAnimator(). عندما يستدعي إطار العمل هذه الدالة، يتم تمرير العرض الجذر للمشهد وTransitionValues العناصر التي تحتوي على القيمتَين الافتتاحية والختامية التي تم التقاطها.

يعتمد عدد المرات التي يستدعي فيها إطار العمل الدالة createAnimator() على التغييرات التي تحدث بين المشهدَين الأول والأخير.

على سبيل المثال، يمكنك استخدام تأثير تمويه أو تلاشي مُطبَّق كانتقال مخصّص. إذا كان المشهد الأوّلي يتضمّن خمسة أهداف، تمّت إزالة هدفَين من المشهد الأخير، وكان المشهد الأخير يتضمّن الأهداف الثلاثة من المشهد الأوّلي بالإضافة إلى هدف جديد، سيستدعي إطار العمل createAnimator() ست مرّات. تُنشئ ثلاث من هذه المكالمات تأثيرًا متحركًا للاختفاء والتلاشي للأهداف التي تبقى في كل من المشهدين العنصرَين. تؤدي دعوتان إضافيتان إلى إضافة تأثيرات متحركة على تلاشي الاستهدافات التي تمت إزالتها من المشهد الأخير. تؤدي إحدى الطلبات إلى إضافة تأثير متحرك إلى التلاشي التدريجي للاستهداف الجديد في المشهد الأخير.

بالنسبة إلى مشاهد الاستهداف التي تظهر في كلّ من المشهدَين الأول والأخير، يقدّم إطار العمل عنصر TransitionValues لكلّ من وسيطَي startValues و endValues. بالنسبة إلى المشاهد المستهدَفة التي لا تظهر إلا في المشهد التمهيدي أو المشهد الختامي، يقدّم إطار العمل عنصرًا TransitionValues للمَعلمة المقابلة وnull للأخرى.

لتنفيذ الدالة createAnimator(ViewGroup, TransitionValues, TransitionValues) عند إنشاء انتقال مخصّص، استخدِم قيم سمة العرض التي سجّلتها لإنشاء عنصر Animator وإعادته إلى الإطار. للحصول على مثال على التنفيذ، اطّلِع على فئة ChangeColor في نموذج CustomTransition. لمزيد من المعلومات عن مُشغّلات الرسوم المتحركة للموقع، اطّلِع على مقالة الرسوم المتحركة للموقع.

تطبيق انتقال مخصّص

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