中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
组件内转场主要通过transition属性配置转场参数,在组件插入和删除时显示过渡动效,主要用于容器组件中的子组件插入和删除时,提升用户体验(需要配合animateTo才能生效,动效时长、曲线、延时跟随animateTo中的配置)。 说明:从API Version 7开始支持。开发语言ets. 示例代码:
@Entry @Component struct TransitionAnimation_zj { @State flag: boolean = true @State show: string = 'show' build() { Column() { Button(this.show).width(80).height(30).margin(30) .onClick(() => { // 点击Button控制Image的显示和消失 animateTo({ duration: 1000 }, () => { if (this.flag) { this.show = 'hide' } else { this.show = 'show' } this.flag = !this.flag }) }) if (this.flag) { // Image的显示和消失配置为不同的过渡效果 Image($r('app.media.icon')).width(300).height(300) .transition({ type: TransitionType.Insert, scale: { x: 0, y: 1.0 } }) .transition({ type: TransitionType.Delete, rotate: { angle: 180 } }) } }.width('100%') } }
示例效果:
参考地址: https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-transition-animation-component-0000001430161145-V3
微信扫码分享