閱讀(764) 書簽贊(0) 我要糾錯(cuò)

組件內(nèi)轉(zhuǎn)場(chǎng)

2024-01-22 18:18 更新

組件內(nèi)轉(zhuǎn)場(chǎng)主要通過(guò)transition屬性配置轉(zhuǎn)場(chǎng)參數(shù)，在組件插入和刪除時(shí)顯示過(guò)渡動(dòng)效，主要用于容器組件中的子組件插入和刪除時(shí)，提升用戶體驗(yàn)（需要配合animateTo才能生效，動(dòng)效時(shí)長(zhǎng)、曲線、延時(shí)跟隨animateTo中的配置）。

說(shuō)明

從API Version 7開(kāi)始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

屬性

名稱	參數(shù)類型	參數(shù)描述
transition	TransitionOptions	設(shè)置組件插入顯示和刪除隱藏的過(guò)渡效果。默認(rèn)值：不設(shè)置任何過(guò)渡效果時(shí)，默認(rèn)有透明度從0到1的過(guò)渡效果。若設(shè)置了其他過(guò)渡效果，以設(shè)置的過(guò)渡效果為準(zhǔn)。說(shuō)明：所有參數(shù)均為可選參數(shù)，詳細(xì)描述見(jiàn)TransitionOptions參數(shù)說(shuō)明。

名稱

參數(shù)類型

參數(shù)描述

transition

TransitionOptions

設(shè)置組件插入顯示和刪除隱藏的過(guò)渡效果。

默認(rèn)值：不設(shè)置任何過(guò)渡效果時(shí)，默認(rèn)有透明度從0到1的過(guò)渡效果。若設(shè)置了其他過(guò)渡效果，以設(shè)置的過(guò)渡效果為準(zhǔn)。

說(shuō)明：

所有參數(shù)均為可選參數(shù)，詳細(xì)描述見(jiàn)TransitionOptions參數(shù)說(shuō)明。

TransitionOptions參數(shù)說(shuō)明

參數(shù)名稱	參數(shù)類型	必填	參數(shù)描述
type	TransitionType	否	默認(rèn)包括組件新增和刪除。默認(rèn)值：TransitionType.All 說(shuō)明：不指定Type時(shí)說(shuō)明插入刪除使用同一種效果。
opacity	number	否	設(shè)置組件轉(zhuǎn)場(chǎng)時(shí)的透明度效果，為插入時(shí)起點(diǎn)和刪除時(shí)終點(diǎn)的值。默認(rèn)值：1 取值范圍： [0, 1] 說(shuō)明：設(shè)置小于0或大于1的非法值時(shí)，按1處理。
translate	{ x? : number \| string, y? : number \| string, z? : number \| string }	否	設(shè)置組件轉(zhuǎn)場(chǎng)時(shí)的平移效果，為插入時(shí)起點(diǎn)和刪除時(shí)終點(diǎn)的值。 -x：橫向的平移距離。 -y：縱向的平移距離。 -z：豎向的平移距離。
scale	{ x? : number, y? : number, z? : number, centerX? : number \| string, centerY? : number \| string }	否	設(shè)置組件轉(zhuǎn)場(chǎng)時(shí)的縮放效果，為插入時(shí)起點(diǎn)和刪除時(shí)終點(diǎn)的值。 -x：橫向放大倍數(shù)（或縮小比例）。 -y：縱向放大倍數(shù)（或縮小比例）。 -z：當(dāng)前為二維顯示，該參數(shù)無(wú)效。 - centerX、centerY指縮放中心點(diǎn)，centerX和centerY默認(rèn)值是"50%"。 - 中心點(diǎn)為0時(shí)，默認(rèn)的是組件的左上角。
rotate	{ x?: number, y?: number, z?: number, angle: number \| string, centerX?: number \| string, centerY?: number \| string }	否	設(shè)置組件轉(zhuǎn)場(chǎng)時(shí)的旋轉(zhuǎn)效果，為插入時(shí)起點(diǎn)和刪除時(shí)終點(diǎn)的值。 -x：橫向的旋轉(zhuǎn)向量。 -y：縱向的旋轉(zhuǎn)向量。 -z：豎向的旋轉(zhuǎn)向量。 - centerX,centerY指旋轉(zhuǎn)中心點(diǎn)，centerX和centerY默認(rèn)值是"50%"。 - 中心點(diǎn)為（0，0）時(shí)，默認(rèn)的是組件的左上角。

示例


// xxx.ets
@Entry
@Component
struct TransitionExample {
  @State flag: boolean = true
  @State show: string = 'show'

  build() {
    Column() {
      Button(this.show).width(80).height(30).margin(30)
        .onClick(() => {
          // 點(diǎn)擊Button控制Image的顯示和消失
          animateTo({ duration: 1000 }, () => {
            if (this.flag) {
              this.show = 'hide'
            } else {
              this.show = 'show'
            }
            this.flag = !this.flag
          })
        })
      if (this.flag) {
        // Image的顯示和消失配置為不同的過(guò)渡效果
        Image($r('app.media.testImg')).width(300).height(300)
          .transition({ type: TransitionType.Insert, scale: { x: 0, y: 1.0 } })
          .transition({ type: TransitionType.Delete, rotate: { angle: 180 } })
      }
    }.width('100%')
  }
}