主页
// src page import router from '@ohos.router';
@Entry @Component struct SharedTransitionSrc { build() { Column() { // 配置Exchange类型的共享元素转场，共享元素id为"sharedImage1" Image($r('app.media.img_2')).width(50).height(50) .sharedTransition('sharedImage1', { duration: 1000, curve: Curve.Linear }) .onClick(() => { // 点击小图时路由跳转至下一页面 router.pushUrl({ url: 'pages/myTest/sharedTransitionDst' }); }) } .padding(10) .width("100%") .alignItems(HorizontalAlign.Start) } }
子页
// dest page import router from '@ohos.router'; @Entry @Component struct SharedTransitionDest { build() { Column() { // 配置Static类型的共享元素转场 Text("SharedTransition dest page") .fontSize(16) .sharedTransition('text', { duration: 500, curve: Curve.Linear, type: SharedTransitionEffectType.Static }) .margin({ top: 10 })
// 配置Exchange类型的共享元素转场，共享元素id为"sharedImage1" Image($r('app.media.img_2')) .width(150) .height(150) .sharedTransition('sharedImage1', { duration: 500, curve: Curve.Linear }) .onClick(() => { // 点击图片时路由返回至上一页面 router.back(); }) } .width("100%") .alignItems(HorizontalAlign.Center) } }
第一个页面（src page）和第二个页面（dest page）都配置了id为"sharedImage1"的共享元素转场，以便两个页面都能匹配到这一组共享元素。当从第一个页面跳转到第二个页面时，第一个页面为起始页，第二个页面为目标页。配置了id为"sharedImage1"的组件按照目标页中的500ms时长进行共享元素转场，从而实现放大视图的效果；而id为"text"的组件则按照配置的Static类型sharedTransition参数中的500ms时长进行共享元素转场，使标题逐渐出现。当从第二个页面返回到第一个页面时，第二个页面为起始页，第一个页面为目标页。配置了id为"sharedImage1"的组件按照目标页中的1000ms时长进行共享元素转场，使其缩小至原始视图；同时，id为"text"的组件按照配置的Static类型sharedTransition参数中的500ms时长进行共享元素转场，使标题逐渐隐藏。
🚀写在最后
- 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
- 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
- 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
- 想要获取个人更多完整鸿蒙最新VIP学习资料，请点击→全套鸿蒙HarmonyOS学习资料
- 或者关注小编后私信回复【666】也可获取资料哦~~
深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
