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

تجربة طريقة Compose

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

إضافة سمات متعدّدة مع تأثير انتقال في Compose ←

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

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

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

توسيع فئة Transition

لإنشاء تأثير انتقال مخصّص، أضِف فئة إلى مشروعك توسّع فئة 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. لمزيد من المعلومات عن الصور المتحركة للسمات، راجِع مقالة الصور المتحركة للسمات.

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

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