代码拉取完成，页面将自动刷新
本文以备忘录应用为示例，介绍如何在实现标题跟随手势移动并放缩的动效。
使用说明：
标题高度变化，通过状态变量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};
})
标题展开继续下拉偏移，通过状态变量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;
})
滚动停止动画，通过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)
}
})
/**
* 获取标题展开时，继续下拉的菜单栏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 // 标题扩展组件
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
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手