Karolara animasyon eklemek için aşağıdakiler de dahil olmak üzere birkaç farklı yöntemden yararlanabilirsiniz:
- Ara animasyonları kullanarak geçişleri süpürme.
- Animasyonları, karoya düzgün şekilde soldurma ve kutudan çıkarma.
Süpürme geçişini göster
Bir değerden diğerine yumuşak bir tarama yapmak için aşağıdaki kod snippet'inde gösterildiği gibi bir öğe için aralık animasyonları 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.
);
}
Yay yönünü ayarla
Karonuzda bir yay varsa yay çizgisinin veya metnin kullanıcının seçtiği dil için her zaman varsayılan metin yönünde büyümesini istemeyebilirsiniz. Yay büyüme yönü belirtmek için ArcDirection API'lerini kullanın:
Kotlin
@OptIn(ProtoLayoutExperimental::class)
public override fun onTileRequest(
requestParams: RequestBuilders.TileRequest
): ListenableFuture<Tile> {
return Futures.immediateFuture(Tile.Builder()
.setResourcesVersion(RESOURCES_VERSION)
.setTileTimeline(Timeline.fromLayoutElement(
EdgeContentLayout.Builder(deviceParameters)
.setEdgeContent(
Arc.Builder()
// Arc should always grow clockwise.
.setArcDirection(LayoutElementBuilders.ARC_DIRECTION_CLOCKWISE)
.addContent(
ArcLine.Builder()
// Set color, length, thickness, and more.
// Arc should always grow clockwise.
.setArcDirection(
LayoutElementBuilders.ARC_DIRECTION_CLOCKWISE)
.build()
).build()
).build())
).build()
)
}
Java
@OptIn(markerClass = ProtoLayoutExperimental.class)
@NonNull
@Override
protected ListenableFuture<Tile> onTileRequest(
@NonNull RequestBuilders.TileRequest requestParams
) {
return Futures.immediateFuture(new Tile.Builder()
.setResourcesVersion(RESOURCES_VERSION)
.setTileTimeline(Timeline.fromLayoutElement(
new EdgeContentLayout.Builder(deviceParameters)
.setEdgeContent(
new Arc.Builder()
// Arc should always grow clockwise.
.setArcDirection(LayoutElementBuilders.ARC_DIRECTION_CLOCKWISE)
.addContent(
new ArcLine.Builder()
// Set color, length, thickness, and more.
// Arc should always grow clockwise.
.setArcDirection(
LayoutElementBuilders.ARC_DIRECTION_CLOCKWISE)
.build())
.build())
.build()))
.build()
);
}
Düzgün geçiş yap
Bir öğenin karoda göründüğünü veya kaybolduğunu daha net bir şekilde belirtmek ya da bir karonun değerindeki adım değişikliğini daha incelikli bir şekilde göstermek için karo animasyonlarınızda solma ve kaydırma efektlerini kullanın.
Döşeme düzeni, değeri değişen bir öğe içeriyorsa parça, öğ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'i, DefaultContentTransitions'teki yardımcı yöntemleri kullanarak kararma ve belirme geçişlerinin nasıl gerçekleştirileceğini göstermektedir. Özel FadeInTransition ve FadeOutTransition nesnelerini tanımlamak için geçiş belirleyici yöntemlerinde sırasıyla setFadeIn() ve setFadeOut() çağrılarını yapı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 kaydırmalı ve dışarı kaydırma geçişlerinin nasıl gerçekleştirileceğini gösterir. Ayrıca, geçiş belirleyici yöntemlerinde sırasıyla setSlideIn() ve setSlideOut() öğelerini çağırarak özel SlideInTransition ve SlideOutTransition nesnelerini 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()
);
}
Dönüşüm gösterme
Bir karodaki belirli bir öğeye veya alana dikkat çekmek için döndürme, ölçeklendirme ve çevirme gibi çeşitli dönüşüm türlerini uygulayabilirsiniz.
Dönüşümlerle ilişkili birçok kayan nokta değeri, bu dönüşümleri canlandırmanızı sağlayan dinamik ifadeleri kabul eder.
Döndürme
Özelleştirilebilir bir pivot noktası hakkında saat yönünde dönüş yapmak için aşağıdakine benzer bir kod kullanın:
Kotlin
// Last line in your onTileRequest() method implementation.
return Futures.immediateFuture(Tile.Builder()
.setResourcesVersion(RESOURCES_VERSION)
.setTileTimeline(Timeline.fromLayoutElement(
Text.Builder(this, someTileText)
.setModifiers(
ModifiersBuilders.Transformation.Builder()
// Set the pivot point 50 dp from the left edge
// and 100 dp from the top edge of the screen.
.setPivotX(dp(50))
.setPivotY(dp(100))
// Rotate the element 45 degrees clockwise.
.setRotation(
degrees(45f)
).build()
).build())
).build()
)
Java
// Last line in your onTileRequest() method implementation.
return Futres.immediateFuture(new Tile.Builder()
.setResourcesVersion(RESOURCES_VERSION)
.setTileTimeline(Timeline.fromLayoutElement(
new Text.Builder(this, someTileText)
.setModifiers(
new ModifiersBuilders.Transformation.Builder()
// Set the pivot point 50 dp from the left edge
// and 100 dp from the top edge of the screen.
.setPivotX(dp(50))
.setPivotY(dp(100))
// Rotate the element 45 degrees clockwise.
.setRotation(
degrees(45f))
.build())
.build()))
.build()
);
Ölçeklendirme
Bir öğeyi yatay ve dikey ölçeklendirme faktörlerine göre büyütmek veya küçültmek için aşağıdakine benzer bir kod kullanın:
Kotlin
// Last line in your onTileRequest() method implementation.
return Futures.immediateFuture(Tile.Builder()
.setResourcesVersion(RESOURCES_VERSION)
.setTileTimeline(Timeline.fromLayoutElement(
Text.Builder(this, someTileText)
.setModifiers(
ModifiersBuilders.Transformation.Builder()
// Set the pivot point 50 dp from the left edge
// and 100 dp from the top edge of the screen.
.setPivotX(dp(50))
.setPivotY(dp(100))
// Shrink the element by a scale factor
// of 0.5 horizontally and 0.75 vertically.
.setScaleX(TypeBuilders.FloatProp.Builder(0.5f)
.build())
.setScaleY(TypeBuilders.FloatProp.Builder(0.75f)
.build()
).build()
).build())
).build()
)
Java
// Last line in your onTileRequest() method implementation.
return Futres.immediateFuture(new Tile.Builder()
.setResourcesVersion(RESOURCES_VERSION)
.setTileTimeline(Timeline.fromLayoutElement(
new Text.Builder(this, someTileText)
.setModifiers(
new ModifiersBuilders.Transformation.Builder()
// Set the pivot point 50 dp from the left edge
// and 100 dp from the top edge of the screen.
.setPivotX(dp(50))
.setPivotY(dp(100))
// Shrink the element by a scale factor
// of 0.5 horizontally and 0.75 vertically.
.setScaleX(new TypeBuilders.FloatProp.Builder(0.5f)
.build())
.setScaleY(new TypeBuilders.FloatProp.Builder(0.75f)
.build())
.build())
.build()))
.build()
);
Geometrik çeviri
Bir öğeyi ekranda belirli bir yoğunluk pikseli (dp) kadar yatay veya dikey olarak taşımak için aşağıdakine benzer bir kod kullanın:
Kotlin
// Last line in your onTileRequest() method implementation.
return Futures.immediateFuture(Tile.Builder()
.setResourcesVersion(RESOURCES_VERSION)
.setTileTimeline(Timeline.fromLayoutElement(
Text.Builder(this, someTileText)
.setModifiers(
ModifiersBuilders.Transformation.Builder()
// Translate (move) the element 60 dp to the right
// and 80 dp down.
.setTranslationX(dp(60))
.setTranslationY(dp(80))
.build()
).build())
).build()
)
Java
// Last line in your onTileRequest() method implementation.
return Futres.immediateFuture(new Tile.Builder()
.setResourcesVersion(RESOURCES_VERSION)
.setTileTimeline(Timeline.fromLayoutElement(
new Text.Builder(this, someTileText)
.setModifiers(
new ModifiersBuilders.Transformation.Builder()
// Translate (move) the element 60 dp to the right
// and 80 dp down.
.setTranslationX(dp(60))
.setTranslationY(dp(80))
.build())
.build()))
.build()
);
Önemli bilgileri animasyonun ortasında gösterme
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 karo aynı anda yalnızca 4 öğenin animasyonunu oluşturabilir. Aynı anda 4'ten fazla öğenin animasyonunu yapmaya çalışırsanız hepsi animasyon göstermez.
Bir animasyonun devre dışı bırakıldığı durumlarda, öğ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.