इस पेज का अनुवाद Cloud Translation API से किया गया है.

टाइल ऐनिमेशन

टाइल को कई तरीकों से ऐनिमेट किया जा सकता है. इनमें ये तरीके शामिल हैं:

ट्वीन ऐनिमेशन का इस्तेमाल करके ट्रांज़िशन स्वीप करें.
टाइल में और उससे बाहर स्मूद फ़ेड और स्लाइड ऐनिमेशन.

स्वीप संक्रमण दिखाएं

एक मान से दूसरे मान पर आसानी से स्वीप करने के लिए, आप ट्वीन को सक्षम कर सकते हैं ऐनिमेशन, जैसा कि इस कोड में दिखाया गया है snippet:

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.
    );
}

चाप की दिशा सेट करें

अगर आपकी टाइल में आर्क है, तो हो सकता है कि आप न चाहें कि आर्क लाइन या टेक्स्ट हमेशा दिखे उपयोगकर्ता की चुनी हुई भाषा के लिए डिफ़ॉल्ट टेक्स्ट दिशा में बढ़ सकता है. यह तय करने के लिए आर्क के ग्रोथ की दिशा में, ArcDirection एपीआई का इस्तेमाल करें:

Kotlin

@OptIn(ProtoLayoutExperimental::class)
public override fun onTileRequest(
        requestParams: RequestBuilders.TileRequest
): ListenableFuture<Tile> {
    return Futures.immediateFuture(Tile.Builder()
        .setResourcesVersion(RESOURCES_VERSION)
        .setTileTimeline(Timeline.fromLayoutElement(
            EdgeContentLayout.Builder(deviceParameters)
                .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()
    )
}

Java

@OptIn(markerClass = ProtoLayoutExperimental.class)
@NonNull
@Override
protected ListenableFuture<Tile> onTileRequest(
        @NonNull RequestBuilders.TileRequest requestParams
) {
    return Futures.immediateFuture(new Tile.Builder()
        .setResourcesVersion(RESOURCES_VERSION)
        .setTileTimeline(Timeline.fromLayoutElement(
            new EdgeContentLayout.Builder(deviceParameters)
                .setEdgeContent(
                    new Arc.Builder()
                        // Arc should always grow clockwise.
                        .setArcDirection(LayoutElementBuilders.ARC_DIRECTION_CLOCKWISE)
                        .addContent(
                            new ArcLine.Builder()
                            // Set color, length, thickness, and more.
                            // Arc should always grow clockwise.
                            .setArcDirection(
                                LayoutElementBuilders.ARC_DIRECTION_CLOCKWISE)
                            .build())
                        .build())
                .build()))
        .build()
    );
}

स्मूद फ़ेड या स्लाइड दिखाएं

किसी एलिमेंट के टाइल में दिखने या गायब होने के बारे में ज़्यादा साफ़ तौर पर बताने के लिए, या टाइल की वैल्यू में चरण-बदलाव को ज़्यादा बारीकी से दिखाने के लिए, फ़ेड और स्लाइड का इस्तेमाल करें आपके टाइल ऐनिमेशन में इफ़ेक्ट.

अगर टाइल लेआउट में कोई ऐसा एलिमेंट है जिसकी वैल्यू बदल जाती है, तो टाइल एलिमेंट के बाहर निकलने के ऐनिमेशन का इस्तेमाल करता है, फिर लेआउट को अपडेट करता है और एलिमेंट का Enter दिखाता है ऐनिमेशन.

फ़ेड ट्रांज़िशन

नीचे दिया गया कोड स्निपेट, फ़ेड-इन और फ़ेड-आउट करने का तरीका बताता है 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()
    );
}

कोई बदलाव दिखाएं

किसी टाइल में किसी खास एलिमेंट या हिस्से पर लोगों का ध्यान खींचने के लिए, कई बटन इस्तेमाल किए जा सकते हैं इसमें किस तरह के बदलाव शामिल हैं. जैसे, रोटेशन, स्केलिंग, और अनुवाद.

ट्रांसफ़ॉर्मेशन से जुड़े कई फ़्लोटिंग-पॉइंट वैल्यू स्वीकार की जाती हैं डाइनैमिक एक्सप्रेशन की मदद से, इन बदलावों को ऐनिमेट किया जा सकता है.

रोटेशन

पसंद के मुताबिक बनाए जा सकने वाले पिवट पॉइंट के बारे में घड़ी की सुई की दिशा में घूमने के लिए, कोड का इस्तेमाल करें इनसे मिलता-जुलता:

Kotlin

// Last line in your onTileRequest() method implementation.
return Futures.immediateFuture(Tile.Builder()
    .setResourcesVersion(RESOURCES_VERSION)
    .setTileTimeline(Timeline.fromLayoutElement(
        Text.Builder(this, someTileText)
            .setModifiers(
                    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(50))
                        .setPivotY(dp(100))
                        // Rotate the element 45 degrees clockwise.
                        .setRotation(
                            degrees(45f)
                        ).build()
            ).build())
    ).build()
)

Java

// Last line in your onTileRequest() method implementation.
return Futres.immediateFuture(new Tile.Builder()
    .setResourcesVersion(RESOURCES_VERSION)
    .setTileTimeline(Timeline.fromLayoutElement(
        new Text.Builder(this, someTileText)
            .setModifiers(
                    new 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(50))
                        .setPivotY(dp(100))
                        // Rotate the element 45 degrees clockwise.
                        .setRotation(
                            degrees(45f))
                        .build())
            .build()))
    .build()
);

स्केलिंग

हॉरिज़ॉन्टल और वर्टिकल स्केलिंग फ़ैक्टर के आधार पर किसी एलिमेंट को बढ़ाने या छोटा करने के लिए, के समान कोड:

Kotlin

// Last line in your onTileRequest() method implementation.
return Futures.immediateFuture(Tile.Builder()
    .setResourcesVersion(RESOURCES_VERSION)
    .setTileTimeline(Timeline.fromLayoutElement(
        Text.Builder(this, someTileText)
            .setModifiers(
                    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(50))
                        .setPivotY(dp(100))
                        // Shrink the element by a scale factor
                        // of 0.5 horizontally and 0.75 vertically.
                        .setScaleX(TypeBuilders.FloatProp.Builder(0.5f)
                                .build())
                        .setScaleY(TypeBuilders.FloatProp.Builder(0.75f)
                                .build()
                        ).build()
            ).build())
    ).build()
)

Java

// Last line in your onTileRequest() method implementation.
return Futres.immediateFuture(new Tile.Builder()
    .setResourcesVersion(RESOURCES_VERSION)
    .setTileTimeline(Timeline.fromLayoutElement(
        new Text.Builder(this, someTileText)
            .setModifiers(
                    new 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(50))
                        .setPivotY(dp(100))
                        // Shrink the element by a scale factor
                        // of 0.5 horizontally and 0.75 vertically.
                        .setScaleX(new TypeBuilders.FloatProp.Builder(0.5f)
                                .build())
                        .setScaleY(new TypeBuilders.FloatProp.Builder(0.75f)
                                .build())
                        .build())
            .build()))
    .build()
);

जियोमेट्रिक ट्रांसलेशन

किसी एलिमेंट को पूरी स्क्रीन पर, एक तय संख्या में सघनता (डेंसिटी) पिक्सल (dp) के हिसाब से ले जाने के लिए हॉरिज़ॉन्टल या वर्टिकल तौर पर इस्तेमाल करें, नीचे दिए गए कोड से मिलते-जुलते कोड का इस्तेमाल करें:

Kotlin

// Last line in your onTileRequest() method implementation.
return Futures.immediateFuture(Tile.Builder()
    .setResourcesVersion(RESOURCES_VERSION)
    .setTileTimeline(Timeline.fromLayoutElement(
        Text.Builder(this, someTileText)
            .setModifiers(
                    ModifiersBuilders.Transformation.Builder()
                        // Translate (move) the element 60 dp to the right
                        // and 80 dp down.
                        .setTranslationX(dp(60))
                        .setTranslationY(dp(80))
                        .build()
            ).build())
    ).build()
)

Java

// Last line in your onTileRequest() method implementation.
return Futres.immediateFuture(new Tile.Builder()
    .setResourcesVersion(RESOURCES_VERSION)
    .setTileTimeline(Timeline.fromLayoutElement(
        new Text.Builder(this, someTileText)
            .setModifiers(
                    new ModifiersBuilders.Transformation.Builder()
                        // Translate (move) the element 60 dp to the right
                        // and 80 dp down.
                        .setTranslationX(dp(60))
                        .setTranslationY(dp(80))
                        .build())
            .build()))
    .build()
);

ऐनिमेशन के बीच में ज़रूरी जानकारी न दिखाएं

ऐनिमेशन बंद होने की कई स्थितियां होती हैं:

सिस्टम की टाइल रेंडर होने की सुविधा, सभी टाइल के लिए ऐनिमेशन बंद कर सकती है.
कोई टाइल एक बार में सिर्फ़ 4 एलिमेंट को ऐनिमेट कर सकती है. ऐनिमेशन की ज़्यादा कोशिश करने पर से ज़्यादा एलिमेंट होने चाहिए, तो सभी में ऐनिमेशन नहीं दिखता.

किसी एनिमेशन के अक्षम होने पर, तत्व स्थिर होते हैं और एनिमेशन का अंत मान सेट कर दिया जाता है. इसी वजह से, ऐनिमेशन के व्यवहार पर भरोसा न करें, जैसे, इवेंट का कुल समय.