transition函数的入参为组件内转场的效果，可以定义平移、透明度、旋转、缩放这几种转场样式的单个或者组合的转场效果，必须和animateTo一起使用才能产生组件转场效果。
1.transition常见用法
在HarmonyOS中，transition（过渡）是指在UI界面的元素之间进行平滑的动画切换的一种功能。在过渡中，可以定义元素的插入、删除、移动等动画效果。TransitionType是用来指定过渡类型的枚举值，包括以下三种类型：
- TransitionType.All：表示在过渡中包含所有类型的动画效果，包括插入、删除和移动。当使用TransitionType.All时，所有相关元素的过渡动画都会被应用。
- TransitionType.Insert：表示只在过渡中包含插入类型的动画效果。当新的元素被插入到UI界面中时，使用TransitionType.Insert可以定义其出现的动画效果。
- TransitionType.Delete：表示只在过渡中包含删除类型的动画效果。当元素被从UI界面中删除时，使用TransitionType.Delete可以定义其消失的动画效果。
通过使用这些过渡类型，开发者可以在HarmonyOS应用中实现更加流畅、吸引人的界面切换效果。
Button() .transition({ type: TransitionType.All, scale: { x: 0, y: 0 } }) Button() .transition({ type: TransitionType.Insert, translate: { x: 200, y: -200 }, opacity: 0 }) .transition({ type: TransitionType.Delete, rotate: { x: 0, y: 0, z: 1, angle: 360 } })
2.if/else产生组件内转场动画
🦋2.1 无任何动画
@Entry @Component struct IfElseTransition { @State flag: boolean = true; @State show: string = 'show';
build() { Column() { Button(this.show).width(80).height(30).margin(30) .onClick(() => { if (this.flag) { this.show = 'hide'; } else { this.show = 'show'; } // 点击Button控制Image的显示和消失 this.flag = !this.flag; }) if (this.flag) { Image($r('app.media.mountain')).width(200).height(200) } }.height('100%').width('100%') } }
🦋2.2 无任何动画
@Entry @Component struct IfElseTransition { @State flag: boolean = true; @State show: string = 'show';
build() { Column() { Button(this.show).width(80).height(30).margin(30) .onClick(() => { if (this.flag) { this.show = 'hide'; } else { this.show = 'show'; }
animateTo({ duration: 1000 }, () => { // 动画闭包内控制Image组件的出现和消失 this.flag = !this.flag; }) }) if (this.flag) { // Image的出现和消失配置为不同的过渡效果 Image($r('app.media.img_2')).width(200).height(200) .transition({ type: TransitionType.Insert, translate: { x: 200, y: -200 } }) .transition({ type: TransitionType.Delete, opacity: 0, scale: { x: 0, y: 0 } }) } }.height('100%').width('100%') } }
3.ForEach产生组件内转场动画
@Entry @Component struct ForEachTransition { @State numbers: string[] = ["1", "2", "3", "4", "5"] startNumber: number = 6;
build() { Column({ space: 10 }) { Column() { ForEach(this.numbers, (item) => { // ForEach下的直接组件需配置transition效果 Text(item) .width(240) .height(60) .fontSize(18) .borderWidth(1) .backgroundColor(Color.Orange) .textAlign(TextAlign.Center) .transition({ type: TransitionType.All, translate: { x: 200 }, scale: { x: 0, y: 0 } }) }, item => item) } .margin(10) .justifyContent(FlexAlign.Start) .alignItems(HorizontalAlign.Center) .width("90%") .height("70%")
Button('向头部添加元素') .fontSize(16) .width(160) .onClick(() => { animateTo({ duration: 1000 }, () => { // 往数组头部插入一个元素，导致ForEach在头部增加对应的组件 this.numbers.unshift(this.startNumber.toString()); this.startNumber++; }) }) Button('向尾部添加元素') .width(160) .fontSize(16) .onClick(() => { animateTo({ duration: 1000 }, () => { // 往数组尾部插入一个元素，导致ForEach在尾部增加对应的组件 this.numbers.push(this.startNumber.toString()); this.startNumber++; }) }) Button('删除头部元素') .width(160) .fontSize(16) .onClick(() => {
深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
