الصور المتحركة لمربّعات

يمكنك إضافة تأثيرات متحركة إلى مربّعاتك بعدّة طرق مختلفة، بما في ذلك ما يلي:

• الانتقالات السريعة باستخدام الرسوم المتحركة المتداخلة
• تمويه سلس وانزلاق للرسومات المتحركة داخل مربّع وخارجه

عرض انتقال تمويهي

لعرض انتقال سلس من قيمة إلى أخرى، يمكنك تفعيل مؤثرات التحوّل لعنصر معيّن، كما هو موضّح في مقتطف الرمز التالي:

private var startValue = 15f
private var endValue = 105f
private val animationDurationInMillis = 2000L // 2 seconds

override fun onTileRequest(requestParams: RequestBuilders.TileRequest): ListenableFuture<Tile> {
    val circularProgressIndicator =
        CircularProgressIndicator.Builder()
            .setProgress(
                FloatProp.Builder(/* static value */ 0.25f)
                    .setDynamicValue(
                        // Or you can use some other dynamic object, for example
                        // from the platform and then at the end of expression
                        // add animate().
                        DynamicFloat.animate(
                            startValue,
                            endValue,
                            AnimationSpec.Builder()
                                .setAnimationParameters(
                                    AnimationParameters.Builder()
                                        .setDurationMillis(animationDurationInMillis)
                                        .build()
                                )
                                .build(),
                        )
                    )
                    .build()
            )
            .build()

    return Futures.immediateFuture(
        Tile.Builder()
            .setResourcesVersion(RESOURCES_VERSION)
            .setTileTimeline(Timeline.fromLayoutElement(circularProgressIndicator))
            .build()
    )
}
Animations.kt

ضبط اتجاه القوس

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

public override fun onTileRequest(
    requestParams: RequestBuilders.TileRequest
): ListenableFuture<Tile> {
    return Futures.immediateFuture(
        Tile.Builder()
            .setResourcesVersion(RESOURCES_VERSION)
            .setTileTimeline(
                Timeline.fromLayoutElement(
                    EdgeContentLayout.Builder(deviceParameters)
                        .setResponsiveContentInsetEnabled(true)
                        .setEdgeContent(
                            Arc.Builder()
                                // Arc should always grow clockwise.
                                .setArcDirection(LayoutElementBuilders.ARC_DIRECTION_CLOCKWISE)
                                .addContent(
                                    ArcLine.Builder()
                                        // Set color, length, thickness, and more.
                                        // Arc should always grow clockwise.
                                        .setArcDirection(
                                            LayoutElementBuilders.ARC_DIRECTION_CLOCKWISE
                                        )
                                        .build()
                                )
                                .build()
                        )
                        .build()
                )
            )
            .build()
    )
}
Animations.kt

عرض تمويه أو انتقال سلس

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

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

الانتقالات باستخدام تأثير التلاشي

يوضّح مقتطف الرمز البرمجي التالي كيفية تنفيذ انتقالات التمويه والتلاشي باستخدام الطرق المساعِدة من DefaultContentTransitions. لتحديد كائنَي FadeInTransition وFadeOutTransition المخصّصَين، استخدِم setFadeIn() وsetFadeOut()، على التوالي، في طرق ضبط الانتقال.

public override fun onTileRequest(
    requestParams: RequestBuilders.TileRequest
): ListenableFuture<Tile> {
    // Assumes that you've defined a custom helper method called
    // getTileTextToShow().
    val tileText = getTileTextToShow()
    return Futures.immediateFuture(
        Tile.Builder()
            .setResourcesVersion(RESOURCES_VERSION)
            .setTileTimeline(
                Timeline.fromLayoutElement(
                    Text.Builder(this, tileText)
                        .setModifiers(
                            Modifiers.Builder()
                                .setContentUpdateAnimation(
                                    AnimatedVisibility.Builder()
                                        .setEnterTransition(DefaultContentTransitions.fadeIn())
                                        .setExitTransition(DefaultContentTransitions.fadeOut())
                                        .build()
                                )
                                .build()
                        )
                        .build()
                )
            )
            .build()
    )
}
Animations.kt

تأثيرات انتقال الشرائح

يوضّح مقتطف الرمز البرمجي الآخر كيفية تنفيذ التحولات للانزلاق إلى الداخل والخارج باستخدام طرق المساعدة من DefaultContentTransitions. يمكنك أيضًا تحديد عناصر SlideInTransition وSlideOutTransition مخصّصة من خلال استدعاء setSlideIn() وsetSlideOut()، على التوالي، في methods لإعداد الانتقال.

public override fun onTileRequest(
    requestParams: RequestBuilders.TileRequest
): ListenableFuture<Tile> {
    // Assumes that you've defined a custom helper method called
    // getTileTextToShow().
    val tileText = getTileTextToShow()
    return Futures.immediateFuture(
        Tile.Builder()
            .setResourcesVersion(RESOURCES_VERSION)
            .setTileTimeline(
                Timeline.fromLayoutElement(
                    Text.Builder(this, tileText)
                        .setModifiers(
                            Modifiers.Builder()
                                .setContentUpdateAnimation(
                                    AnimatedVisibility.Builder()
                                        .setEnterTransition(
                                            DefaultContentTransitions.slideIn(
                                                ModifiersBuilders.SLIDE_DIRECTION_LEFT_TO_RIGHT
                                            )
                                        )
                                        .setExitTransition(
                                            DefaultContentTransitions.slideOut(
                                                ModifiersBuilders.SLIDE_DIRECTION_LEFT_TO_RIGHT
                                            )
                                        )
                                        .build()
                                )
                                .build()
                        )
                        .build()
                )
            )
            .build()
    )
}
Animations.kt

عرض عملية تحويل

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

تقبل العديد من قيم النقطة العائمة المرتبطة بالتحويلات التعبيرات الديناميكية، ما يتيح لك إضافة تأثيرات متحركة إلى هذه التحويلات.

الدوران

لإجراء دوران باتجاه عقارب الساعة حول نقطة محورية قابلة للتخصيص، استخدِم رمزًابرمجيًا مشابهًا لما يلي:

return Futures.immediateFuture(
    Tile.Builder()
        .setResourcesVersion(RESOURCES_VERSION)
        .setTileTimeline(
            Timeline.fromLayoutElement(
                Text.Builder(this, someTileText)
                    .setModifiers(
                        Modifiers.Builder()
                            .setTransformation(
                                ModifiersBuilders.Transformation.Builder()
                                    // Set the pivot point 50 dp from the left edge
                                    // and 100 dp from the top edge of the screen.
                                    .setPivotX(dp(50f))
                                    .setPivotY(dp(100f))
                                    // Rotate the element 45 degrees clockwise.
                                    .setRotation(degrees(45f))
                                    .build()
                            )
                            .build()
                    )
                    .build()
            )
        )
        .build()
)
Animations.kt

التوسّع

لتكبير عنصر أو تصغيره باستخدام عوامل القياس الأفقي والعمودي، استخدِم رمزًا مشابهًا لما يلي:

return Futures.immediateFuture(
    Tile.Builder()
        .setResourcesVersion(RESOURCES_VERSION)
        .setTileTimeline(
            Timeline.fromLayoutElement(
                Text.Builder(this, someTileText)
                    .setModifiers(
                        Modifiers.Builder()
                            .setTransformation(
                                ModifiersBuilders.Transformation.Builder()
                                    // Set the pivot point 50 dp from the left edge
                                    // and 100 dp from the top edge of the screen.
                                    .setPivotX(dp(50f))
                                    .setPivotY(dp(100f))
                                    // Shrink the element by a scale factor
                                    // of 0.5 horizontally and 0.75 vertically.
                                    .setScaleX(FloatProp.Builder(0.5f).build())
                                    .setScaleY(
                                        FloatProp.Builder(0.75f).build()
                                    )
                                    .build()
                            )
                            .build()
                    )
                    .build()
            )
        )
        .build()
)
Animations.kt

الترجمة الهندسية

لنقل عنصر بعدد معيّن من وحدات البكسل ذات الكثافة (dp) على الشاشة أفقيًا أو عموديًا، استخدِم رمزًا مشابهًا لما يلي:

return Futures.immediateFuture(
    Tile.Builder()
        .setResourcesVersion(RESOURCES_VERSION)
        .setTileTimeline(
            Timeline.fromLayoutElement(
                Text.Builder(this, someTileText)
                    .setModifiers(
                        Modifiers.Builder()
                            .setTransformation(
                                ModifiersBuilders.Transformation.Builder()
                                    // Translate (move) the element 60 dp to the right
                                    // and 80 dp down.
                                    .setTranslationX(dp(60f))
                                    .setTranslationY(dp(80f))
                                    .build()
                            )
                            .build()
                    )
                    .build()
            )
        )
        .build()
)
Animations.kt

لا تعرض معلومات مهمة في منتصف صورة متحركة.

هناك عدة حالات يتم فيها إيقاف الصور المتحركة:

• قد يؤدي عرض مربّعات المعلومات في النظام إلى إيقاف الصور المتحركة لجميع مربّعات المعلومات.
• يمكن أن تعرض المربّعة 4 عناصر متحركة فقط في المرة الواحدة. إذا حاولت إضافة حركة إلى أكثر من 4 عناصر في الوقت نفسه، لن تظهر حركة في كل العناصر.

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