HarmonyOS鸿蒙开发实战（ Beta5.0）标题下拉缩放实践案例

鸿蒙HarmonyOS NEXT开发实战往期文章必看（持续更新......）

HarmonyOS NEXT应用开发性能实践总结

HarmonyOS NEXT应用开发案例实践总结合集

最新版！“非常详细的” 鸿蒙HarmonyOS Next应用开发学习路线！（从零基础入门到精通）

非常详细的” 鸿蒙HarmonyOS Next应用开发学习路线！

介绍

本文以备忘录应用为示例，介绍如何在实现标题展开时继续下拉的动效。

效果图预览

使用说明：

  1. 进入页面，起初标题并没有展开，与增加/分享的菜单在同一行。
  2. 进行第一次下拉操作，此时标题展开至目标位置，并显示笔记数目信息，与菜单不在同一行。
  3. 继续下拉，达到阈值距离后，标题与菜单都下拉一段距离，并放大；松手后回弹至第一次下拉后的状态。
  4. 向上滑动，标题折叠，回到初始时的状态。

实现思路

  1. 标题是否展开，通过状态变量isExpanded控制，展开后原先标题置空，将展开后标题设置为可见。源码参考TitleExpansion.ets。

    1. Column() {
    2.   Row() {
    3.     Text(!this.isExpanded ? $r('app.string.expanded_title_memo_title') : '') // 展开前的标题
    4.       .fontSize($r('app.string.expanded_title_init_title_font_size'))
    5.     ......
    6.   }
    7.   .width($r('app.string.expanded_title_layout_100_percent'))
    8.   .padding($r('app.string.expanded_title_layout_25'))
    9.   .margin({ top: $r('app.string.expanded_title_layout_10') })
    10.   .alignItems(VerticalAlign.Center)
    11.   .translate(this.getMenuTranslateOptions())
    12.   .animation({ duration: this.duration, curve: Curve.FastOutLinearIn })
    13.  
    14.   if (this.isExpanded) { // 展开后的标题
    15.     Column() {
    16.       Text($r('app.string.expanded_title_memo_title'))
    17.         .fontSize($r('app.string.expanded_title_font_size'))
    18.       Text($r('app.string.expanded_title_memo_counts'))
    19.         .fontSize($r('app.string.expanded_title_memo_counts_font_size'))
    20.         .fontColor(Color.Grey)
    21.     }
    22.     .width($r('app.string.expanded_title_layout_100_percent'))
    23.     .padding({ left: $r('app.string.expanded_title_layout_25') })
    24.     .margin({ top: $r('app.string.expanded_title_layout_10') })
    25.     .alignItems(HorizontalAlign.Start)
    26.     .translate(this.getTitleTranslateOptions())
    27.     .scale(this.getTitleScaleOptions())
    28.     .animation({ duration: this.duration, curve: Curve.FastOutLinearIn })
    29.     .transition({ type: TransitionType.Insert, translate: { y: Constants.TRANSLATE_Y } })
    30.   }
    31. }

  2. 内容高度变化，通过状态变量heightValue控制，标题展开时设置为较小值，以提供标题展开后的空间。源码参考TitleExpansion.ets。

    1. Column() {
    2.   List({ space: Constants.SEARCH_MEMO_SPACE }) {
    3.     ListItem() {
    4.       Search({ placeholder: $r('app.string.expanded_title_search_placeholder') })
    5.         .width($r('app.string.expanded_title_layout_100_percent'))
    6.         .height($r('app.string.expanded_title_layout_8_percent'))
    7.         .backgroundColor(Color.White)
    8.     }
    9.  
    10.     LazyForEach(this.memoData, (item: MemoInfo) => { 
    11.       ListItem() {
    12.         MemoItem({ memoItem: item })
    13.       }
    14.     }, (item: MemoInfo) => JSON.stringify(item))
    15.   }
    16.   .scrollBar(BarState.Off)
    17.   .margin({ left: $r('app.string.expanded_title_layout_10'), right: $r('app.string.expanded_title_layout_10') })
    18.   .width($r('app.string.expanded_title_layout_90_percent'))
    19.   .height($r('app.string.expanded_title_layout_100_percent'))
    20.   .onReachStart(() => { // TODO：知识点：通过onReachStart回调，更新列表是否位于顶部的状态更新，以控制仅在顶部时才触发标题下移放大动效
    21.     this.atStart = true;
    22.   })
    23. }
    24. .width($r('app.string.expanded_title_layout_100_percent'))
    25. .height(this.heightValue) // 通过状态变量heightValue控制内容高度变化
    26. .animation({ duration: this.duration, curve: Curve.FastOutLinearIn })
    27. .onTouch((event: TouchEvent) => this.handleTouchEvent(event))

  3. 状态变量更新都在onTouch时间的响应函数handleTouchEvent中处理，根据手指滑动类型TouchType分为三种情况处理：

    • TouchType.Down，即手指下按时：记录按下时的坐标downY，并更新状态变量isMoving为开始滑动、duration为初始动画时长
    • TouchType.Move，即手指滑动时：根据滑动方向的不同，更新滑动距离offsetY、内容高度heightValue、标题是否展开等状态变量
    • TouchType.Up、TouchType.Cancel，即滑动结束时：更新状态变量isMoving为停止滑动、duration为回弹动画时长

    源码参考TitleExpansion.ets。

    1. handleTouchEvent(event: TouchEvent): void {
    2.   switch (event.type) {
    3.     // 手指下按时
    4.     case TouchType.Down:
    5.       this.downY = event.touches[0].y;
    6.       this.lastMoveY = event.touches[0].y;
    7.       this.isMoving = true;
    8.       this.duration = Constants.ANIMATE_DURATION_DRAG; // 重置动画持续时间
    9.       break;
    10.  
    11.     // 手指滑动时
    12.     case TouchType.Move:
    13.       const delta = event.touches[0].y - this.lastMoveY;
    14.       this.offsetY = event.touches[0].y - this.downY;
    15.       if (delta < 0) { // TODO：知识点：手势为上滑时
    16.         this.heightValue = $r('app.string.expanded_title_memo_area_height_before');
    17.         this.isExpanded = false;
    18.         this.atStart = false;
    19.       }
    20.       if (delta > 0 && this.atStart) { // TODO：知识点：手势为下滑，且列表内容位于顶部时
    21.         // 性能知识点：手指滑动的时，直接使用animateTo，会创建大量的animateTo对象，可以通过节流器优化性能
    22.         this.animateToThrottle(() => {
    23.           this.heightValue = $r('app.string.expanded_title_memo_area_height_after');
    24.           this.isExpanded = true;
    25.         }, 1000);
    26.       }
    27.       this.lastMoveY = event.touches[0].y;
    28.       break;
    29.  
    30.     // 滑动结束时
    31.     case TouchType.Up:
    32.     case TouchType.Cancel:
    33.       this.isMoving = false;
    34.       this.duration = Constants.ANIMATE_DURATION_BACK; // 控制回弹动画时间
    35.       break;
    36.   }
    37. }

  4. 响应状态变量的动画，通过为标题和菜单绑定属性动画animation实现，标题和菜单的tranlate和scale参数在下拉过程中会更新， 并通过isContinuePullDown判断触发与否。源码参考TitleExpansion.ets。

    1. /**
    2.  * 获取标题展开时，图标继续下拉的Translate参数
    3.  */
    4. getMenuTranslateOptions(): TranslateOptions {
    5.   return this.isContinuePullDown() ? {
    6.     y: Math.min(this.offsetY - Constants.CONTENT_DOWN_Y_THRESHOLD, Constants.MENU_DOWN_Y_MAX_VALUE)
    7.   } : { y: Constants.INIT_COORDINATE };
    8. }
    9.  
    10. /**
    11.  * 获取标题展开时，标题继续下拉的Translate参数
    12.  */
    13. getTitleTranslateOptions(): TranslateOptions {
    14.   return this.isContinuePullDown() ? {
    15.     y: Math.min(this.offsetY - Constants.CONTENT_DOWN_Y_THRESHOLD, Constants.TITLE_DOWN_Y_MAX_VALUE)
    16.   } : { y: Constants.INIT_COORDINATE };
    17. }
    18.  
    19. /**
    20.  * 获取标题展开时，标题缩放的Scale参数
    21.  */
    22. getTitleScaleOptions(): ScaleOptions {
    23.   return this.isContinuePullDown() ? {
    24.     x: Constants.TITLE_SCALE_MAX_VALUE,
    25.     y: Constants.TITLE_SCALE_MAX_VALUE,
    26.     centerX: Constants.INIT_COORDINATE,
    27.     centerY: Constants.INIT_COORDINATE
    28.   } : {
    29.     x: Constants.TITLE_SCALE_DEFAULT_VALUE,
    30.     y: Constants.TITLE_SCALE_DEFAULT_VALUE,
    31.     centerX: Constants.INIT_COORDINATE,
    32.     centerY: Constants.INIT_COORDINATE
    33.   };
    34. }
    35.  
    36. /**
    37.  * 判断是否达到触发继续下拉动效的条件
    38.  */
    39. isContinuePullDown(): boolean {
    40.   return this.isMoving && this.isExpanded && this.offsetY >= Constants.CONTENT_DOWN_Y_THRESHOLD;
    41. }

高性能知识点

本示例使用了LazyForEach进行数据懒加载以及显式动画animateTo实现文本偏移。

工程结构&模块类型

  1. marquee                                         // har类型
  2. |---model
  3. |   |---Constants.ets                           // 数据模型层-常量
  4. |   |---DataSource.ets                          // 数据模型层-懒加载数据源
  5. |   |---MemoInfo.ets                        // 数据模型层-数据类型
  6. |   |---MockData.ets                            // 数据模型层-模拟数据
  7. |---view
  8. |   |---MemoItem.ets                            // 视图层-笔记视图
  9. |---page
  10. |   |---TitleExpansion.ets                      // 页面层-方案主页面

鸿蒙NEXT全套学习资料
微信名片
注：本文转载自blog.csdn.net的让开，我要吃人了的文章"https://blog.csdn.net/weixin_55362248/article/details/142555426"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！