HarmonyOS 动画效果实现

现在有一个动画效果,从两侧开始向中间展示,有相关的api或者转场动画这种怎么实现?

HarmonyOS
2024-12-25 12:30:51
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Excelsior_abit

转场动画可以参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-animation-transition-V5

参考示例如下:

@Entry
@Component
struct ToggleExample {
  @State show: boolean = true
  build() {
    Column() {
      Button("启动过场动画").onClick(() => {
        this.show = !this.show
      })
      Stack() {
        Column() {
          Text("最终需展示组件").fontColor(Color.White)
        }.width("100%")
        .height("100%")
        .backgroundColor(Color.Red)

        if (this.show) {
          // 有过场动画的组件,一开始默认展示,没有动画,消失的时候,会有动画,变淡并缩小
          Column() {
            Text("过场动画组件").fontColor(Color.White)
          }.width("100%")
          .height("100%")
          .backgroundColor(Color.Blue)
          .transition(
            // TransitionEffect.scale({ z: 1, x: 0 })
            TransitionEffect.OPACITY.animation({ duration: 2000, curve: Curve.Ease }).combine(
              TransitionEffect.asymmetric(
                TransitionEffect.scale({ x: 1 }),
                TransitionEffect.scale({ x: 0 })
              )
            )
          )
        }
      }
      .width("100%")
      .layoutWeight(1)

    }
  }
}
分享
微博
QQ
微信
回复
2024-12-25 15:28:05
相关问题
HarmonyOS clipShape 动画效果实现
1116浏览 • 0回复 待解决
HarmonyOS 效果实现方案
1798浏览 • 1回复 待解决
HarmonyOS list选中效果实现
885浏览 • 1回复 待解决
HarmonyOS 类似翻页效果实现
1309浏览 • 1回复 待解决
HarmonyOS 首页轮播效果实现
877浏览 • 1回复 待解决
动态布局下加载loading效果实现
1972浏览 • 1回复 待解决
PopWindow的效果实现有哪些?
1611浏览 • 1回复 待解决
HarmonyOS APP里面的搜索的转场效果实现
1126浏览 • 1回复 待解决
引导遮罩效果实现的最佳方案
2507浏览 • 1回复 待解决
如何实现动画转场效果
2072浏览 • 1回复 待解决
属性动画如何实现宽高动画效果
3192浏览 • 1回复 待解决
HarmonyOS 实现按钮长按动画效果
1393浏览 • 1回复 待解决
文字动画效果如何实现
3841浏览 • 0回复 待解决
panGesture结合动画实现fling效果
1964浏览 • 1回复 待解决
渐变动画效果如何实现
471浏览 • 0回复 待解决
在 ArkUl中如何实现动画效果?
861浏览 • 0回复 待解决
鸿蒙中怎么实现动画翻转效果
11731浏览 • 2回复 待解决
如何实现list的折叠动画效果
1646浏览 • 1回复 待解决
HarmonyOS 列表动画效果
1128浏览 • 1回复 待解决
HarmonyOS 动画效果+手势
913浏览 • 1回复 待解决
HarmonyOS List动画效果
969浏览 • 1回复 待解决
HarmonyOS .scale没有动画效果
775浏览 • 1回复 待解决