【Harmony OS】【ARK UI】元件内轉場api 基本使用

參考資料 ​​https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-transition-animation-component-0000001119768666​​

說明

從 API Version 7 開始支援。後續版本如有新增内容，則采用上角标單獨标記該内容的起始版本。

元件轉場主要通過transition屬性進行配置轉場參數，在元件插入和删除時進行過渡動效，主要用于容器元件子元件插入删除時提升使用者體驗（需要配合animateTo才能生效，動效時長、曲線、延時跟随animateTo中的配置）。

屬性

名稱	參數類型	預設值	參數描述
transition	Object	-	所有參數均為可選參數，較長的描述見transition入參說明

transition入參說明

參數名稱	參數類型	預設值	必填	參數描述
type	TransitionType	All	否	預設包括元件新增和删除。說明不指定Type時說明插入删除使用同一種效果。
opacity	number	1	否	設定元件轉場時的透明度效果，為插入時起點和删除時終點的值。
translate	{x? : number,y? : number,z? : number}	-	否	設定元件轉場時的平移效果，為插入時起點和删除時終點的值。
scale	{x? : number,y? : number,z? : number,centerX? : number,centerY? : number}	-	否	設定元件轉場時的縮放效果，為插入時起點和删除時終點的值
rotate	{x?: number,y?: number,z?: number,angle?: Angle,centerX?: Length,centerY?: Length}	-	否	設定元件轉場時的旋轉效果，為插入時起點和删除時終點的值。

TransitionType枚舉說明

名稱	描述
All	指定目前的Transition動效生效在元件的所有變化場景。
Insert	指定目前的Transition動效生效在元件的插入場景。
Delete	指定目前的Transition動效生效在元件的删除場景。

示例

示例功能通過一個Button控制第二個Button的出現和消失，并通過transition配置第二個Button出現和消失的過場動畫。

@Entry
@Component
struct TransitionExample {
  @State btn1: boolean = false
  @State show: string = "show"
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,}) {
      Button(this.show).width(80).height(30).backgroundColor(0x317aff).margin({bottom:50})
        .onClick(() => {
          animateTo({ duration: 1000 }, () => {
            this.btn1 = !this.btn1
            if(this.btn1){
              this.show = "hide"
            }else{
              this.show = "show"
            }
          })
        })
       (this.btn1) {
        // 插入和删除配置為不同的過渡效果
        () {
          ($r('app.media.bg1')).("80%").(300)
        }.({ type: TransitionType.Insert, scale : {x:0,y:1.0} })
        .({ type: TransitionType.Delete, scale: { x: 1.0, y: 0.0 } })
      }
    }.(400).("100%").({top:100})
  }
}      

補充說明

scale 參數說

參數名	類型	必填	預設值	說明
x	number	否	1	x軸的縮放倍數。
y	number	否	1	y軸的縮放倍數。
z	number	否	1	z軸的縮放倍數。
centerX	number | string	否	變換中心點x軸坐标。
centerY	number | string	否	變換中心點y軸坐标。

scale : {x:0,y:1.0,centerX:100,centerY:250}描述 從該逐漸從x軸從無到有，y軸沒有擴充，從(100,250)點進去擴充

scale : {x:1,y:0,centerX:100,centerY:250}描述 從該逐漸從x軸沒有擴充，y從原有的高度變無 從(100,250)點進去擴充

translate 簡單實用

示例代碼

@Entry
@Component
struct TranslateExample {
  @State btn1: boolean = false
  @State myText:string="顯示"
  private onclick(){
    animateTo({ duration: 1000 }, () => {
      this.btn1 = !this.btn1
      if(this.btn1){
        this.myText = "隐藏"
      }else{
        this.myText = "顯示"
      }
    })
  }
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,}) {
      Text(this.myText)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      .onClick(this.onclick.bind(this))

      if (this.btn1) {
        // 插入和删除配置為不同的過渡效果
        Button() {
          Image($r('app.media.bg1')).width(300).height(300)
        }
        .transition({ type: TransitionType.Insert, translate : {x:400,y:400,z:100} })
        .transition({ type: TransitionType.Delete, translate: { x: 300, y: 200 ,z:230} })
      }

    }
    .width('100%')
    .height('100%')
  }
}      

運作效果

總結：transition({ type: TransitionType.Insert, translate : {x:400,y:400,z:100} })的意思

進場的時候從x軸400 y軸400 z軸100 平移到x軸0 y軸 z軸0的位置 （就是自身的位置）

transition({ type: TransitionType.Delete, translate: { x: 300, y: 200 ,z:230} })的意思

當type為TransitionType.Delete的時候，退場就是從x軸0y軸0 z周0 平移到 x軸300 y軸300 z軸230的坐标消失

rotate簡單實用

rotate參數說明

參數名	類型	必填	預設值	說明
x	number	否	旋轉向量
y	number	否	旋轉向量
z	number	否	旋轉向量
centerX	number | string	否	不填的話預設是該元件的中心點	旋轉x軸的中心點
centerY	number | string	否	不填的話預設是該元件的中心點	旋轉Y軸的中心點
angle	number | string	否	旋轉角度

示例代碼

@Entry
@Component
struct RotateExample {
  @State ImageShow: boolean = false//Image 是否顯示
  @State show: string = "show"
  build() {
    Column() {
      Button(this.show).width(80).height(30).backgroundColor(Color.Red).margin({bottom:50})
        .onClick(() => {
          animateTo({ duration: 5000 }, () => {
            this.ImageShow = !this.ImageShow
            if(this.ImageShow){
              this.show = "hide"
            }else{
              this.show = "show"
            }
          })
        })
       (this.ImageShow) {
        // 插入和删除配置為不同的過渡效果
          ($r('app.media.icon')).("80%").(300)

        .({ type: TransitionType.Delete,
          rotate: { x: 0, y: 0 ,z:1, angle:270,centerX:0,centerY:0} //從（0，0，1）順時針旋轉270度
        })
            .({
              type: TransitionType.Insert,
              // todo 從（0,0 ，-1） 從逆時針90度開始旋轉到原始的位置
              rotate : {x: 0, y: 0, z:-1,angle:90 ,centerX:0, centerY:0}
            })
      }
    }.(400).("100%").({top:100})
  }
}      

如下圖所示，我們使用是左手，不是右手切記

效果如下

總結