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%') 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
分享
微博
QQ
微信
回复
2024-02-01 17:23:00


相关问题
HarmonyOS 路由的动画没办法
419浏览 • 1回复 待解决
HarmonyOS 怎么pixelmap颜色
569浏览 • 1回复 待解决
转场动画,谁有好的方案
1201浏览 • 1回复 待解决
MenuItem里的icon图标怎么颜色
2953浏览 • 1回复 待解决
可以颜色创建pixelmap
870浏览 • 1回复 待解决
HarmonyOS SideBarContainer 转场动画
530浏览 • 1回复 待解决
如何实现动画转场效果
1679浏览 • 1回复 待解决
如何全局设置页面转场动画
1176浏览 • 1回复 待解决
Tabs 出现/消失转场动画效果
1041浏览 • 1回复 待解决
HarmonyOS Navigation实现Dialog转场动画
683浏览 • 1回复 待解决
HarmonyOS 页面内的组件转场动画
1032浏览 • 1回复 待解决
HarmonyOS navigation导航转场动画怎么写
716浏览 • 1回复 待解决
HarmonyOS Refresh和页面转场动画demo
620浏览 • 1回复 待解决
HarmonyOS 无感转场动画推荐方案
787浏览 • 1回复 待解决
HarmonyOS 复用转场动画示例3问题
677浏览 • 1回复 待解决
请问如何去掉ability的转场动画
11876浏览 • 2回复 待解决