ArkUI转场动画可以改颜色吗 ?

Question

使用TransitionEffect做转场动画，只能改变opacity透明度，而且影响子组件透明度。是否有API可以改背景颜色？
或者使用属性动画animateTo的时候，怎么在组件出现和消失的时候触发？尝试过aboutToAppear里触发，未达到预期。

Answer 1

参考代码

import curves from '@ohos.curves'; 
 
@Entry 
@Component 
struct TransitionEffectDemo { 
  @State isPresent: boolean = true; 
  @State color: Color = Color.Red 
  // 第一步，创建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(this.color) 
        // 第二步：将转场效果通过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; 
          animateTo({ curve: curves.springMotion() }, () => { 
            this.isPresent = !this.isPresent; 
            this.color = this.color === Color.Black ? Color.Red : Color.Black 
          }) 
        }) 
    } 
    .width('100%') 
    .height('60%') 
  } 
}