1 概述

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

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

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

屬性動畫的使用方式也非常簡單，只需要給組件（包括基礎(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)建屬性動畫頁面

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

圖2-1 ：示例動畫

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

首先，創(chuàng)建一個頭部刷新組件RefreshAnimHeader，在其中自定義一個圖標(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è)置好樣式，同時定義組件狀態(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)行代碼，即可看到五個圖標(biāo)的移動放大動畫效果。

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

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

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

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

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

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

播放模式playMode枚舉值為：

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

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

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

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

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

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

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

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

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

在本示例動畫中，圖標(biāo)動畫時長duration為2000ms，故延時間距為2000ms/5=400ms，五個圖標(biāo)的延時參數(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é)束時，會調(diào)用onFinish函數(shù)來進(jìn)行后續(xù)的業(yè)務(wù)處理。例如提示動畫播放結(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:"動畫播放結(jié)束?。?！" })
    }
  })

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

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

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

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

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

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

@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();
    })
  }
}

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

@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;
      }
    }
  })
}

審核編輯 黃宇