Możesz animować kafelki na kilka różnych sposobów, w tym:
- Szybkie przejścia za pomocą animacji pośrednich.
- Płynne zanikanie i przesuwanie animacji do kafelka i z niego.
Pokaż przejście w górę
Aby pokazać płynne przejście od jednej wartości do drugiej, możesz włączyć w elemencie animacje młodsze, jak pokazano w tym fragmencie kodu:
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. ); }
Pokaż płynne zanikanie lub slajd
Aby wyraźniej wskazać, że element pojawia się lub znika na kafelku, albo aby w bardziej subtelny sposób pokazać zmianę jego wartości, możesz użyć w animacjach kafelków efektów zanikania i przesuwania.
Jeśli układ kafelków zawiera element, którego wartość się zmienia, kafelek pokazuje animację wyjścia elementu, aktualizuje układ i pokazuje animację wejścia elementu.
Przejścia zanikające
Poniższy fragment kodu pokazuje, jak wykonywać przejścia z zanikaniem i zanikaniem przy użyciu metod pomocniczych z DefaultContentTransitions
. Aby zdefiniować niestandardowe obiekty FadeInTransition
i FadeOutTransition
, wywołaj odpowiednio setFadeIn()
i setFadeOut()
w metodach ustawiania przejść.
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() ); }
Przejścia slajdów
Ten fragment kodu pokazuje, jak przeprowadzać przejścia wysuwane i wysuwane przy użyciu metod pomocniczych z DefaultContentTransitions
. Możesz też zdefiniować niestandardowe obiekty SlideInTransition
i SlideOutTransition
, wywołując odpowiednio setSlideIn()
i setSlideOut()
w metodach ustawiania przejść.
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() ); }
Nie pokazuj ważnych informacji w trakcie animacji
Istnieje kilka sytuacji, w których animacje są wyłączone:
- Renderowanie kafelków systemu może wyłączyć animacje dla wszystkich kafelków.
- Kafelek może animować tylko 4 elementy naraz. Jeśli spróbujesz animować więcej niż 4 elementy jednocześnie, nie wszystkie będą wyświetlać animację.
Gdy animacja jest wyłączona, elementy są statyczne i pokazują wartość końcową animacji. Dlatego nie należy polegać na zachowaniu animacji, np. czasie jej trwania, aby pokazać ważne informacje.