Karolarınızı, aşağıdakiler de dahil olmak üzere birkaç farklı şekilde canlandırabilirsiniz:
- Ara çizgi animasyonlarını kullanarak geçişleri süpürme.
- Animasyonları karonun içine ve dışına yumuşatarak şeffaflaştırma ve kaydırma.
Süpürme geçişi göster
Bir değerden diğerine yumuşak bir tarama göstermek amacıyla aşağıdaki kod snippet'inde gösterildiği gibi bir öğe için animasyonları ikiye katlama özelliğini etkinleştirebilirsiniz:
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. ); }
Yumuşak geçiş veya kaydırma gösterin
Bir öğenin karo içinde göründüğünü veya kaybolduğunu daha net bir şekilde belirtmek ya da bir karonun değerinde bir adım değişikliğini daha belirgin bir şekilde göstermek için karo animasyonlarınızda şeffaflaştırma ve kaydırma efektleri kullanın.
Karo düzeni, değeri değişen bir öğe içeriyorsa karo, öğenin çıkış animasyonunu gösterir, ardından düzeni günceller ve öğenin giriş animasyonunu gösterir.
Şeffaflaştırma geçişleri
Aşağıdaki kod snippet'inde, DefaultContentTransitions
'teki yardımcı yöntemleri kullanarak belirme ve kararma geçişlerinin nasıl gerçekleştirileceği gösterilmektedir. Özel FadeInTransition
ve FadeOutTransition
nesnelerini tanımlamak için geçiş belirleyici yöntemlerinde sırasıyla setFadeIn()
ve setFadeOut()
yöntemini çağırın.
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() ); }
Slayt geçişleri
Bu diğer kod snippet'i, DefaultContentTransitions
'teki yardımcı yöntemleri kullanarak içeri kayan ve dışarı kayan geçişlerin nasıl gerçekleştirileceğini gösterir. Ayrıca geçiş belirleyici yöntemlerinde sırasıyla setSlideIn()
ve setSlideOut()
çağırarak özel SlideInTransition
ve SlideOutTransition
nesneleri tanımlayabilirsiniz.
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() ); }
Animasyonun ortasında önemli bilgiler göstermeme
Animasyonların devre dışı bırakıldığı birkaç durum vardır:
- Sistemin karo oluşturma işlemi, tüm karolar için animasyonları devre dışı bırakabilir.
- Bir karoda aynı anda yalnızca 4 öğe animasyonlu olabilir. Aynı anda 4'ten fazla öğeyi canlandırmaya çalışırsanız hepsi animasyon göstermez.
Bir animasyonun devre dışı bırakılması durumunda, öğeler statik olur ve animasyonun bitiş değerini gösterir. Bu nedenle, önemli bilgileri göstermek için animasyonun davranışına (ör. süresi) güvenmeyin.