純血鴻蒙APP實戰開發——標題下拉縮放案例

介紹

本文以備忘錄應用為示例，介紹如何在實現標題展開時繼續下拉的動效。

效果圖預覽

使用說明：

  1. 進入頁面，起初標題并沒有展開，與增加/分享的菜單在同一行。
  2. 進行第一次下拉操作，此時標題展開至目標位置，并顯示筆記數目信息，與菜單不在同一行。
  3. 繼續下拉，達到閾值距離后，標題與菜單都下拉一段距離，并放大；松手后回彈至第一次下拉后的狀態。
  4. 向上滑動，標題折疊，回到初始時的狀態。

實現思路

  1. 標題是否展開，通過狀態變量isExpanded控制，展開后原先標題置空，將展開后標題設置為可見。
   Column() {
     Row() {
       Text(!this.isExpanded ? $r('app.string.expanded_title_memo_title') : '') // 展開前的標題
         .fontSize($r('app.string.expanded_title_init_title_font_size'))
       ......
     }
     .width($r('app.string.expanded_title_layout_100_percent'))
     .padding($r('app.string.expanded_title_layout_25'))
     .margin({ top: $r('app.string.expanded_title_layout_10') })
     .alignItems(VerticalAlign.Center)
     .translate(this.getMenuTranslateOptions())
     .animation({ duration: this.duration, curve: Curve.FastOutLinearIn })
   
     if (this.isExpanded) { // 展開后的標題
       Column() {
         Text($r('app.string.expanded_title_memo_title'))
           .fontSize($r('app.string.expanded_title_font_size'))
         Text($r('app.string.expanded_title_memo_counts'))
           .fontSize($r('app.string.expanded_title_memo_counts_font_size'))
           .fontColor(Color.Grey)
       }
       .width($r('app.string.expanded_title_layout_100_percent'))
       .padding({ left: $r('app.string.expanded_title_layout_25') })
       .margin({ top: $r('app.string.expanded_title_layout_10') })
       .alignItems(HorizontalAlign.Start)
       .translate(this.getTitleTranslateOptions())
       .scale(this.getTitleScaleOptions())
       .animation({ duration: this.duration, curve: Curve.FastOutLinearIn })
       .transition({ type: TransitionType.Insert, translate: { y: Constants.TRANSLATE_Y } })
     }
   }
  1. 內容高度變化，通過狀態變量heightValue控制，標題展開時設置為較小值，以提供標題展開后的空間。
   Column() {
     List({ space: Constants.SEARCH_MEMO_SPACE }) {
       ListItem() {
         Search({ placeholder: $r('app.string.expanded_title_search_placeholder') })
           .width($r('app.string.expanded_title_layout_100_percent'))
           .height($r('app.string.expanded_title_layout_8_percent'))
           .backgroundColor(Color.White)
       }
   
       LazyForEach(this.memoData, (item: MemoInfo) => { 
         ListItem() {
           MemoItem({ memoItem: item })
         }
       }, (item: MemoInfo) => JSON.stringify(item))
     }
     .scrollBar(BarState.Off)
     .margin({ left: $r('app.string.expanded_title_layout_10'), right: $r('app.string.expanded_title_layout_10') })
     .width($r('app.string.expanded_title_layout_90_percent'))
     .height($r('app.string.expanded_title_layout_100_percent'))
     .onReachStart(() => { // TODO：知識點：通過onReachStart回調，更新列表是否位于頂部的狀態更新，以控制僅在頂部時才觸發標題下移放大動效
       this.atStart = true;
     })
   }
   .width($r('app.string.expanded_title_layout_100_percent'))
   .height(this.heightValue) // 通過狀態變量heightValue控制內容高度變化
   .animation({ duration: this.duration, curve: Curve.FastOutLinearIn })
   .onTouch((event: TouchEvent) => this.handleTouchEvent(event))

  1. 狀態變量更新都在onTouch時間的響應函數handleTouchEvent中處理，根據手指滑動類型TouchType分為三種情況處理：

    • TouchType.Down，即手指下按時：記錄按下時的坐標downY，并更新狀態變量isMoving為開始滑動、duration為初始動畫時長
    • TouchType.Move，即手指滑動時：根據滑動方向的不同，更新滑動距離offsetY、內容高度heightValue、標題是否展開等狀態變量
    • TouchType.Up、TouchType.Cancel，即滑動結束時：更新狀態變量isMoving為停止滑動、duration為回彈動畫時長
handleTouchEvent(event: TouchEvent): void {
  switch (event.type) {
    // 手指下按時
    case TouchType.Down:
      this.downY = event.touches[0].y;
      this.lastMoveY = event.touches[0].y;
      this.isMoving = true;
      this.duration = Constants.ANIMATE_DURATION_DRAG; // 重置動畫持續時間
      break;

    // 手指滑動時
    case TouchType.Move:
      const delta = event.touches[0].y - this.lastMoveY;
      this.offsetY = event.touches[0].y - this.downY;
      if (delta < 0) { // TODO：知識點：手勢為上滑時
        this.heightValue = $r('app.string.expanded_title_memo_area_height_before');
        this.isExpanded = false;
        this.atStart = false;
      }
      if (delta > 0 && this.atStart) { // TODO：知識點：手勢為下滑，且列表內容位于頂部時
        // 性能知識點：手指滑動的時，直接使用animateTo，會創建大量的animateTo對象，可以通過節流器優化性能
        this.animateToThrottle(() => {
          this.heightValue = $r('app.string.expanded_title_memo_area_height_after');
          this.isExpanded = true;
        }, 1000);
      }
      this.lastMoveY = event.touches[0].y;
      break;

    // 滑動結束時
    case TouchType.Up:
    case TouchType.Cancel:
      this.isMoving = false;
      this.duration = Constants.ANIMATE_DURATION_BACK; // 控制回彈動畫時間
      break;
  }
}
  1. 響應狀態變量的動畫，通過為標題和菜單綁定屬性動畫animation實現，標題和菜單的tranlate和scale參數在下拉過程中會更新， 并通過isContinuePullDown判斷觸發與否。
   /**
    * 獲取標題展開時，圖標繼續下拉的Translate參數
    */
   getMenuTranslateOptions(): TranslateOptions {
     return this.isContinuePullDown() ? {
       y: Math.min(this.offsetY - Constants.CONTENT_DOWN_Y_THRESHOLD, Constants.MENU_DOWN_Y_MAX_VALUE)
     } : { y: Constants.INIT_COORDINATE };
   }
   
   /**
    * 獲取標題展開時，標題繼續下拉的Translate參數
    */
   getTitleTranslateOptions(): TranslateOptions {
     return this.isContinuePullDown() ? {
       y: Math.min(this.offsetY - Constants.CONTENT_DOWN_Y_THRESHOLD, Constants.TITLE_DOWN_Y_MAX_VALUE)
     } : { y: Constants.INIT_COORDINATE };
   }
   
   /**
    * 獲取標題展開時，標題縮放的Scale參數
    */
   getTitleScaleOptions(): ScaleOptions {
     return this.isContinuePullDown() ? {
       x: Constants.TITLE_SCALE_MAX_VALUE,
       y: Constants.TITLE_SCALE_MAX_VALUE,
       centerX: Constants.INIT_COORDINATE,
       centerY: Constants.INIT_COORDINATE
     } : {
       x: Constants.TITLE_SCALE_DEFAULT_VALUE,
       y: Constants.TITLE_SCALE_DEFAULT_VALUE,
       centerX: Constants.INIT_COORDINATE,
       centerY: Constants.INIT_COORDINATE
     };
   }
   
   /**
    * 判斷是否達到觸發繼續下拉動效的條件
    */
   isContinuePullDown(): boolean {
     return this.isMoving && this.isExpanded && this.offsetY >= Constants.CONTENT_DOWN_Y_THRESHOLD;
   }

高性能知識點

本示例使用了LazyForEach進行數據懶加載以及顯式動畫animateTo實現文本偏移。

工程結構&模塊類型

marquee                                         // har類型
|---model
|   |---Constants.ets                           // 數據模型層-常量
|   |---DataSource.ets                          // 數據模型層-懶加載數據源
|   |---MemoInfo.ets                        // 數據模型層-數據類型
|   |---MockData.ets                            // 數據模型層-模擬數據
|---view
|   |---MemoItem.ets                            // 視圖層-筆記視圖
|---page
|   |---TitleExpansion.ets                      // 頁面層-方案主頁面

寫在最后

  • 如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
  • 點贊，轉發，有你們的 『點贊和評論』，才是我創造的動力。
  • 關注小編，同時可以期待后續文章ing??，不定期分享原創知識。
  • 想要獲取更多完整鴻蒙最新學習知識點，請移步前往小編：https://gitee.com/MNxiaona/733GH/blob/master/jianshu
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容