【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"
            }
          })
        })
      if (this.btn1) {
        // 插入和刪除配置爲不同的過渡效果
        Button() {
          Image($r('app.media.bg1')).width("80%").height(300)
        }.transition({ type: TransitionType.Insert, scale : {x:0,y:1.0} })
        .transition({ type: TransitionType.Delete, scale: { x: 1.0, y: 0.0 } })
      }
    }.height(400).width("100%").padding({top:100})
  }
}

​

補充說明

scale 參數說

參數名	類型	必填	默認值	說明
x	number	否	1	x軸的縮放倍數。
y	number	否	1	y軸的縮放倍數。
z	number	否	1	z軸的縮放倍數。
centerX	number | string	否	0	變換中心點x軸座標。
centerY	number | string	否	0	變換中心點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	否	0	旋轉向量
y	number	否	0	旋轉向量
z	number	否	0	旋轉向量
centerX	number | string	否	不填的話默認是該組件的中心點	旋轉x軸的中心點
centerY	number | string	否	不填的話默認是該組件的中心點	旋轉Y軸的中心點
angle	number | string	否	0	旋轉角度

示例代碼

@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"
            }
          })
        })
      if (this.ImageShow) {
        // 插入和刪除配置爲不同的過渡效果
          Image($r('app.media.icon')).width("80%").height(300)

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

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

​

效果如下

​

總結

如上圖安培定律所示左手大拇指的方向就是z的方向（0，0,-1）安裝當前的桌面水平向右爲x軸正方向水平向下爲y軸正方向，z軸負方向就是大拇指向量，左手大拇指的方式是面向手機屏幕背面的，我們可以發現四指握旋方向是逆時針，

rotate : {x: 0, y: 0, z:-1,angle:90 ,centerX:0, centerY:0} ，其中90度，那就是從順時針90運動原始的位置

rotate: { x: 0, y: 0 ,z:1, angle:270,centerX:0,centerY:0} （0，0，1）同樣的道理，左手大拇指的方向是面向屏幕的方向的，此時四指握旋方向是順時針，然後在旋轉270後消失

​