HarmonyOS NEXT应用开发之搜索页一镜到底案例

本文链接：https://blog.csdn.net/2301_82242296/article/details/137565682

modalTransition: ModalTransition.NONE,
onDisappear: () => {
this.onArrowClicked()
}
})
.alignItems(HorizontalAlign.Start)
.padding({ left: $r(‘app.string.main_page_padding’), right: $r(‘app.string.main_page_padding’), top: 48,bottom: 40})
}

2.通过geometryTransition同时绑定首页和搜索页面的search框实现丝滑的上下文传承过渡，使得原本独立的transition动画在空间位置上发生联系，将视觉焦点由旧视图位置引导到新视图位置。源码参考SearchComponent.ets

Column() {
Search({ placeholder: $KaTeX parse error: Expected 'EOF', got '}' at position 36: \dots_placeholder') }̲) .focusOnTouch\dots$ r(‘app.string.main_page_top_borderRadius’))
.onClick(() => {
this.onSearchClicked()
})
.geometryTransition(this.geometryId, { follow: true })
// 搜索框转场过渡动画，cubicBezierCurve为三阶贝塞尔曲线动画
.transition(TransitionEffect.OPACITY.animation({
duration: 200,
curve: curves.cubicBezierCurve(0.33, 0, 0.67, 1)
}))
}

3.通过transition组件内转场实现搜索页面消失显示过程中的过渡效果。源码参考SearchComponent.ets

Image($r(‘app.media.ic_public_back’))
.width(20)
.onClick(() => {
this.onArrowClicked()
})
// TODO：知识点：通过transition属性配置转场参数，在组件插入和删除时显示过渡动效。非对称对称转场，第一个为出现动效有150的延迟，第二个为消失动效
.transition(TransitionEffect.asymmetric(
TransitionEffect.opacity(0)
.animation({ curve: curves.cubicBezierCurve(0.33, 0, 0.67, 1), duration: 200, delay: 150 }),
TransitionEffect.opacity(0)
.animation({ curve: curves.cubicBezierCurve(0.33, 0, 0.67, 1), duration: 200 }),
))

4.在切换过程中使用animateTo显式动画配合改变搜索框大小实现转换过程中的动画和一镜到底的效果。源码参考SearchComponent.ets

private onSearchClicked(): void {
this.geometryId = ‘search’;
animateTo({
duration: 100,
// 构造插值器弹簧曲线对象，生成一条从0到1的动画曲线
curve: curves.interpolatingSpring(0, 1, 324, 38),
onFinish: () => {
this.geometryId = ‘’
}
}, () => {
this.searchWidth = 400;
this.isSearchPageShow = true;
})
}