介紹

主要介紹組件動畫animation屬性設置。當組件的某些通用屬性變化時，可以通過屬性動畫實現漸變效果，提升用戶體驗。效果如圖所示：

說明： 本Codelab使用的display接口處于mock階段，在預覽器上使用會顯示白屏現象，可選擇在真機或模擬器上運行。

相關概念

• [屬性動畫]：組件的某些通用屬性變化時，可以通過屬性動畫實現漸變效果，提升用戶體驗。支持的屬性包括width、height、backgroundColor、opacity、scale、rotate、translate等。案例中自定義頭部組件的屬性動畫設置主要涉及duration(動畫時長)、tempo(動畫速率)、delay(動畫延時)、curve(動畫曲線)、palyMode(動畫模式)和iterations（動畫播放次數）。

環境搭建

軟件要求

• [DevEco Studio]版本：DevEco Studio 3.1 Release。
• OpenHarmony SDK版本：API version 9。

硬件要求

• 開發板類型：[潤和RK3568開發板]。
• OpenHarmony系統：3.2 Release。

環境搭建

完成本篇Codelab我們首先要完成開發環境的搭建，本示例以RK3568開發板為例，參照以下步驟進行：

1. [獲取OpenHarmony系統版本]：標準系統解決方案（二進制）。以3.2 Release版本為例：
   
2. 搭建燒錄環境。
   1. [完成DevEco Device Tool的安裝]
   2. [完成RK3568開發板的燒錄]
3. 搭建開發環境。
   1. 開始前請參考[工具準備]，完成DevEco Studio的安裝和開發環境配置。
   2. 開發環境配置完成后，請參考[使用工程向導]創建工程（模板選擇“Empty Ability”）。
   3. 工程創建完成后，選擇使用[真機進行調測]。
   4. 鴻蒙開發指導文檔：[qr23.cn/FBD4cY]

代碼結構解讀

本篇Codelab只對核心代碼進行講解，完整代碼可以直接從gitee獲取。

├──entry/src/main/ets                      // 代碼區           
│  ├──common
│  │  ├──constants                     
│  │  │  ├──CommonConstants.ets            // 公共常量類
│  │  │  └──RefreshConstants.ets           // 下拉刷新常量類
│  │  └──utils                 
│  │     ├──DimensionUtil.ets              // 屏幕適配工具類
│  │     └──GlobalContext.ets              // 全局上下文工具類
│  ├──entryability
│  │  └──EntryAbility.ts                   // 程序入口類
│  ├──pages
│  │  ├──FileManagerIndex.ets              // 文件管理Tab頁
│  │  └──TabIndex.ets                      // Tab管理頁
│  ├──view
│  │  ├──RefreshAnimHeader.ets             // 動畫刷新組件
│  │  ├──RefreshComponent.ets              // 下拉刷新組件
│  │  └──RefreshDefaultHeader.ets          // 默認刷新組件
│  └──viewmodel
│     ├──AnimationModel.ets                // 動畫封裝模型
│     └──CardModel.ets                     // 頁簽封裝模型
└──entry/src/main/resources                // 資源文件目錄

`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

自定義下拉組件

自定義下拉刷新通過自定義List組件RefreshComponent實現。在List容器中添加自定義刷新頭部組件和其它的需要刷新部件，RefreshComponent提供了頭部樣式設置，刷新部件樣式設置和刷新回調方法設置。

// FileManagerIndex.ets
RefreshComponent({
  headerStyle: RefreshHeaderStyle.CLOUD, // 頭部樣式設置
  itemLayout: () = > this.ContentBody(), // 刷新部件樣式
  displayHeight: (
    px2vp(this.deviceDisplay.height) - DimensionUtil.getVp($r('app.float.file_index_title_height'))),
  onRefresh: () = > { // 刷新回調方法
    ......
  }
})

• 頭部樣式設置
  本Codelab提供了DEFAULT默認刷新樣式和CLOUD云朵動畫刷新樣式設置，在RefreshComponent組件初始化時，判斷當前刷新樣式進行渲染。

  // RefreshComponent.ets
  if (this.headerStyle === RefreshHeaderStyle.DEFAULT) {
    RefreshDefaultHeader().height(RefreshConstants.REFRESH_HEADER_HEIGHT)
  } else if (this.headerStyle === RefreshHeaderStyle.CLOUD) {
    RefreshAnimHeader().height(RefreshConstants.REFRESH_HEADER_HEIGHT)
  }
  

• 刷新部件樣式
  刷新部件樣式itemLayout為嵌入RefreshComponent組件中的元素，通過@BuilderParam裝飾符定義，可根據具體業務需求，當前為默認的Image組件樣式。

  // FileManagerIndex.ets
  @Builder ContentBody() {
    Image($r('app.media.bg_content'))
      .width(CommonConstants.FULL_LENGTH)
      .height(DimensionUtil.getVp($r('app.float.content_height')))
      .objectFit(ImageFit.Fill)
  }
  

• 刷新回調方法設置
  刷新回調方法是RefreshComponent提供的當下拉一定范圍距離松手后，調用頁面刷新的方法。實現步驟是：
  1.設置RefreshComponent刷新組件state狀態的更新。

  // RefreshComponent.ets
  @Consume(RefreshConstants.REFRESH_STATE_TAG) @Watch('onStateChanged') state: RefreshState;
  @BuilderParam itemLayout: () = > void;
  
  private onStateChanged() {
    switch (this.state) {
      case RefreshState.REFRESHING:
        if (this.onRefresh) {
          this.onRefresh();
        }
        break;
      ......
    }
  }
  

  2.監聽RefreshComponent組件的觸摸事件，當手指松開且List組件下拉距離超出可刷新距離時，修改當前狀態為REFRESHING，回調“onStateChanged”方法觸發外部傳入的onRefresh事件。

  // RefreshComponent.ets
  case TouchType.Move:
    if (this.state === RefreshState.DRAGGING
    && this.listController.currentOffset().yOffset <= -RefreshConstants.REFRESH_EFFECTIVE_HEIGHT) {
      this.state = RefreshState.DRAGGING_REFRESHABLE;
    }
    break;
  case TouchType.Up:
    if (this.state === RefreshState.DRAGGING_REFRESHABLE) {
      this.headerOffset = 0;
      this.state = RefreshState.REFRESHING;
    }
    break;
  

  3.本Codelab中onRefresh事件沒有做相關刷新動作，只做了模擬延時操作，開發者可以自行加入真實網絡加載動作。

  // RefreshComponent.ets
  onRefresh: () = > {
    setTimeout(() = > {
      this.state = RefreshState.COMPLETE;
    }, CommonConstants.REFRESH_DEFAULT_TIMEOUT);
  }
  

自定義刷新動畫

本Codelab中自定義刷新是5個圖片的組合動畫效果。

1. 每個Image通過iconItem參數分別設置各自的x軸偏移量和延時播放的屬性動畫效果。

   // RefreshAnimHeader.ets
   @Builder AttrAnimIcons(iconItem: ClassifyModel) {
     Image(iconItem.imgRes)
       .width(px2vp(DimensionUtil.adaptDimension(this.iconWidth)))
       .position({ x: iconItem.posX })
       .objectFit(ImageFit.Contain)
       .animation({
         duration: CommonConstants.REFRESH_HEADER_ITEM_ANIM_DURATION,
         tempo: CommonConstants.REFRESH_HEADER_ITEM_ANIM_TEMPO,
         delay: iconItem.delay,
         curve: Curve.Linear,
         playMode: PlayMode.Alternate,
         iterations: CommonConstants.REFRESH_HEADER_ITEM_ANIM_ITERATIONS
       })
   }
   

2. 監聽RefreshComponent刷新組件state狀態的變化，當前狀態為REFRESHING狀態時，啟動動畫效果。

   // RefreshAnimHeader.ets
   @Consume(RefreshConstants.REFRESH_STATE_TAG) @Watch('onStateCheck') state: RefreshState;
   @State iconWidth: number = CommonConstants.REFRESH_HEADER_ITEM_DEFAULT_WIDTH;
   
   private onStateCheck() {
     if (this.state === RefreshState.REFRESHING) {
       this.iconWidth = CommonConstants.REFRESH_HEADER_ITEM_SCALE_WIDTH;
     } else {
       this.iconWidth = CommonConstants.REFRESH_HEADER_ITEM_DEFAULT_WIDTH;
     }
   }
   

審核編輯 黃宇