टाइल ऐनिमेशन

टाइल में, ऐनिमेशन के लिए कुछ अलग-अलग तरीकों का इस्तेमाल किया जा सकता है. इनमें ये शामिल हैं:

स्वीप ट्रांज़िशन दिखाना

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

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()
    )
}

आर्क की दिशा सेट करना

अगर आपकी टाइल में कोई आर्क है, तो हो सकता है कि आपको आर्क लाइन या टेक्स्ट को हमेशा उपयोगकर्ता की चुनी गई भाषा के लिए, डिफ़ॉल्ट टेक्स्ट की दिशा में न बढ़ाना हो. आर्क के बढ़ने की दिशा तय करने के लिए, 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()
    )
}

धीरे-धीरे दिखने या स्लाइड होने वाला इफ़ेक्ट दिखाना

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

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

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

यहां दिए गए कोड स्निपेट में, 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()
    )
}

स्लाइड ट्रांज़िशन

इस अन्य कोड स्निपेट में दिखाया गया है कि DefaultContentTransitions के हेल्पर तरीकों का इस्तेमाल करके, स्लाइड-इन और स्लाइड-आउट ट्रांज़िशन कैसे किए जाते हैं. ट्रांज़िशन सेटर के तरीकों में setSlideIn() और setSlideOut() को कॉल करके, कस्टम SlideInTransition और SlideOutTransition ऑब्जेक्ट भी तय किए जा सकते हैं.

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()
    )
}

ट्रांसफ़ॉर्मेशन दिखाना

किसी टाइल में मौजूद किसी खास एलिमेंट या एरिया पर ध्यान खींचने के लिए, उस पर कई तरह के ट्रांसफ़ॉर्मेशन लागू किए जा सकते हैं. जैसे: रोटेशन, स्केलिंग, और ट्रांसलेशन.

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

रोटेशन

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

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()
)

स्केलिंग

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

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()
)

ज्यामितीय अनुवाद

किसी एलिमेंट को स्क्रीन पर हॉरिज़ॉन्टल या वर्टिकल तौर पर, तय संख्या में डेंसिटी पिक्सल (डीपी) तक ले जाने के लिए, इस तरह के कोड का इस्तेमाल करें:

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()
)

Lottie ऐनिमेशन

टाइलों में, इमेज के सिंटैक्स की तरह ही Lottie ऐनिमेशन चलाने की सुविधा होती है:

class LottieAnimation : TileService() {

    val lottieResourceId = "lottie_animation"

    override fun onTileRequest(requestParams: RequestBuilders.TileRequest): ListenableFuture<Tile> {

        val layout =
            LayoutElementBuilders.Image.Builder()
                .setWidth(dp(150f))
                .setHeight(dp(150f))
                .setResourceId(lottieResourceId)
                .build()

        return Futures.immediateFuture(
            Tile.Builder()
                .setResourcesVersion(RESOURCES_VERSION)
                .setTileTimeline(Timeline.fromLayoutElement(layout))
                .build()
        )
    }

    override fun onTileResourcesRequest(
        requestParams: ResourcesRequest
    ): ListenableFuture<Resources> {

        val lottieImage =
            ResourceBuilders.ImageResource.Builder()
                .setAndroidLottieResourceByResId(
                    ResourceBuilders.AndroidLottieResourceByResId.Builder(R.raw.lottie)
                        .setStartTrigger(createOnVisibleTrigger())
                        .build()
                )
                .build()

        return Futures.immediateFuture(
            Resources.Builder()
                .setVersion(requestParams.version)
                .addIdToImageMapping(lottieResourceId, lottieImage)
                .build()
        )
    }
}

ध्यान देने लायक कुछ बातें:

  • सिर्फ़ Lottie फ़ाइलों के सबसेट का इस्तेमाल किया जा सकता है. इनमें से किसी एक वैलिडेटर का इस्तेमाल करके, यह देखें कि आपका फ़ीड ज़रूरी शर्तों के मुताबिक है या नहीं:
    • ऑनलाइन पुष्टि करने वाला टूल: https://skottie.skia.org/. "कंपैटिबिलिटी रिपोर्ट" सेक्शन में, फ़ाइल को "स्पेसिफ़िकेशन से जुड़ी गड़बड़ियां", "स्पेसिफ़िकेशन से जुड़ी चेतावनियां" (सामान्य प्रॉपर्टी को अनदेखा करके) और "कम पावर वाली प्रोफ़ाइल से जुड़ी गड़बड़ियां" टेस्ट पास करने होंगे.
    • Rust की पुष्टि करने वाली लाइब्रेरी: https://github.com/google/lottie-tools.
  • Lottie प्लेबैक की सुविधा, टाइल रेंडरर के साथ काम करती है. इसके लिए, मुख्य वर्शन कम से कम 1 और माइनर वर्शन कम से कम 500 होना चाहिए. अगर दिए गए ऐनिमेशन का इस्तेमाल नहीं किया जा सकता, तो ऐनिमेशन नहीं दिखता. हालांकि, टाइल का बाकी हिस्सा उम्मीद के मुताबिक रेंडर होता है. अगर ज़रूरी हो, तो फ़ॉलबैक विकल्प दिया जा सकता है. जैसे, कोई स्टैटिक इमेज.

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

ऐनिमेशन बंद होने की कई वजहें हो सकती हैं:

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

ऐनिमेशन बंद होने पर, एलिमेंट स्टैटिक होते हैं और ऐनिमेशन की आखिरी वैल्यू दिखाते हैं. इसलिए, ज़रूरी जानकारी दिखाने के लिए, ऐनिमेशन के व्यवहार पर भरोसा न करें. जैसे, इसकी अवधि.