鸿蒙Harmony应用开发—ArkTS-转场动画（共享元素转场）

作者：笔触狂放9 | 2024-03-27 10:02:27

踩

当路由进行切换时，可以通过设置组件的 sharedTransition 属性将该元素标记为共享元素并设置对应的共享元素转场动效。

说明：

从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

属性

名称	参数	参数描述
sharedTransition	id: string, { duration?: number, curve?: Curve \| string \| ICurve10+, delay?: number, motionPath?: { path: string, form?: number, to?: number, rotatable?: boolean }, zIndex?: number, type?: SharedTransitionEffectType }	两个页面中id值相同且不为空字符串的组件即为共享元素，在页面转场时可显示共享元素转场动效。 - id：设置组件的id。 - duration：描述共享元素转场动效播放时长。默认值：1000 单位：毫秒取值范围：[0, +∞) 值为0时表示无动画。设置小于0的值时，按默认值1000处理。 - curve：默认曲线为Curve.Linear。 - delay：用来描述共享元素转场动效延迟播放的时长。默认值：0 单位：毫秒取值范围：[0, +∞) 设置小于0的值时，按值为0处理。 - motionPath：运动路径信息，详细说明请参考路径动画。 { - path：设置路径。 - from：设置起始值。 - to：设置终止值。 - rotatable：是否旋转。默认值：false } - zIndex：设置Z轴。默认值：0 - type：动画类型。默认值：SharedTransitionEffectType.Exchange

说明：

type为SharedTransitionEffectType.Exchange时motionPath才会生效。

示例

示例代码为点击图片跳转页面时，显示共享元素图片的自定义转场动效。


// xxx.ets
@Entry
@Component
struct SharedTransitionExample {
  @State active: boolean = false
 
  build() {
    Column() {
      Navigator({ target: 'pages/PageB', type: NavigationType.Push }) {
        Image($r('app.media.ic_health_heart')).width(50).height(50)
          .sharedTransition('sharedImage', { duration: 800, curve: Curve.Linear, delay: 100 })
      }.padding({ left: 20, top: 20 })
      .onClick(() => {
        this.active = true
      })
    }
  }
}


// PageB.ets
@Entry
@Component
struct pageBExample {
  build() {
    Stack() {
      Image($r('app.media.ic_health_heart')).width(150).height(150)
        .sharedTransition('sharedImage', { duration: 800, curve: Curve.Linear, delay: 100 })
    }.width('100%').height('100%')
  }
}

shared

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

HarmonOS基础技能

HarmonOS就业必备技能
HarmonOS多媒体技术

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料