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

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

• مسح الانتقالات باستخدام الصور المتحركة للمراهقين.
• تظهر الصور المتحركة بتلاشي وتمرير متحركة داخل المربع وخارجه.

إظهار انتقال التمرير

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

Kotlin

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

override fun onTileRequest(requestParams: TileRequest) =
    Futures.immediateFuture(
        // Add timeline and layout containers. CircularProgressIndicator is an
        // inner element of those containers.
        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()
        // Finish building all elements that contain CircularProgressIndicator.
    )

Java

private float defaultValue = 0f;
private float startValue = 15f;
private float endValue = 105f;
private float animationDurationInMillis = 2000f; // 2 seconds

@Override
protected ListenableFuture<Tile> onTileRequest(
       @NonNull TileRequest requestParams
) {
    return Futures.immediateFuture(
        // Add timeline and layout containers. CircularProgressIndicator is an
        // inner element of those containers.
        new CircularProgressIndicator.Builder()
            .setProgress(
                new 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,
                            new AnimationSpec.Builder()
                                .setAnimationParameters(
                                    new AnimationParameters.Builder()
                                        .setDurationMillis(animationDurationInMillis)
                                        .build()
                                ).build()
                        )
                    ).build()
            ).build()
        // Finish building all elements that contain CircularProgressIndicator.
    );
}

إظهار تلاشٍ أو تمرير متجانس

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

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

تلاشي الانتقالات

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

Kotlin

@OptIn(ProtoLayoutExperimental::class)
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(
                    ModifiersBuilders.Modifiers.Builder()
                        .setContentUpdateAnimation(AnimatedVisibility.Builder()
                            .setEnterTransition(
                                    DefaultContentTransitions.fadeIn())
                            .setExitTransition(
                                    DefaultContentTransitions.fadeOut()
                            ).build())
                ).build())
        ).build()
    )
}

Java

@OptIn(markerClass = ProtoLayoutExperimental.class)
@NonNull
@Override
protected ListenableFuture<Tile> onTileRequest(
        @NonNull RequestBuilders.TileRequest requestParams
) {
    // Assumes that you've defined a custom helper method called
    // getTileTextToShow().
    String tileText = getTileTextToShow();

    return Futures.immediateFuture(new Tile.Builder()
        .setResourcesVersion(RESOURCES_VERSION)
        .setTileTimeline(Timeline.fromLayoutElement(
            new Text.Builder(this, tileText)
                .setModifiers(
                    new ModifiersBuilders.Modifiers.Builder()
                        .setContentUpdateAnimation(new AnimatedVisibility.Builder()
                            .setEnterTransition(
                                    DefaultContentTransitions.fadeIn())
                            .setExitTransition(
                                    DefaultContentTransitions.fadeOut())
                            .build())
                .build()))
        .build()
    );
}

الانتقالات بين الشرائح

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

Kotlin

@OptIn(ProtoLayoutExperimental::class)
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(
                                    SLIDE_DIRECTION_LEFT_TO_RIGHT)
                            ).setExitTransition(
                                DefaultContentTransitions.slideOut(
                                    SLIDE_DIRECTION_LEFT_TO_RIGHT)
                            ).build()
                        ).build()
                ).build()
        )).build()
    )
}

Java

@OptIn(markerClass = ProtoLayoutExperimental.class)
@NonNull
@Override
protected ListenableFuture<Tile> onTileRequest(
        @NonNull RequestBuilders.TileRequest requestParams
) {
    // Assumes that you've defined a custom helper method called
    // getTileTextToShow().
    String tileText = getTileTextToShow();
    return Futures.immediateFuture(Tile.Builder()
        .setResourcesVersion(RESOURCES_VERSION)
        .setTileTimeline(Timeline.fromLayoutElement(
            new Text.Builder(this, tileText)
                .setModifiers(
                    new Modifiers.Builder()
                        .setContentUpdateAnimation(
                            new AnimatedVisibility.Builder()
                                .setEnterTransition(
                                    DefaultContentTransitions.slideIn(
                                        SLIDE_DIRECTION_LEFT_TO_RIGHT))
                                .setExitTransition(
                                    DefaultContentTransitions.slideOut(
                                        SLIDE_DIRECTION_LEFT_TO_RIGHT))
                                .build())
                        .build())
                .build()))
        .build()
    );
}

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

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

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

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