تخصيص نقل العنصر المشترَك

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

مواصفات الصور المتحركة

لتغيير مواصفات الصور المتحركة المستخدَمة لحركة الحجم والموضع، يمكنك تحديد مَعلمة boundsTransform مختلفة في Modifier.sharedElement(). يقدّم ذلك موضع Rect الأوّلي وموضع Rect المستهدَف.

على سبيل المثال، لجعل النص في المثال السابق يتحرك بحركة قوس ، حدِّد المَعلمة boundsTransform لاستخدام مواصفات keyframes:

val textBoundsTransform = BoundsTransform { initialBounds, targetBounds ->
    keyframes {
        durationMillis = boundsAnimationDurationMillis
        initialBounds at 0 using ArcMode.ArcBelow using FastOutSlowInEasing
        targetBounds at boundsAnimationDurationMillis
    }
}
Text(
    "Cupcake", fontSize = 28.sp,
    modifier = Modifier.sharedBounds(
        rememberSharedContentState(key = "title"),
        animatedVisibilityScope = animatedVisibilityScope,
        boundsTransform = textBoundsTransform
    )
)
CustomizeSharedElementsSnippets.kt

يمكنك استخدام أي AnimationSpec. يستخدم هذا المثال مواصفات keyframes.

وضع تغيير الحجم

عند إنشاء تأثيرات متحركة بين حدود مشترَكة، يمكنك ضبط المَعلمة resizeMode على RemeasureToBounds أو ScaleToBounds. تحدِّد هذه المَعلمة كيفية انتقال العنصر المشترَك بين الحالتَين. أولاً، يقيس ScaleToBounds تنسيق العنصر الثانوي باستخدام قيود النظرة إلى المستقبل (أو الاستهداف). بعد ذلك، يتم تكبير تخطيط العنصر الفرعي الثابت ليلائم الحدود المشتركة. يمكن اعتبار ScaleToBounds "مقياسًا بيانيًا" بين الولايات.

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

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

يمكن ملاحظة الفرق بين وضعَي تغيير الحجم في الأمثلة التالية:

التخطّي إلى التنسيق النهائي

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

يوضّح المثال التالي نص الوصف "Lorem Ipsum" وهو يدخل الشاشة بطريقتَين مختلفتَين. في المثال الأول، تتم إعادة تدفق النص عند دخوله مع زيادة حجم الحاوية. في المثال الثاني، لا تتم مجددًا تدفق النص عند زيادة حجمه. تؤدي إضافة Modifier.skipToLookaheadSize() إلى منع إعادة التدفق مع زيادة حجم المحتوى.

المقاطع والعناصر التي تظهر فوق المحتوى

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

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

لقص عنصر مشترَك إلى شكل، استخدِم الدالة العادية Modifier.clip(). ضعه بعد sharedElement():

Image(
    painter = painterResource(id = R.drawable.cupcake),
    contentDescription = "Cupcake",
    modifier = Modifier
        .size(100.dp)
        .sharedElement(
            rememberSharedContentState(key = "image"),
            animatedVisibilityScope = this@AnimatedContent
        )
        .clip(RoundedCornerShape(16.dp)),
    contentScale = ContentScale.Crop
)
CustomizeSharedElementsSnippets.kt

إذا كنت بحاجة إلى التأكّد من عدم عرض عنصر مشترَك خارج حاوية والد، يمكنك ضبط clipInOverlayDuringTransition على sharedElement(). بشكلٍ default، بالنسبة إلى الحدود المشترَكة المُدمَجة، يستخدم clipInOverlayDuringTransition مسار القطع من العنصر الرئيسي sharedBounds().

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

على سبيل المثال، في Jetsnack، يجب وضع الرمز BottomAppBar فوق العنصر المشترَك إلى أن تصبح الشاشة غير مرئية. تحافظ إضافة المُعدِّل إلى العنصر المُركّب على تميّزه.

قد تحتاج إلى أن يظهر تأثير متحرك للعنصر غير المشترَك عند إزالته، كما يمكنك أن تجعله يبقى على سطح العناصر الأخرى قبل عملية النقل. في هذه الحالات، استخدِم renderInSharedTransitionScopeOverlay().animateEnterExit() لإضافة تأثير متحرك إلى العنصر القابل للتجميع أثناء تشغيل انتقال العنصر المشترَك:

JetsnackBottomBar(
    modifier = Modifier
        .renderInSharedTransitionScopeOverlay(
            zIndexInOverlay = 1f,
        )
        .animateEnterExit(
            enter = fadeIn() + slideInVertically {
                it
            },
            exit = fadeOut() + slideOutVertically {
                it
            }
        )
)
CustomizeSharedElementsSnippets.kt

في الحالات النادرة التي تريد فيها عدم عرض العنصر المشترَك في صورة مركبة، يمكنك ضبط renderInOverlayDuringTransition على sharedElement() على false.

إشعار التنسيقات الشقيقة بالتغييرات في حجم العنصر المشترَك

لا يُرسِل sharedBounds() وsharedElement() تلقائيًا إشعارًا إلى الحاوية الأساسية بأي تغييرات في الحجم أثناء انتقال التنسيق.

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