当前位置：首页 > news >正文

鸿蒙开发-UI-动画-组件内转场动画

news 2025/9/12 22:04:53

鸿蒙开发-UI-组件3

鸿蒙开发-UI-气泡/菜单

鸿蒙开发-UI-页面路由

鸿蒙开发-UI-组件导航-Navigation

鸿蒙开发-UI-组件导航-Tabs

鸿蒙开发-UI-图形-图片

鸿蒙开发-UI-图形-绘制几何图形

鸿蒙开发-UI-图形-绘制自定义图形

鸿蒙开发-UI-图形-页面内动画

文章目录

前言

一、基本概念

二、组件内转场动画

1.if/else产生组件内转场动画

2.ForEach产生组件内转场动画

总结

前言

上文细学习了鸿蒙开发UI使用动画相关知识，了解动画的两个维度的分类方式，详细学习了页面内动画-布局更新动画，本文将学习组件内转场动画。

一、基本概念

组件的插入、删除过程即为组件本身的转场过程，组件的插入、删除动画称为组件内转场动画，通过组件内转场动画定义组件出现、消失的效果。

组件内转场动画的接口

transition(value: TransitionOptions)

二、组件内转场动画

1.if/else产生组件内转场动画

代码示例

@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';}
//step2: 在animateTo闭包中改变flag的值,由flag变化所引起的Image组件的插入删除，都要按照动画参数产生动画         animateTo({ duration: 1000 }, () => {this.flag = !this.flag;})})if (this.flag) {
//step1：Image组件是由if控制的组件，给其加上transition的参数，以指定组件内转场的具体效果
//TransitionType.Insert【插入时加上平移效果】
//TransitionType.Delete【删除时加上缩放和透明度效果】Image($r('app.media.mountain')).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%')}
}

注：transition必须配合animateTo一起使用，在animateTo的闭包中，控制组件的插入、删除并指定指定动画参数，transition定义动画样式

2.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) => {
//step1： 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 }, () => {
//step2： 在animateTo的闭包中控制组件的插入或删除
//往numbers数组头部插入一个元素，导致ForEach在头部增Text组件
//部增Text组件按照transition定义的样式实现组件转场动画效果this.numbers.unshift(this.startNumber.toString());this.startNumber++;})})}.width('100%').height('100%')}
}

注：Column布局方式设为了FlexAlign.Start，即垂直方向从头部开始布局。

1. 往数组末尾添加元素时，并不会对数组中现存元素对应的组件位置造成影响，只会触发新增组件的插入动画。

2. 往数组头部添加元素时，原来数组中的所有元素的下标都增加了，虽然不会触发其添加或者删除，但是会影响到对应组件的位置。所以除新增的组件会做transition动画以外，之前存在于ForEach中组件也会做位置动画。