1 概述

屬性動(dòng)畫，是最為基礎(chǔ)的動(dòng)畫，其功能強(qiáng)大、使用場景多，應(yīng)用范圍較廣。常用于如下場景中：

• 一、頁面布局發(fā)生變化。例如添加、刪除部分組件元素。
• 二、頁面元素的可見性和位置發(fā)生變化。例如顯示或者隱藏部分元素，或者將部分元素從一端移動(dòng)到另外一端。
• 三、頁面中圖形圖片元素動(dòng)起來。例如使頁面中的靜態(tài)圖片動(dòng)起來。

簡單來說，屬性動(dòng)畫是組件的通用屬性發(fā)生改變時(shí)而產(chǎn)生的屬性漸變效果。如下圖所示，其原理是，當(dāng)組件的通用屬性發(fā)生改變時(shí)，組件狀態(tài)由初始狀態(tài)逐漸變?yōu)榻Y(jié)束狀態(tài)的過程中，會(huì)創(chuàng)建多個(gè)連續(xù)的中間狀態(tài)，逐幀播放后，就會(huì)形成屬性漸變效果，從而形成動(dòng)畫。

屬性動(dòng)畫的使用方式也非常簡單，只需要給組件（包括基礎(chǔ)組件和容器組件）添加animation屬性，并設(shè)置好參數(shù)，如下代碼所示：

Image($r('app.media.image1'))   
   .animation({   
      duration: 1000,    
      tempo: 1.0,    
      delay: 0,    
      curve: Curve.Linear,    
      playMode: PlayMode.Normal,    
      iterations: 1  
   })

2 創(chuàng)建屬性動(dòng)畫頁面

如下圖所示，在該下拉刷新動(dòng)畫場景中，一共有6個(gè)屬性動(dòng)畫。頭部中的五個(gè)圖標(biāo)的移動(dòng)放大動(dòng)畫中，每個(gè)圖標(biāo)都是單獨(dú)的一個(gè)動(dòng)畫，其共同組合成一個(gè)刷新等待動(dòng)畫。最后是下方組件上移的一個(gè)移動(dòng)動(dòng)畫。為方便理解，圖中下方的內(nèi)容將以圖片來代替實(shí)際應(yīng)用的功能頁面。

圖2-1 ：示例動(dòng)畫

該6個(gè)屬性動(dòng)畫創(chuàng)建方式類似，以五個(gè)圖標(biāo)放大移動(dòng)動(dòng)畫的為例來講解如何創(chuàng)建屬性動(dòng)畫。

首先，創(chuàng)建一個(gè)頭部刷新組件RefreshAnimHeader，在其中自定義一個(gè)圖標(biāo)組件AttrAnimIcons，用Image組件將資源圖標(biāo)引入，并設(shè)置好樣式，如下所示：

@Component
export default struct RefreshAnimHeader {
  ...
  @Builder AttrAnimIcons(iconItem) {  
    Image(iconItem.imgRes)    
      .width(this.iconWidth)    
      .position({ x: iconItem.posX })    
      .objectFit(ImageFit.Contain)    
      .animation({      
        duration: 2000,      
        tempo: 3.0,      
        delay: iconItem.delay,      
        curve: Curve.Linear,      
        playMode: PlayMode.Alternate,      
        iterations: -1
     })
  }
  ...
}

然后在build方法中使用Row容器組件，將自定義的圖標(biāo)組件引入，并設(shè)置好樣式，同時(shí)定義組件狀態(tài)iconWidth，添加onApper事件，修改iconWidth的值，使其從30變?yōu)?00，觸發(fā)UI狀態(tài)更新。

@Component
export default struct RefreshAnimHeader {
  ...
  @State iconWidth: number = 30;
  private onStateCheck() {  
    if (this.state === RefreshState.REFRESHING) {    
      this.iconWidth = 100;  
    } else {    
      this.iconWidth = 30;  
    }
  }
  build() {  
    Row() {    
      ForEach(CommonConstants.REFRESH_HEADER_FEATURE, (iconItem) = > {     
        this.AttrAnimIcons(iconItem)    
      }, item = > item.toString())  
    }  
     .width("100%")  
     .height("100%")  
     .onAppear(() = > {    
       this.onStateCheck();
     })
  }
}

運(yùn)行代碼，即可看到五個(gè)圖標(biāo)的移動(dòng)放大動(dòng)畫效果。

1、animation屬性作用域。animation自身也是組件的一個(gè)屬性，其作用域?yàn)閍nimation之前。即產(chǎn)生屬性動(dòng)畫的屬性須在animation之前聲明，其后聲明的將不會(huì)產(chǎn)生屬性動(dòng)畫。以示例中的五個(gè)圖標(biāo)動(dòng)畫為例，我們期望產(chǎn)生動(dòng)畫的屬性為Image組件的width屬性，故該屬性width需在animation屬性之前聲明。如果將該屬性width在animation之后聲明，則不會(huì)產(chǎn)生動(dòng)畫效果。

2、產(chǎn)生屬性動(dòng)畫的屬性變化時(shí)需觸發(fā)UI狀態(tài)更新。在本示例中，產(chǎn)生動(dòng)畫的屬性width，其值是通過變量iconWidth從30變?yōu)?00，故該變量iconWidth的改變需觸發(fā)UI狀態(tài)更新。

3、產(chǎn)生屬性動(dòng)畫的屬性本身需滿足一定的要求，并非任何屬性都可以產(chǎn)生屬性動(dòng)畫。目前支持的屬性包括width、height、position、opacity、backgroundColor、scale、rotate、translate等

3 屬性動(dòng)畫參數(shù)調(diào)整

屬性動(dòng)畫中animation的參數(shù)如下：

其中變化曲線curve枚舉值為：

播放模式playMode枚舉值為：

本文以參數(shù)delay和onFinish為例來演示和講解屬性動(dòng)畫的參數(shù)調(diào)整。其他參數(shù)的效果可自行嘗試。

延時(shí)播放時(shí)間delay的設(shè)置

在單個(gè)的組件元素的屬性動(dòng)畫中，一般不設(shè)置參數(shù)delay的值。而在需要設(shè)置時(shí)，往往是需要在動(dòng)畫開始前做一些準(zhǔn)備工作，具體依場景而定，本文在此不討論。

在由多個(gè)組件元素的屬性動(dòng)畫組合的動(dòng)畫中，例如示例動(dòng)畫中的五個(gè)圖標(biāo)的屬性動(dòng)畫組合而成的刷新等待動(dòng)畫，通過設(shè)置參數(shù)delay的值，可以使各個(gè)組件元素之間按照一定的秩序依次播放，形成跌宕起伏、鱗次櫛比的動(dòng)畫效果。在此場景中，該值的大小又與duration相關(guān)聯(lián)。

該如何設(shè)置各個(gè)圖標(biāo)的參數(shù)delay的值呢？

在設(shè)置delay值之前，我們先理解一個(gè)概念：延時(shí)間距。其意思是兩個(gè)圖標(biāo)組件的延時(shí)參數(shù)delay的差值，即：delay2-delay1=延時(shí)間距。要想實(shí)現(xiàn)五個(gè)圖標(biāo)之間以良好的秩序先后移動(dòng)放大，各個(gè)圖標(biāo)之間的延時(shí)間距是一樣的，例如延時(shí)間距為100ms時(shí)，此五個(gè)圖標(biāo)的延時(shí)delay可以分別設(shè)置為100ms、200ms、300ms、400ms、500ms。

在實(shí)際開發(fā)場景中，我們該如何確定延時(shí)間距呢？

在此有個(gè)經(jīng)驗(yàn)可以參考：在延時(shí)間距不超過動(dòng)畫時(shí)長duration時(shí)，總延時(shí)間距越接近duration，秩序性越好。其中，總延時(shí)間距為延時(shí)間距與圖標(biāo)數(shù)量的乘積，即：延時(shí)間距*圖標(biāo)數(shù)量=總延時(shí)間距。

故此，我們在設(shè)置參數(shù)delay時(shí)，需要確定動(dòng)畫時(shí)長duration的值。該值默認(rèn)為1000ms，具體時(shí)長可依據(jù)具體的業(yè)務(wù)需要來決定。

在本示例動(dòng)畫中，圖標(biāo)動(dòng)畫時(shí)長duration為2000ms，故延時(shí)間距為2000ms/5=400ms，五個(gè)圖標(biāo)的延時(shí)參數(shù)delay可分別設(shè)置為400ms、800ms、1200ms、1600ms、2000ms。其效果如示例圖所示，圖標(biāo)先后秩序明顯，視覺效果良好。

onFinish回調(diào)函數(shù)的使用

參數(shù)onFinish與參數(shù)iterations有關(guān)。當(dāng)參數(shù)iterations播放結(jié)束時(shí)，會(huì)調(diào)用onFinish函數(shù)來進(jìn)行后續(xù)的業(yè)務(wù)處理。例如提示動(dòng)畫播放結(jié)束。

Image(iconItem.imgRes)
  .width(this.iconWidth)
  .position({ x: iconItem.posX })
  .objectFit(ImageFit.Contain)
  .animation({
    duration: 2000,
    tempo: 3.0,
    delay: iconItem.delay,
    curve: Curve.Linear,
    playMode: PlayMode.Normal,
    iterations: 1,
    onFinish: () = > {      
      prompt.showToast({ message:"動(dòng)畫播放結(jié)束?。?！" })
    }
  })

當(dāng)iterations設(shè)置為-1時(shí)，表示無限次播放，則onFinish回調(diào)函數(shù)不會(huì)被調(diào)用。

4 關(guān)閉屬性動(dòng)畫頁面

此處需要將關(guān)閉屬性動(dòng)畫區(qū)別開來：

• 屬性動(dòng)畫關(guān)閉，是指動(dòng)畫播放結(jié)束，但是動(dòng)畫組件依然存在并顯示在頁面上。
• 關(guān)閉屬性動(dòng)畫頁面，是指將動(dòng)畫的組件刪除或者隱藏起來。

在本示例動(dòng)畫中，指將頭部刷新組件RefreshAnimHeader隱藏起來。該如何實(shí)現(xiàn)呢？

首先，在組件RefreshAnimHeader中添加變量state，并用@Consume監(jiān)聽其值的變化，同時(shí)添加條件渲染邏輯，根據(jù)state的值來判斷是否需要關(guān)閉。當(dāng)state變?yōu)镮DLE狀態(tài)時(shí)，表示需要關(guān)閉屬性動(dòng)畫頁面。

@Component
export default struct RefreshAnimHeader {  
  @Consume(RefreshConstants.REFRESH_STATE_TAG) @Watch('onStateCheck') state: RefreshState;
  build() {
    Row() {
      if (this.state !== RefreshState.IDLE) { // start or stop animation when idle state.
        ForEach(CommonConstants.REFRESH_HEADER_FEATURE, (iconItem) = > {
          this.AttrAnimIcons(iconItem)
        }, item = > item.toString()}
      }
    }
    .width(CommonConstants.FULL_LENGTH)
    .height(CommonConstants.FULL_LENGTH)
    .onAppear(() = > {
      this.onStateCheck();
    })
  }
}

其次，在本示例中，通過下方圖片的上移屬性動(dòng)畫來關(guān)閉刷新組件RefreshAnimHeader。在組件RefreshComponent中，通過@Consume與組件RefreshAnimHeader的@Consume進(jìn)行間接綁定，修改state變量的值為IDLE狀態(tài)即可關(guān)閉屬性動(dòng)畫頁面。

@Component
export default struct RefreshComponent {
  @Consume(RefreshConstants.REFRESH_STATE_TAG) @Watch('onStateChanged') state: RefreshState;
  build() {
    List({ scroller: this.listController }) {
      ListItem() {
         ...
      }
  }  
  .animation({
    curve: Curve.Smooth,
    duration: RefreshConstants.REFRESH_HEADER_ANIM_DURATION,
    playMode: PlayMode.Normal,
    onFinish: () = > {
      if (this.headerOffset === -RefreshConstants.REFRESH_HEADER_HEIGHT) {
        this.state = RefreshState.IDLE;
      }
    }
  })
}

審核編輯 黃宇