鸿蒙6.0应用开发——出现消失转场动画

图文混排是指图片与文字混合排列，文字可展示于图片四周。此排列方式能够直观呈现页面信息，增强视觉冲击力，使页面展示效果更加多样化。

高心星

260人浏览 · 2026-04-13 09:45:00

高心星 · 2026-04-13 09:45:00 发布

transition是基础的组件转场接口，用于实现一个组件出现或者消失时的动画效果。可以通过TransitionEffect对象的组合使用，定义出各式效果。

表1 转场效果接口

转场效果	说明	动画
IDENTITY	禁用转场效果。	无。
OPACITY	默认的转场效果，透明度转场。	出现时透明度从0到1，消失时透明度从1到0。
SLIDE	滑动转场效果。	出现时从窗口左侧滑入，消失时从窗口右侧滑出。
translate	通过设置组件平移创建转场效果。	出现时，平移参数的值从translate接口设置的值变化为默认值0，消失时从默认值0变化为translate接口设置的值。
rotate	通过设置组件旋转创建转场效果。	出现时，旋转参数的值从rotate接口设置的值变化为默认值0，消失时从默认值0变化为rotate接口设置的值。
opacity	通过设置透明度参数创建转场效果。	出现时，透明度参数的值从opacity设置的值变化为透明度默认值1，消失时从透明度默认值1变化为opacity设置的值。
move	通过TransitionEdge创建从窗口哪条边缘出来的效果。	出现时从TransitionEdge方向滑入，消失时滑出到TransitionEdge方向。
asymmetric	通过此方法组合非对称的出现消失转场效果。- appear：出现转场的效果。- disappear：消失转场的效果。	出现时采用appear设置的TransitionEffect出现效果，消失时采用disappear设置的TransitionEffect消失效果。
combine	组合其他TransitionEffect。	组合其他TransitionEffect，一起生效。
animation	定义转场效果的动画参数：- 如果不定义会跟随animateTo的动画参数。- 不支持通过控件的animation接口配置动画参数。- TransitionEffect中animation的onFinish不生效。	调用顺序是从上往下，上面TransitionEffect的animation也会作用到下面TransitionEffect。

创建TransitionEffect。

// 出现时会是所有出现转场效果的叠加，消失时会是所有消失转场效果的叠加
// 说明各个effect跟随的动画参数
private effect: object =
  TransitionEffect.OPACITY // 创建了透明度转场效果，这里没有调用animation接口，会跟随animateTo的动画参数
    // 通过combine方法，添加缩放转场效果，并指定了springMotion(0.6, 1.2)曲线
    .combine(TransitionEffect.scale({ x: 0, y: 0 }).animation({ curve: curves.springMotion(0.6, 1.2) }))
    // 添加旋转转场效果，这里的动画参数会跟随上面的TransitionEffect，也就是springMotion(0.6, 1.2)
    .combine(TransitionEffect.rotate({ angle: 90 }))
    // 添加平移转场效果，动画参数会跟随其之上带animation的TransitionEffect，也就是springMotion(0.6, 1.2)
    .combine(TransitionEffect.translate({ x: 150, y: 150 }))
    // 添加move转场效果，并指定了springMotion曲线
    .combine(TransitionEffect.move(TransitionEdge.END)).animation({curve: curves.springMotion()})
    // 添加非对称的转场效果，由于这里没有设置animation，会跟随上面的TransitionEffect的animation效果，也就是springMotion
    .combine(TransitionEffect.asymmetric(TransitionEffect.scale({
      x: 0,
      y: 0
    }), TransitionEffect.rotate({ angle: 90 })));

代码逻辑走读：

创建了一个透明度转场效果TransitionEffect.OPACITY，它是一个基础效果，后续的转场效果都会基于这个透明度效果进行组合。
使用.combine()方法添加了缩放转场效果TransitionEffect.scale({ x: 0, y: 0 }).animation({ curve: curves.springMotion(0.6, 1.2) })，并且指定了自定义的弹簧运动曲线。
添加了旋转转场效果TransitionEffect.rotate({ angle: 90 })，这个效果的动画参数会跟随上面的缩放效果的动画参数，即使用相同的弹簧运动曲线。
添加了平移转场效果TransitionEffect.translate({ x: 150, y: 150 })，其动画参数同样会跟随缩放和旋转效果的动画参数。
添加了移动转场效果TransitionEffect.move(TransitionEdge.END).animation({curve: curves.springMotion()})，并指定了自定义的弹簧运动曲线。
添加了不对称转场效果TransitionEffect.asymmetric(TransitionEffect.scale({ x: 0, y: 0 }), TransitionEffect.rotate({ angle: 90 }))，如果没有设置动画参数，则会跟随上面的动画效果，即使用弹簧运动曲线。

将转场效果通过transition接口设置到组件。
```
Text('test')  .transition(this.effect)
```

新增或者删除组件触发转场。

@State isPresent: boolean = true;
// ...
if (this.isPresent) {
  Text('test')
    .transition(this.effect)
}
// ...
// 控制新增或者删除组件
// 方式一：将控制变量放到animateTo闭包内，未通过animation接口定义动画参数的TransitionEffect将跟随animateTo的动画参数
this.getUIContext()?.animateTo({ curve: curves.springMotion() }, () => {
  this.isPresent = false;
})

// 方式二：直接控制删除或者新增组件，动画参数由TransitionEffect的animation接口配置
this.isPresent = false;

代码逻辑走读：

状态声明：使用@State装饰器声明了一个布尔类型的状态变量isPresent，初始值为true。
条件渲染：在条件渲染中，如果isPresent为true，则渲染一个Text组件，并应用过渡效果。
动画控制：
- 方式一：通过animateTo方法配置动画参数（使用弹簧运动曲线），并在动画闭包内修改isPresent状态，从而控制组件的显示与隐藏。
- 方式二：直接修改isPresent状态为false，实现组件的隐藏，动画参数由TransitionEffect的animation接口配置。

完整的示例代码和效果如下，示例中采用直接删除或新增组件的方式触发转场，也可以替换为在animateTo闭包内改变控制变量触发转场。

import { curves } from '@kit.ArkUI';

@Entry
@Component
struct TransitionEffectDemo {
  @State isPresent: boolean = false;
  // 第一步：创建TransitionEffect
  private effect: TransitionEffect =
    // 创建默认透明度转场效果，并指定了springMotion(0.6, 0.8)曲线
    TransitionEffect.OPACITY.animation({
      curve: curves.springMotion(0.6, 0.8)
    })// 通过combine方法，这里的动画参数会跟随上面的TransitionEffect，也就是springMotion(0.6, 0.8)
      .combine(TransitionEffect.scale({
        x: 0,
        y: 0
      }))// 添加旋转转场效果，这里的动画参数会跟随上面带animation的TransitionEffect，也就是springMotion(0.6, 0.8)
      .combine(TransitionEffect.rotate({ angle: 90 }))// 添加平移转场效果，这里的动画参数使用指定的springMotion()
      .combine(TransitionEffect.translate({ y: 150 })
        .animation({ curve: curves.springMotion() }))// 添加move转场效果，这里的动画参数会跟随上面的TransitionEffect，也就是springMotion()
      .combine(TransitionEffect.move(TransitionEdge.END));

  build() {
    Stack() {
      if (this.isPresent) {
        Column() {
          Text('ArkUI')
            .fontWeight(FontWeight.Bold)
            .fontSize(20)
            .fontColor(Color.White)
        }
        .justifyContent(FlexAlign.Center)
        .width(150)
        .height(150)
        .borderRadius(10)
        .backgroundColor(0xf56c6c)
        // 第二步：将转场效果通过transition接口设置到组件
        .transition(this.effect)
      }

      // 边框
      Column()
        .width(155)
        .height(155)
        .border({
          width: 5,
          radius: 10,
          color: Color.Black
        })

      // 第三步：新增或者删除组件触发转场，控制新增或者删除组件
      Button('Click')
        .margin({ top: 320 })
        .onClick(() => {
          this.isPresent = !this.isPresent;
        })
    }
    .width('100%')
    .height('60%')
  }
}

代码逻辑走读：

导入模块：代码首先导入了curves模块，该模块提供了各种动画曲线，用于定义转场动画的动力学行为。
组件定义：定义了一个名为TransitionEffectDemo的组件，该组件使用了@Entry和@Component装饰器，表示这是一个入口组件。
状态管理：使用@State装饰器定义了一个布尔类型的状态变量isPresent，用于控制组件的显示和隐藏。
转场效果创建：
- 创建了一个默认的透明度转场效果TransitionEffect.OPACITY，并指定了自定义的弹簧运动曲线curves.springMotion(0.6, 0.8)。
- 通过combine方法逐步添加了缩放、旋转、平移和移动转场效果，每个转场效果的动画参数都会跟随上面的弹簧运动曲线。
组件构建：
- 使用Stack布局容器，包含一个条件渲染的Column组件和一个Column边框。
- 当isPresent为true时，渲染一个包含文本"ArkUI"的Column组件，并应用之前定义的转场效果。
- 添加一个Button组件，当点击按钮时，切换isPresent的状态，从而触发组件的显示和隐藏。
布局和样式：
- 使用width、height、borderRadius、backgroundColor等属性设置组件的布局和样式。
- 使用border属性为Column组件添加边框。
- 使用margin属性为Button组件设置位置。

在这里插入图片描述

对多个组件添加转场效果时，可以在animation动画参数中配置不同的delay值，实现组件渐次出现消失的效果：

const ITEM_COUNTS = 9;
const ITEM_COLOR = '#ED6F21';
const INTERVAL = 30;
const DURATION = 300;

@Entry
@Component
struct Index1 {
  @State isGridShow: boolean = false;
  private dataArray: number[] = new Array(ITEM_COUNTS);

  aboutToAppear(): void {
    for (let i = 0; i < ITEM_COUNTS; i++) {
      this.dataArray[i] = i;
    }
  }

  build() {
    Stack() {
      if (this.isGridShow) {
        Grid() {
          ForEach(this.dataArray, (item: number, index: number) => {
            GridItem() {
              Stack() {
                Text((item + 1).toString())
              }
              .size({ width: 50, height: 50 })
              .backgroundColor(ITEM_COLOR)
              .transition(TransitionEffect.OPACITY
                .combine(TransitionEffect.scale({ x: 0.5, y: 0.5 }))// 对每个方格的转场添加delay，实现组件的渐次出现消失效果
                .animation({ duration: DURATION, curve: Curve.Friction, delay: INTERVAL * index }))
              .borderRadius(10)
            }
            // 消失时，如果不对方格的所有父控件添加转场效果，则方格的消失转场不会生效
            // 此处让方格的父控件在出现消失转场时一直以0.99的透明度显示，使得方格的转场效果不受影响
            .transition(TransitionEffect.opacity(0.99))
          }, (item: number) => item.toString())
        }
        .columnsTemplate('1fr 1fr 1fr')
        .rowsGap(15)
        .columnsGap(15)
        .size({ width: 180, height: 180 })
        // 消失时，如果不对方格的所有父控件添加转场效果，则方格的消失转场不会生效
        // 此处让父控件在出现消失转场时一直以0.99的透明度显示，使得方格的转场效果不受影响
        .transition(TransitionEffect.opacity(0.99))
      }
    }
    .size({ width: '100%', height: '100%' })
    .onClick(() => {
      this.getUIContext()?.animateTo({
        duration: DURATION + INTERVAL * (ITEM_COUNTS - 1),
        curve: Curve.Friction
      }, () => {
        this.isGridShow = !this.isGridShow;
      })
    })
  }
}

代码逻辑走读：

常量定义：定义了四个常量ITEM_COUNTS、ITEM_COLOR、INTERVAL和DURATION，分别表示项目数量、项目颜色、间隔时间和动画持续时间。
组件声明：使用@Entry和@Component装饰器声明了一个名为Index1的组件，并定义了一个状态变量isGridShow，用于控制网格的显示和隐藏。
数据初始化：在aboutToAppear生命周期方法中，初始化dataArray数组，使其包含从0到ITEM_COUNTS - 1的数字。
组件构建：
- 使用Stack布局容器来包裹整个组件的内容。
- 使用条件渲染，当isGridShow为true时，显示网格布局。
- 网格布局使用Grid组件，并通过ForEach循环遍历dataArray数组，为每个项目创建一个GridItem。
- 每个GridItem包含一个Stack布局，内部有一个Text组件，显示项目编号。
- 设置GridItem的样式，包括大小、背景颜色和圆角。
- 为每个GridItem添加转场效果，使其在出现和消失时带有渐次动画。
- 设置网格的布局属性，如列模板、行间距、列间距和大小。
- 为网格添加转场效果，确保网格的显示和隐藏过程平滑。
- 设置组件的点击事件，点击时切换isGridShow状态，并根据项目数量和间隔时间计算动画的持续时间。