คุณทำให้การ์ดเคลื่อนไหวได้หลายวิธีดังนี้
- สวีททรานซิชันโดยใช้ภาพเคลื่อนไหว Tween
- ค่อยๆ จางลงและเลื่อนภาพเคลื่อนไหวเข้าและออกจากการ์ด
แสดงการเปลี่ยนหน้าแบบเลื่อน
หากต้องการแสดงการกวาดจากค่าหนึ่งไปอีกค่าหนึ่งอย่างราบรื่น คุณสามารถเปิดใช้การเข้าสู่วัยรุ่น ภาพเคลื่อนไหวสำหรับองค์ประกอบหนึ่งดังที่แสดงในโค้ดต่อไปนี้ snippet:
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. ); }
ตั้งค่าทิศทางโค้ง
หากไทล์ของคุณมีเส้นโค้ง คุณอาจไม่ต้องการให้แนวโค้งหรือข้อความแสดงอยู่เสมอ
เพิ่มขึ้นในทิศทางข้อความเริ่มต้นสำหรับภาษาที่ผู้ใช้เลือก หากต้องการระบุ
ทิศทางการเติบโตแบบโค้ง ให้ใช้ API ของ ArcDirection
:
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() ); }
แสดงภาพการจางลงหรือสไลด์อย่างราบรื่น
หากต้องการระบุให้ชัดเจนขึ้นว่าองค์ประกอบหนึ่งปรากฏขึ้นหรือหายไปในการ์ด หรือเพื่อแสดงการเปลี่ยนแปลงขั้นตอนในค่าของไทล์อย่างละเอียดยิ่งขึ้น ให้ใช้การเฟดและเลื่อน ในภาพเคลื่อนไหวของไทล์
หากเลย์เอาต์ของชิ้นส่วนมีองค์ประกอบที่ค่ามีการเปลี่ยนแปลง การ์ดจะแสดงองค์ประกอบ ภาพเคลื่อนไหวออกจากองค์ประกอบ แล้วอัปเดตเลย์เอาต์และแสดงการป้อนเอลิเมนต์ ภาพเคลื่อนไหว
การเปลี่ยนแบบจางลง
ข้อมูลโค้ดต่อไปนี้แสดงวิธีค่อยๆ แทรกและเฟดเอาต์
เปลี่ยนโดยใช้เมธอดตัวช่วยจาก DefaultContentTransitions
ถึง
กำหนดออบเจ็กต์ FadeInTransition
และ FadeOutTransition
ที่กำหนดเอง เรียกใช้
setFadeIn()
และ setFadeOut()
ตามลำดับในการเปลี่ยนแปลง
Setter Method
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
คุณ
และยังสามารถกำหนดออบเจ็กต์ SlideInTransition
และ SlideOutTransition
ที่กำหนดเองโดย
การเรียก setSlideIn()
และ setSlideOut()
ตามลำดับใน
เมธอดตัวตั้งค่าการเปลี่ยน
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() ); }
แสดงการเปลี่ยนรูปแบบ
หากต้องการดึงความสนใจไปที่องค์ประกอบหรือพื้นที่หนึ่งๆ ในชิ้นส่วน คุณสามารถใช้ ของการเปลี่ยนรูปแบบ รวมถึง การหมุน การปรับขนาด และการแปล
มีค่าจุดลอยตัวจำนวนมากที่เชื่อมโยงกับการเปลี่ยนรูปแบบยอมรับ นิพจน์แบบไดนามิก ซึ่งช่วยให้คุณทำให้การเปลี่ยนรูปแบบเหล่านี้เคลื่อนไหวได้
การหมุน
หากต้องการหมุนตามเข็มนาฬิกาเกี่ยวกับจุด Pivot ที่ปรับแต่งได้ ให้ใช้โค้ด ที่คล้ายกับข้อความต่อไปนี้
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() );
การปรับขนาด
หากต้องการเพิ่มหรือย่อองค์ประกอบตามค่าการปรับขนาดแนวนอนและแนวตั้ง ให้ใช้ ที่คล้ายกับโค้ดต่อไปนี้
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() );
การแปลค่าเรขาคณิต
วิธีย้ายองค์ประกอบตามจำนวนพิกเซลความหนาแน่น (dp) ที่เฉพาะเจาะจงผ่านหน้าจอ ในแนวนอนหรือแนวตั้ง ให้ใช้โค้ดที่คล้ายคลึงกับโค้ดต่อไปนี้
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() );
ไม่ต้องแสดงข้อมูลสำคัญขณะภาพเคลื่อนไหว
มีหลายกรณีที่ภาพเคลื่อนไหวถูกปิดใช้ ดังนี้
- การแสดงภาพการ์ดของระบบอาจปิดใช้ภาพเคลื่อนไหวสําหรับการ์ดทั้งหมด
- การ์ดทำให้องค์ประกอบเคลื่อนไหวได้ทีละ 4 องค์ประกอบเท่านั้น หากพยายามทำให้เคลื่อนไหวมากขึ้น องค์ประกอบมากกว่า 4 รายการในเวลาเดียวกัน ไม่ใช่ทั้งหมดที่แสดงภาพเคลื่อนไหว
ในกรณีที่ภาพเคลื่อนไหวปิดใช้อยู่ องค์ประกอบจะเป็นแบบคงที่และแสดง ค่าสิ้นสุดของภาพเคลื่อนไหว ดังนั้นอย่าพึ่งพาลักษณะการทำงานของภาพเคลื่อนไหว เช่น ระยะเวลา เพื่อแสดงข้อมูลสำคัญ