ไทล์รองรับวิธีการเคลื่อนไหวที่แตกต่างกัน 2-3 วิธี ซึ่งรวมถึงวิธีต่อไปนี้
- การเปลี่ยนฉากแบบกวาดโดยใช้ภาพเคลื่อนไหวแบบทวีต
- ภาพเคลื่อนไหวจางและเลื่อนอย่างราบรื่นเข้าและออกจากไทล์
- ภาพเคลื่อนไหว Lottie
แสดงการเปลี่ยนฉากแบบกวาด
หากต้องการแสดงการเปลี่ยนจากค่าหนึ่งไปยังอีกค่าหนึ่งอย่างราบรื่น คุณสามารถเปิดใช้ภาพเคลื่อนไหว Tween สำหรับองค์ประกอบได้ ดังที่แสดงในข้อมูลโค้ดต่อไปนี้
private var startValue = 15f private var endValue = 105f private val animationDurationInMillis = 2000L // 2 seconds override fun onTileRequest(requestParams: RequestBuilders.TileRequest): ListenableFuture<Tile> { val circularProgressIndicator = 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() return Futures.immediateFuture( Tile.Builder() .setResourcesVersion(RESOURCES_VERSION) .setTileTimeline(Timeline.fromLayoutElement(circularProgressIndicator)) .build() ) }
ตั้งค่าทิศทางส่วนโค้ง
หากไทล์มีส่วนโค้ง คุณอาจไม่ต้องการให้เส้นหรือข้อความของส่วนโค้งขยายตามทิศทางข้อความเริ่มต้นสำหรับภาษาที่ผู้ใช้เลือกเสมอ
หากต้องการระบุทิศทางการเติบโตของส่วนโค้ง ให้ใช้ ArcDirection
API ดังนี้
public override fun onTileRequest( requestParams: RequestBuilders.TileRequest ): ListenableFuture<Tile> { return Futures.immediateFuture( Tile.Builder() .setResourcesVersion(RESOURCES_VERSION) .setTileTimeline( Timeline.fromLayoutElement( EdgeContentLayout.Builder(deviceParameters) .setResponsiveContentInsetEnabled(true) .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() ) }
แสดงการจางหรือสไลด์อย่างราบรื่น
หากต้องการระบุให้ชัดเจนยิ่งขึ้นว่าองค์ประกอบปรากฏหรือหายไปในไทล์ หรือเพื่อแสดงการเปลี่ยนแปลงทีละขั้นในค่าของไทล์อย่างแนบเนียนยิ่งขึ้น ให้ใช้เอฟเฟกต์จางและสไลด์ ในการเคลื่อนไหวของไทล์
หากเลย์เอาต์ไทล์มีองค์ประกอบที่มีค่าเปลี่ยนแปลง ไทล์จะแสดงภาพเคลื่อนไหวขาออกขององค์ประกอบ จากนั้นจะอัปเดตเลย์เอาต์และแสดงภาพเคลื่อนไหวขาเข้าขององค์ประกอบ
การเปลี่ยนภาพแบบจางลง
ข้อมูลโค้ดต่อไปนี้แสดงวิธีดำเนินการเปลี่ยนฉากแบบค่อยๆ ปรากฏและค่อยๆ จางหาย
โดยใช้วิธีการช่วยจาก DefaultContentTransitions
หากต้องการกำหนดออบเจ็กต์ FadeInTransition
และ FadeOutTransition
ที่กำหนดเอง ให้เรียกใช้ setFadeIn()
และ setFadeOut()
ตามลำดับในเมธอดตัวตั้งค่าการเปลี่ยน
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.fadeIn()) .setExitTransition(DefaultContentTransitions.fadeOut()) .build() ) .build() ) .build() ) ) .build() ) }
การเปลี่ยนสไลด์
ข้อมูลโค้ดอื่นๆ นี้แสดงวิธีทำการเปลี่ยนภาพแบบสไลด์เข้าและสไลด์ออก
โดยใช้วิธีการช่วยจาก DefaultContentTransitions
นอกจากนี้ คุณยังกำหนดออบเจ็กต์ SlideInTransition
และ SlideOutTransition
ที่กำหนดเองได้โดย
เรียกใช้ setSlideIn()
และ setSlideOut()
ตามลำดับในเมธอด
ตัวตั้งค่าการเปลี่ยน
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( ModifiersBuilders.SLIDE_DIRECTION_LEFT_TO_RIGHT ) ) .setExitTransition( DefaultContentTransitions.slideOut( ModifiersBuilders.SLIDE_DIRECTION_LEFT_TO_RIGHT ) ) .build() ) .build() ) .build() ) ) .build() ) }
แสดงการเปลี่ยนรูปแบบ
หากต้องการดึงดูดความสนใจไปยังองค์ประกอบหรือพื้นที่ที่เฉพาะเจาะจงในไทล์ คุณสามารถใช้การเปลี่ยนรูปแบบหลายประเภทกับองค์ประกอบหรือพื้นที่นั้นได้ ซึ่งรวมถึงการหมุน การปรับขนาด และการแปล
ค่าทศนิยมหลายค่าที่เชื่อมโยงกับการเปลี่ยนรูปแบบยอมรับนิพจน์ แบบไดนามิก ซึ่งช่วยให้คุณเคลื่อนไหวการเปลี่ยนรูปแบบเหล่านี้ได้
การหมุน
หากต้องการหมุนตามเข็มนาฬิกาเกี่ยวกับจุดหมุนที่ปรับแต่งได้ ให้ใช้โค้ด ที่คล้ายกับโค้ดต่อไปนี้
return Futures.immediateFuture( Tile.Builder() .setResourcesVersion(RESOURCES_VERSION) .setTileTimeline( Timeline.fromLayoutElement( Text.Builder(this, someTileText) .setModifiers( Modifiers.Builder() .setTransformation( 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(50f)) .setPivotY(dp(100f)) // Rotate the element 45 degrees clockwise. .setRotation(degrees(45f)) .build() ) .build() ) .build() ) ) .build() )
การปรับขนาด
หากต้องการขยายหรือย่อองค์ประกอบตามปัจจัยการปรับขนาดแนวนอนและแนวตั้ง ให้ใช้โค้ดที่คล้ายกับโค้ดต่อไปนี้
return Futures.immediateFuture( Tile.Builder() .setResourcesVersion(RESOURCES_VERSION) .setTileTimeline( Timeline.fromLayoutElement( Text.Builder(this, someTileText) .setModifiers( Modifiers.Builder() .setTransformation( 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(50f)) .setPivotY(dp(100f)) // Shrink the element by a scale factor // of 0.5 horizontally and 0.75 vertically. .setScaleX(FloatProp.Builder(0.5f).build()) .setScaleY(FloatProp.Builder(0.75f).build()) .build() ) .build() ) .build() ) ) .build() )
การแปลรูปทรง
หากต้องการย้ายองค์ประกอบตามจำนวนพิกเซลความหนาแน่น (dp) ที่เฉพาะเจาะจงบนหน้าจอในแนวนอนหรือแนวตั้ง ให้ใช้โค้ดที่คล้ายกับโค้ดต่อไปนี้
return Futures.immediateFuture( Tile.Builder() .setResourcesVersion(RESOURCES_VERSION) .setTileTimeline( Timeline.fromLayoutElement( Text.Builder(this, someTileText) .setModifiers( Modifiers.Builder() .setTransformation( ModifiersBuilders.Transformation.Builder() // Translate (move) the element 60 dp to the right // and 80 dp down. .setTranslationX(dp(60f)) .setTranslationY(dp(80f)) .build() ) .build() ) .build() ) ) .build() )
ภาพเคลื่อนไหว Lottie
ไทล์รองรับการเล่นภาพเคลื่อนไหว Lottie โดยใช้ไวยากรณ์ที่คล้ายกับ ไวยากรณ์ของรูปภาพ
class LottieAnimation : TileService() { val lottieResourceId = "lottie_animation" override fun onTileRequest(requestParams: RequestBuilders.TileRequest): ListenableFuture<Tile> { val layout = LayoutElementBuilders.Image.Builder() .setWidth(dp(150f)) .setHeight(dp(150f)) .setResourceId(lottieResourceId) .build() return Futures.immediateFuture( Tile.Builder() .setResourcesVersion(RESOURCES_VERSION) .setTileTimeline(Timeline.fromLayoutElement(layout)) .build() ) } override fun onTileResourcesRequest( requestParams: ResourcesRequest ): ListenableFuture<Resources> { val lottieImage = ResourceBuilders.ImageResource.Builder() .setAndroidLottieResourceByResId( ResourceBuilders.AndroidLottieResourceByResId.Builder(R.raw.lottie) .setStartTrigger(createOnVisibleTrigger()) .build() ) .build() return Futures.immediateFuture( Resources.Builder() .setVersion(requestParams.version) .addIdToImageMapping(lottieResourceId, lottieImage) .build() ) } }
ข้อควรทราบ
- ระบบรองรับเฉพาะชุดย่อยของไฟล์ Lottie ตรวจสอบความเข้ากันได้โดยใช้เครื่องมือตรวจสอบต่อไปนี้
- เครื่องมือตรวจสอบออนไลน์: https://skottie.skia.org/ ในส่วน "รายงานความเข้ากันได้" ไฟล์ต้องผ่านการทดสอบ "ข้อผิดพลาดในข้อกำหนด" "คำเตือนในข้อกำหนด" (โดยไม่สนใจพร็อพเพอร์ตี้ทั่วไป) และ "ข้อผิดพลาดในโปรไฟล์พลังงานต่ำ"
- ไลบรารีการตรวจสอบ Rust: https://github.com/google/lottie-tools
- โปรแกรมแสดงผลไทล์รองรับการเล่น Lottie โดยมีเวอร์ชันหลักอย่างน้อย
1
และเวอร์ชันย่อยอย่างน้อย500
หากภาพเคลื่อนไหวที่ระบุไม่ รองรับ ภาพเคลื่อนไหวจะไม่ปรากฏ แต่ส่วนที่เหลือของไทล์จะแสดงผลตามที่ คาดไว้ หากจำเป็น คุณสามารถระบุตัวเลือกสำรอง เช่น รูปภาพแบบคงที่ ได้
อย่าแสดงข้อมูลสำคัญตรงกลางภาพเคลื่อนไหว
ระบบจะปิดใช้ภาพเคลื่อนไหวในสถานการณ์ต่อไปนี้
- การแสดงผลไทล์ของระบบอาจปิดใช้ภาพเคลื่อนไหวสำหรับไทล์ทั้งหมด
- ไทล์จะเคลื่อนไหวได้ครั้งละ 4 องค์ประกอบเท่านั้น หากพยายามสร้างภาพเคลื่อนไหวให้กับองค์ประกอบมากกว่า 4 รายการพร้อมกัน องค์ประกอบบางรายการอาจไม่แสดงภาพเคลื่อนไหว
ในกรณีที่ปิดใช้ภาพเคลื่อนไหว องค์ประกอบจะคงที่และแสดงค่าสิ้นสุดของภาพเคลื่อนไหว ด้วยเหตุนี้ คุณจึงไม่ควรพึ่งพาพฤติกรรมของภาพเคลื่อนไหว เช่น ระยะเวลา เพื่อแสดงข้อมูลสำคัญ