标题下拉缩放案例

介绍

本文以备忘录应用为示例，介绍如何在实现标题跟随手势移动并放缩的动效。

效果图预览

使用说明：

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

实现思路

1. 标题高度变化，通过状态变量heightValue控制，通过onScrollFrameBegin获取list偏移，并将其分配给标题高度变化和实际list偏移。源码参考TitleExpansion.ets。

   List({ space: Constants.SEARCH_MEMO_SPACE, scroller: this.scroller }) {
     ListItem() {
       // 内容
       this.content();
     }
   }
   .onScrollFrameBegin((offset: number, state: ScrollState) => {
     let listOffset: number = 0;
     console.log(`offset: ${offset}`)
     // 保证list没有在顶部时以list滑动为主
     if (offset < 0) {
       listOffset = Math.max(offset, -this.scroller.currentOffset().yOffset);
       offset -= listOffset;
     }
     // 标题高度变化
     let titleHeightChange = this.getTitleHeightChangeOptions(-offset);
     this.heightValue += titleHeightChange;
     // list滑动距离
     offset += titleHeightChange;
     offset += listOffset;
     return {offsetRemain: offset};
   })
   

2. 标题展开继续下拉偏移，通过状态变量curOffset控制，通过onDidScroll获取标题展开后，标题继续下拉的偏移。 源码参考TitleExpansion.ets。

   List({ space: Constants.SEARCH_MEMO_SPACE, scroller: this.scroller }) {
     ListItem() {
       // 内容
       this.content();
     }
   }
   // 获取标题展开后，标题继续下拉偏移
   .onDidScroll((scrollOffset: number, scrollState: ScrollState) => {
     this.curOffset = this.scroller.currentOffset().yOffset;
   })
   

3. 滚动停止动画，通过onScrollStop获取滚动停止时的标题高度。当标题高度大于阈值时，产生展开标题动画；相反，则产生收缩标题动画。源码参考TitleExpansion.est

List({ space: Constants.SEARCH_MEMO_SPACE, scroller: this.scroller }) {
  ListItem() {
    // 内容
    this.content();
  }
}
// TODO: 知识点: 在滚动停止时判断是否需要展开或者收缩标题
.onScrollStop(() => {
  if (this.heightValue >= this.thresholdValue) {
    this.animateToThrottle(() => {
      this.heightValue = Constants.EXPAND_TITLE_HEIGHT;
    }, this.delay)
  } else {
    this.animateToThrottle(() => {
      this.heightValue = Constants.NORMAL_TITLE_HEIGHT;
    }, this.delay)
  }
})

4. 响应状态变量，标题和菜单的tranlate和scale参数以及笔记数量的opacity参数在下拉过程中会更新。源码参考TitleExpansion.ets。

/**
 * 获取标题展开时，继续下拉的菜单栏Translate参数
 * @returns {TranslateOptions} 标题展开后继续下拉的菜单栏Translate参数
 */
getMenuTranslateOptions(): TranslateOptions {
  return { y: Math.max(-this.curOffset, 0) };
}

/**
 * 获取标题展开时，继续下拉的标题栏Translate参数
 * @returns {TranslateOptions} 标题展开后继续下拉的标题栏Translate参数
 */
getTitleTranslateOptions(): TranslateOptions {
  return {y: Math.max(-this.curOffset, 0)};
}

/**
 * 获取标题栏高度变化参数
 * @param offset: 当前产生的偏移
 * @returns {number} 标题栏高度变化值
 */
getTitleHeightChangeOptions(offset: number): number {
  return Math.max(Math.min(offset, this.animationAttribute.expandTitleHeight - this.heightValue), this.animationAttribute.normalTitleHeight - this.heightValue);
}

/**
 * 获取主标题缩放的Scale参数
 * @returns {ScaleOptions} 主标题缩放系数
 */
getTitleScaleOptions(): ScaleOptions {
  let scaleRatio = 1 + (this.animationAttribute.titleScale - 1) *
    Math.min((this.heightValue - this.animationAttribute.normalTitleHeight + Math.max(-this.curOffset, 0)) / this.animationAttribute.continuePullThreshold, 1);
  return {
    x: scaleRatio,
    y: scaleRatio,
    centerX: Constants.INIT_COORDINATE,
    centerY: Constants.INIT_COORDINATE
  };
}

/**
 * 获取子标题显隐参数
 * @returns {number} 子标题显隐系数
 */
getTitleOpacityOptions(): number {
  return (this.heightValue - this.animationAttribute.normalTitleHeight) /
    (this.animationAttribute.expandTitleHeight - this.animationAttribute.normalTitleHeight)
}

高性能知识点

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

工程结构&模块类型

expandtitle                                     // har类型
|---constants
|   |---Constants.ets                           // 常量池
|---model
|   |---AnimationAttribute.ets                  // 动效属性
|   |---TitleAttribute.ets                      // 标题属性
|---pages
|   |---Configure.ets                           // 样例配置文件
|   |---DataSource.ets                          // 懒加载数据源
|   |---MemoInfo.ets                            // 数据类型
|   |---MemoItem.ets                            // 笔记视图
|   |---MockData.ets                            // 模拟数据
|   |---TitleContent.ets                        // 内容界面
|   |---Index.ets                               // 标题扩展组件UI样例
|   |---TitleMenu.ets                           // 菜单栏
|---utils
|   |---TitleExpansion.ets                      // 标题扩展组件

参考资料

显式动画animateTo

数据懒加载LazyForEach

约束与限制

1.本示例仅支持在标准系统上运行。

2.本示例需要使用DevEco Studio 5.0.0 Release 才可编译运行。

下载

如需单独下载本工程，执行如下命令：

git init
git config core.sparsecheckout true
echo /code/UI/ExpandTitle/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master