다음을 비롯한 몇 가지 방법으로 카드에 애니메이션을 적용할 수 있습니다.
- 트윈 애니메이션을 사용하여 스윕 전환.
- 카드 안으로 또는 바깥으로 애니메이션의 부드러운 페이드 및 슬라이드
스윕 전환 표시
한 값에서 다른 값으로 부드러운 스윕을 표시하려면 다음 코드 스니펫과 같이 요소에 트윈 애니메이션을 적용하면 됩니다.
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개의 요소에만 애니메이션을 적용할 수 있음. 한 번에 5개 이상의 요소에 애니메이션을 적용하려고 하면 일부 요소에는 애니메이션이 표시되지 않습니다.
애니메이션이 사용 중지된 경우 요소에 애니메이션의 종료 값만 정적으로 표시됩니다. 따라서 중요한 정보(예: 지속 시간)를 표시할 때는 애니메이션의 동작을 사용해서는 안 됩니다.