介绍
本示例介绍使用bindContentCover、transition、animateTo实现一镜到底转场动画，常用于首页搜索框点击进入搜索页场景。
效果图预览
使用说明
- 点击首页搜索框跳转到搜索页面显式一镜到底转场动画
实现思路
通过点击首页搜索框改变bindContentCover全屏模态转场中的isSearchPageShow参数控制页面是否显示，同时将modalTransition设置为NONE关闭全屏模态转场的动画，使用transition和animateTo实现首页到搜索页面的转场动画通过bindContentCover全屏模态转场衔接动画。
通过geometryTransition同时绑定首页和搜索页面的search框实现丝滑的上下文传承过渡，达到一镜到底的效果。
- 通过bindContentCover全屏模态转场实现对搜索页面显示的控制。
Column() {
Column() {
Search({ placeholder: $r('app.string.search_placeholder') })
.focusOnTouch(false)
.focusable(false)
.enableKeyboardOnFocus(false)
.backgroundColor('#E7E9E8')
.width(this.searchWidth)
.height(40)
.borderRadius($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)
}))
}
.alignItems(HorizontalAlign.Start)
.backgroundColor('#E7E9E8')
.borderRadius($r('app.string.main_page_top_borderRadius'))
}
.position({ x: this.XPosition })
// TODO：知识点：通过bindContentCover属性为组件绑定全屏模态页面，在组件插入和删除时可通过设置转场参数ModalTransition显示过渡动效
.bindContentCover(this.isSearchPageShow, this.SearchPage(), {
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动画在空间位置上发生联系，将视觉焦点由旧视图位置引导到新视图位置。
Column() {
Search({ placeholder: $r('app.string.search_placeholder') })
.focusOnTouch(false)
.focusable(false)
.enableKeyboardOnFocus(false)
.backgroundColor('#E7E9E8')
.width(this.searchWidth)
.height(40)
.borderRadius($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组件内转场实现搜索页面消失显示过程中的过渡效果。
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显式动画配合改变搜索框大小实现转换过程中的动画和一镜到底的效果。
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;
})
}
工程结构&模块类型
SearchComponent // har类型(默认使用har类型，如果使用hsp类型请说明原因)
|---model
| |---ListData.ets // 筛选数据模型
|---SearchComponent.ets // 搜索模块
阅读全文
下载说明：
1、本站所有资源均从互联网上收集整理而来，仅供学习交流之用，因此不包含技术服务请大家谅解！
2、本站不提供任何实质性的付费和支付资源，所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用！
3、本站所有资源仅用于学习及研究使用，您必须在下载后的24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担！
4、本站站内提供的所有可下载资源，本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发），但本站不保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug！如有链接无法下载、失效或广告，请联系客服处理！
5、本站资源除标明原创外均来自网络整理，版权归原作者或本站特约原创作者所有，如侵犯到您的合法权益，请立即告知本站，本站将及时予与删除并致以最深的歉意！
6、如果您也有好的资源或教程，您可以投稿发布，成功分享后有站币奖励和额外收入！
7、如果您喜欢该资源，请支持官方正版资源，以得到更好的正版服务！
8、请您认真阅读上述内容，注册本站用户或下载本站资源即您同意上述内容！
原文链接：https://www.shuli.cc/?p=21723，转载请注明出处。
1、本站所有资源均从互联网上收集整理而来，仅供学习交流之用，因此不包含技术服务请大家谅解！
2、本站不提供任何实质性的付费和支付资源，所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用！
3、本站所有资源仅用于学习及研究使用，您必须在下载后的24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担！
4、本站站内提供的所有可下载资源，本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发），但本站不保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug！如有链接无法下载、失效或广告，请联系客服处理！
5、本站资源除标明原创外均来自网络整理，版权归原作者或本站特约原创作者所有，如侵犯到您的合法权益，请立即告知本站，本站将及时予与删除并致以最深的歉意！
6、如果您也有好的资源或教程，您可以投稿发布，成功分享后有站币奖励和额外收入！
7、如果您喜欢该资源，请支持官方正版资源，以得到更好的正版服务！
8、请您认真阅读上述内容，注册本站用户或下载本站资源即您同意上述内容！
原文链接：https://www.shuli.cc/?p=21723，转载请注明出处。
评论0