您可以透過幾種不同方式為資訊方塊製作動畫，包括：
顯示掃除轉場效果
如要顯示兩個值之間的順暢掃除效果，可以為元素啟用補間動畫，如以下程式碼片段所示：
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.
);
}
顯示順暢的淡出或滑動效果
如要明確指出元素在資訊方塊內顯示或消失的動作，或是要巧妙顯示資訊方塊內逐步變動的值，請在資訊方塊動畫中使用淡出和滑動效果。
如果資訊方塊版面配置包含值會變更的元素，資訊方塊會顯示該元素的退出動畫，然後更新版面配置並顯示該元素的進入動畫。
淡出轉場效果
下列程式碼片段示範如何使用 DefaultContentTransitions 的輔助方法執行淡入和淡出轉場效果。如要定義 FadeInTransition 和 FadeOutTransition 物件，請在轉場 setter 方法中分別呼叫 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 的輔助方法執行滑入和滑出轉場效果。您也可以在轉場 setter 方法中分別呼叫 setSlideIn() 和 setSlideOut()，自行定義 SlideInTransition 和 SlideOutTransition 物件。
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()
);
}
不要在動畫期間顯示重要資訊
以下列舉幾種會停用動畫的情況：
- 系統的資訊方塊轉譯器可能會停用所有資訊方塊的動畫。
- 資訊方塊一次只能顯示 4 個元素的動畫。如果試圖顯示超過 4 個元素的動畫，其中有些元素會無法顯示動畫。
如果停用動畫，元素會呈現靜態，並顯示動畫的結束值。因此，請不要依賴動畫的行為 (例如動畫持續期間) 來顯示重要資訊。