टाइल ऐनिमेशन

टाइल को ऐनिमेशन के साथ दिखाने के लिए, ये तरीके अपनाए जा सकते हैं:

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

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

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 के हेल्पर तरीकों का इस्तेमाल करके, स्लाइड-इन और स्लाइड-आउट ट्रांज़िशन करने का तरीका बताया गया है. ट्रांज़िशन सेटर के तरीकों में, 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()
    )
}
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

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

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

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

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

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

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

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