組件內(nèi)轉(zhuǎn)場動畫

組件的插入、刪除過程即為組件本身的轉(zhuǎn)場過程，組件的插入、刪除動畫稱為組件內(nèi)轉(zhuǎn)場動畫。通過組件內(nèi)轉(zhuǎn)場動畫，可定義組件出現(xiàn)、消失的效果。

組件內(nèi)轉(zhuǎn)場動畫的接口為：

transition(value: TransitionOptions)

transition函數(shù)的入?yún)榻M件內(nèi)轉(zhuǎn)場的效果，可以定義平移、透明度、旋轉(zhuǎn)、縮放這幾種轉(zhuǎn)場樣式的單個或者組合的轉(zhuǎn)場效果，必須和animateTo一起使用才能產(chǎn)生組件轉(zhuǎn)場效果。

• 組件的插入、刪除使用不同的動畫效果

  Button()
    .transition({ type: TransitionType.Insert, translate: { x: 200, y: -200 }, opacity: 0 })
    .transition({ type: TransitionType.Delete, rotate: { x: 0, y: 0, z: 1, angle: 360 } })

  當組件的插入和刪除需要實現(xiàn)不同的轉(zhuǎn)場動畫效果時，可以調(diào)用兩次transition函數(shù)，分別設置type屬性為TransitionType.Insert和TransitionType.Delete。例如，以上代碼定義了一個Button控件。在插入時，組件從相對于組件正常布局位置x方向平移200vp、y方向平移-200vp的位置、透明度為0的初始狀態(tài)，變化到x、y方向平移量為0、透明度為1的默認狀態(tài)，插入動畫為平移動畫和透明度動畫的組合。在刪除時，組件從旋轉(zhuǎn)角為0的默認狀態(tài)，變化到繞z軸旋轉(zhuǎn)360度的終止狀態(tài)，即繞z軸旋轉(zhuǎn)一周。

• 只定義組件的插入或刪除其中一種動畫效果。

  Button()
    .transition({ type: TransitionType.Delete, translate: { x: 200, y: -200 } })

  當只需要組件的插入或刪除的轉(zhuǎn)場動畫效果時，僅需設置type屬性為TransitionType.Insert或TransitionType.Delete的transition效果。例如，以上代碼定義了一個Button控件。刪除時，組件從正常位置、沒有平移的默認狀態(tài)，變化到從相對于正常布局位置x方向平移200vp、y方向平移-200vp的位置的狀態(tài)。插入該組件并不會產(chǎn)生該組件的轉(zhuǎn)場動畫。

@Entry
@Component
struct IfElseTransition {
  @State flag: boolean = true;
  @State show: string = 'show';

  build() {
    Column() {
      Button(this.show).width(80).height(30).margin(30)
        .onClick(() => {
          if (this.flag) {
            this.show = 'hide';
          } else {
            this.show = 'show';
          }
          // 點擊Button控制Image的顯示和消失
          this.flag = !this.flag;
        })
      if (this.flag) {
          Image($r('app.media.mountain')).width(200).height(200)
      }
    }.height('100%').width('100%')
  }
}

以上代碼沒有配置任何動畫。接下來，我們將給以上代碼加入組件內(nèi)轉(zhuǎn)場的效果。首先Image組件是由if控制的組件，需要給其加上transition的參數(shù)，以指定組件內(nèi)轉(zhuǎn)場的具體效果。例如，可以如以下代碼，給其插入時加上平移效果，刪除時加上縮放和透明度效果。

if (this.flag) {
  Image($r('app.media.mountain')).width(200).height(200)
    .transition({ type: TransitionType.Insert, translate: { x: 200, y: -200 } })
    .transition({ type: TransitionType.Delete, opacity: 0, scale: { x: 0, y: 0 } })
}

以上代碼雖然指定了動畫的樣式，但是未指定動畫參數(shù)，尚不知道需要用多長時間、怎樣的曲線完成該動畫。transition必須配合animateTo一起使用，并在animateTo的閉包中，控制組件的插入、刪除。對于以上示例代碼，即為在animateTo閉包中改變flag的值，該部分代碼如下所示。指定動畫時長為1000ms，曲線使用animateTo函數(shù)默認的曲線，改變flag的值。則由flag變化所引起的一切變化，都會按照該動畫參數(shù)，產(chǎn)生動畫。在這里，flag會影響Image的出現(xiàn)和消失。

animateTo({ duration: 1000 }, () => {
  this.flag = !this.flag;
})

經(jīng)過以上過程，當animateTo和transition一起使用時，即產(chǎn)生了組件內(nèi)轉(zhuǎn)場動畫。完整示例代碼如下：

@Entry
@Component
struct IfElseTransition {
  @State flag: boolean = true;
  @State show: string = 'show';

  build() {
    Column() {
      Button(this.show).width(80).height(30).margin(30)
        .onClick(() => {
          if (this.flag) {
            this.show = 'hide';
          } else {
            this.show = 'show';
          }
          
          animateTo({ duration: 1000 }, () => {
            // 動畫閉包內(nèi)控制Image組件的出現(xiàn)和消失
            this.flag = !this.flag;
          })
        })
      if (this.flag) {
        // Image的出現(xiàn)和消失配置為不同的過渡效果
        Image($r('app.media.mountain')).width(200).height(200)
          .transition({ type: TransitionType.Insert, translate: { x: 200, y: -200 } })
          .transition({ type: TransitionType.Delete, opacity: 0, scale: { x: 0, y: 0 } })
      }
    }.height('100%').width('100%')
  }
}

以下代碼是使用ForEach產(chǎn)生組件內(nèi)轉(zhuǎn)場動畫的一個示例。

@Entry
@Component
struct ForEachTransition {
  @State numbers: string[] = ["1", "2", "3", "4", "5"]
  startNumber: number = 6;

  build() {
    Column({ space: 10 }) {
      Column() {
        ForEach(this.numbers, (item) => {
          // ForEach下的直接組件需配置transition效果
          Text(item)
            .width(240)
            .height(60)
            .fontSize(18)
            .borderWidth(1)
            .backgroundColor(Color.Orange)
            .textAlign(TextAlign.Center)
            .transition({ type: TransitionType.All, translate: { x: 200 }, scale: { x: 0, y: 0 } })
        }, item => item)
      }
      .margin(10)
      .justifyContent(FlexAlign.Start)
      .alignItems(HorizontalAlign.Center)
      .width("90%")
      .height("70%")

      Button('向頭部添加元素')
        .fontSize(16)
        .width(160)
        .onClick(() => {
          animateTo({ duration: 1000 }, () => {
            // 往數(shù)組頭部插入一個元素，導致ForEach在頭部增加對應的組件
            this.numbers.unshift(this.startNumber.toString());
            this.startNumber++;
          })
        })
      Button('向尾部添加元素')
        .width(160)
        .fontSize(16)
        .onClick(() => {
          animateTo({ duration: 1000 }, () => {
            // 往數(shù)組尾部插入一個元素，導致ForEach在尾部增加對應的組件
            this.numbers.push(this.startNumber.toString());
            this.startNumber++;
          })
        })
      Button('刪除頭部元素')
        .width(160)
        .fontSize(16)
        .onClick(() => {
          animateTo({ duration: 1000 }, () => {
            // 刪除數(shù)組的頭部元素，導致ForEach刪除頭部的組件
            this.numbers.shift();
          })
        })
      Button('刪除尾部元素')
        .width(160)
        .fontSize(16)
        .onClick(() => {
          animateTo({ duration: 1000 }, () => {
            // 刪除數(shù)組的尾部元素，導致ForEach刪除尾部的組件
            this.numbers.pop();
          })
        })
    }
    .width('100%')
    .height('100%')
  }
}

效果如下圖：

由于Column布局方式設為了FlexAlign.Start，即豎直方向從頭部開始布局。所以往數(shù)組末尾添加元素時，并不會對數(shù)組中現(xiàn)存元素對應的組件位置造成影響，只會觸發(fā)新增組件的插入動畫。而往數(shù)組頭部添加元素時，原來數(shù)組中的所有元素的下標都增加了，雖然不會觸發(fā)其添加或者刪除，但是會影響到對應組件的位置。所以除新增的組件會做transition動畫以外，之前存在于ForEach中組件也會做位置動畫。