HarmonyOS 鸿蒙Next中转场动画可以在运行时被更改么？

【背景知识】

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

【解决方案】

1. 初始化transitionEffect参数。
2. 将转场效果通过transition接口设置到组件。
3. 直接控制删除或者新增组件，动画参数由transitionEffect的animation接口配置。
4. 给组件设置不同的转场动画。

完整的示例代码和效果如下：

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

@Entry
@Component
struct TransitionEffectDemo1 {
  @State isPresent: boolean = false;
  // 第一步，创建TransitionEffect
  private effect1: 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.START));
  private effect2: 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));
  effect: TransitionEffect|null = null;

  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
        })
      // 第三步：新增或者删除组件触发转场，控制新增或者删除组件
      Column({space: 10}){
        Button('从左侧入场')
          .onClick(() => {
            this.effect = this.effect1
            this.isPresent = !this.isPresent;
          })
        Button('从右侧入场')
          .onClick(() => {
            this.effect = this.effect2
            this.isPresent = !this.isPresent;
          })
      }
      .margin({ top: 320 })
    }
    .width('100%')
    .height('60%')
  }
}