HarmonyOS应用开发-ets组件内转场
Q 2022-02-23 16:58:01 发布1930 浏览 23 点赞 20 收藏

说明:该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
一、组件转场主要通过transition属性进行配置转场参数,在组件插入和删除时进行过渡动效,主要用于容器组件子组件插入删除时提升用户体验(需要配合animateTo才能生效,动效时长、曲线、延时跟随animateTo中的配置)。

transition入参说明:


TransitionType枚举说明:

二、示例
效果展示:

示例代码:
index.ets
@Entry
@Component
struct TransitionExample {
@State btn1: boolean = false
@State show: string = "show"
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,}) {
Button(this.show).width(80).height(30).backgroundColor(0x317aff).margin({bottom:50})
.onClick(() => {
animateTo({ duration: 1000 }, () => {
this.btn1 = !this.btn1
if(this.btn1){
this.show = "关闭"
}else{
this.show = "展开"
}
})
})
if (this.btn1) {
// 插入和删除配置为不同的过渡效果
Button() {
Image($rawfile('YZ.jpg')).width("80%").height(300)
}.transition({ type: TransitionType.Insert, scale : {x:0,y:1.0} })
.transition({ type: TransitionType.Delete, scale: { x: 1.0, y: 0.0 } })
}
}.height(400).width("100%").padding({top:100})
}
}
完整代码地址:
https://gitee.com/jltfcloudcn/jump_to/tree/master/ComponentTransitionAnimation
©本站发布的所有内容,包括但不限于文字、图片、音频、视频、图表、标志、标识、广告、商标、商号、域名、软件、程序等,除特别标明外,均来源于网络或用户投稿,版权归原作者或原出处所有。我们致力于保护原作者版权,若涉及版权问题,请及时联系我们进行处理。
分类
其它
标签
鸿蒙
操作系统
HarmonyOS
相关推荐
运维态高效处理应用冻屏
鸿蒙小助手
87
0HarmonyOS 5 相机与相册集成:从拍照到图片编辑的全链路实现
王争
115
0HarmonyOS防抖节流实战:搜索输入与按钮点击的频率控制
鸽芷咕
497
0
Q
我还没有写个人简介......
85
帖子
0
提问
245
粉丝
最新发布
智能体安全面临 6 大挑战:企业 AI 落地的新防线
2026-05-28 14:31:49 发布谁可以做鸿蒙开发者?答案是:所有人
2025-12-02 13:05:36 发布热门推荐
京公网安备:11010502051901号