🚀前言
转场动画是一种在电影、视频和演示文稿中使用的动画效果，用于平滑地切换不同的场景或幻灯片。转场动画可以增加视觉吸引力，改善观众的观看体验。
常见的转场动画包括淡入淡出、滑动、旋转、放大缩小等效果。这些动画效果可以在场景之间创建无缝的过渡，使观众感到自然流畅。
在电影中，转场动画通常用于切换不同的场景或时间段。例如，一个电影可能从一个场景中的角色身上开始，然后通过淡入淡出或滑动的效果过渡到另一个场景中的不同角色。
在视频编辑软件和演示文稿软件中，转场动画常用于创建幻灯片之间的过渡效果。这些过渡可以使幻灯片之间的切换更加流畅和有趣，从而吸引观众的注意力。
转场动画的选择应根据媒体类型、主题和受众类型来进行，以确保动画效果与内容相匹配，并增强用户体验。
🚀一、组件内转场动画
转场动画的接口为：
transition(value: TransitionOptions) 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(() => { animateTo({ duration: 1000 }, () => { // 删除数组的头部元素，导致ForEach删除头部的组件 this.numbers.shift(); }) }) Button('删除尾部元素') .width(160) .fontSize(16) .onClick(() => { animateTo({ duration: 1000 }, () => { // 删除数组的尾部元素，导致ForEach删除尾部的组件 this.numbers.pop(); }) }) } .width('100%') .height('100%') } }
🚀写在最后
- 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
- 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
- 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
- 更多鸿蒙最新技术知识点，请关注作者博客：https://t.doruo.cn/14DjR1rEY
