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

​使用TransitionEffect做转场动画,只能改变opacity透明度,而且影响子组件透明度。是否有API可以改背景颜色?

或者使用属性动画animateTo的时候,怎么在组件出现和消失的时候触发?尝试过aboutToAppear里触发,未达到预期。


HarmonyOS
2024-01-31 10:21:02
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
skyyoung

参考代码

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%') 
  } 
}
分享
微博
QQ
微信
回复
2024-02-01 17:23:00
相关问题
请问如何去掉ability的转场动画
9385浏览 • 2回复 待解决
MenuItem里的icon图标怎么颜色
276浏览 • 1回复 待解决
求教ArkUI如何实现组合动画
3819浏览 • 1回复 待解决
怎么通知上的图标有知道的?
2252浏览 • 1回复 待解决
ArkUI 支持 Tcp Server
1335浏览 • 1回复 待解决
鸿蒙里面有alpha动画
5123浏览 • 1回复 已解决
ArkUI没有table组件
1630浏览 • 1回复 待解决
求助动画效果问题有懂的
2610浏览 • 1回复 待解决
如何定义dialog动画,有人知道?
381浏览 • 1回复 待解决
半模态转场如何控制固定高度
187浏览 • 1回复 待解决
求大佬告知ArkUI有图表组件
139浏览 • 1回复 待解决
属性动画如何实现宽高动画效果
125浏览 • 1回复 待解决
鸿蒙可以玩王者可以玩吃鸡
6989浏览 • 2回复 待解决
XComponent组件如何设置背景颜色
358浏览 • 1回复 待解决
关于属性动画的问题?
8386浏览 • 3回复 待解决