Anda dapat menganimasikan kartu dengan beberapa cara, termasuk berikut:
- Transisi sweep menggunakan animasi hitung nilai.
- Animasi pemudaran dan penggeseran yang halus menuju dan menjauh dari kartu.
Menampilkan transisi sweep
Untuk menampilkan sweep yang lancar dari satu nilai ke nilai lain, Anda dapat mengaktifkan animasi hitung nilai untuk elemen, seperti ditunjukkan dalam cuplikan kode berikut:
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. ); }
Menampilkan efek pudar atau geser yang halus
Untuk menunjukkan dengan lebih jelas bahwa elemen muncul atau menghilang dalam kartu, atau menampilkan perubahan langkah dalam nilai kartu secara lebih halus, gunakan efek pudar dan geser dalam animasi kartu.
Jika tata letak kartu berisi elemen yang nilainya berubah, kartu tersebut akan menampilkan animasi keluar elemen, lalu memperbarui tata letak dan menampilkan animasi masuk elemen.
Transisi pudar
Cuplikan kode berikut menunjukkan cara melakukan transisi fade-in dan fade-out
menggunakan metode helper dari DefaultContentTransitions
. Untuk
menentukan objek FadeInTransition
dan FadeOutTransition
kustom, panggil
setFadeIn()
dan setFadeOut()
untuk masing-masing, di metode
penyetel transisi.
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() ); }
Transisi geser
Cuplikan kode ini menunjukkan cara melakukan transisi slide-in dan slide-out
menggunakan metode helper dari DefaultContentTransitions
. Anda
juga dapat menentukan objek SlideInTransition
dan SlideOutTransition
kustom dengan
memanggil setSlideIn()
dan setSlideOut()
untuk masing-masing, di
metode penyetel transisi.
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() ); }
Jangan tampilkan informasi penting di tengah animasi
Ada beberapa situasi ketika animasi dinonaktifkan:
- Render kartu sistem mungkin menonaktifkan animasi untuk semua kartu.
- Kartu hanya dapat menganimasikan 4 elemen sekaligus. Jika Anda mencoba menganimasikan lebih dari 4 elemen secara bersamaan, tidak semuanya akan menampilkan animasi.
Jika animasi dinonaktifkan, elemen akan bersifat statis dan menampilkan nilai akhir animasi. Oleh karena itu, jangan mengandalkan perilaku animasi, misal durasinya, untuk menampilkan informasi penting.