介紹
本文以備忘錄應用為示例,介紹如何在實現標題展開時繼續下拉的動效。
效果圖預覽
使用說明:
- 進入頁面,起初標題并沒有展開,與增加/分享的菜單在同一行。
- 進行第一次下拉操作,此時標題展開至目標位置,并顯示筆記數目信息,與菜單不在同一行。
- 繼續下拉,達到閾值距離后,標題與菜單都下拉一段距離,并放大;松手后回彈至第一次下拉后的狀態。
- 向上滑動,標題折疊,回到初始時的狀態。
實現思路
- 標題是否展開,通過狀態變量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 } })
}
}
- 內容高度變化,通過狀態變量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))
-
狀態變量更新都在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;
}
}
- 響應狀態變量的動畫,通過為標題和菜單綁定屬性動畫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