HarmonyOS 鸿蒙Next @Styles装饰器定义的animation动画在Text组件上有效,在Divider组件上为什么会失效

HarmonyOS 鸿蒙Next @Styles装饰器定义的animation动画在Text组件上有效,在Divider组件上为什么会失效 代码如下:


```javascript
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  [@State](/user/State) currentIndex: number = 0;
  private tabsController = new TabsController()

  [@Builder](/user/Builder) tabBarBuilder(tabName: string, index: number){
    Column(){
      Text(tabName)
        .layoutWeight(1)
        .fontColor(this.currentIndex===index ? Color.Blue : Color.Black)
        .animationStyle()
      Divider()
        .color(Color.Blue)
        .strokeWidth(3)
        .opacity(this.currentIndex===index ? 1 : 0)
        .animation({
          duration: 1000,
          curve: Curve.EaseInOut,
          playMode: PlayMode.Normal
        })
    }
    .height('100%')
  }

  build() {
    Column(){
      Tabs({barPosition: BarPosition.End, controller: this.tabsController}){
        TabContent(){
          Text('TabContent1')
        }
        .tabBar(this.tabBarBuilder('tab1', 0))

        TabContent(){
          Text('TabContent2')
        }
        .tabBar(this.tabBarBuilder('tab2', 1))
      }
      .barBackgroundColor(Color.Orange)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .backgroundColor(Color.Pink)
      .divider(null)
      .barMode(BarMode.Fixed)
      .expandSafeArea([])
    }
  }
}

[@Styles](/user/Styles) function animationStyle(){
  .animation({
    duration: 500,
    curve: Curve.EaseInOut,
    playMode: PlayMode.Normal
  })
}

更多关于HarmonyOS 鸿蒙Next @Styles装饰器定义的animation动画在Text组件上有效,在Divider组件上为什么会失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

我用你的代码试了一下,@Styles装饰器定义的animation动画在Text组件上也不生效。

实际上是@Style只支持通用属性和通用事件:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-style-V5#装饰器使用说明。

.animation() 不是通用属性,也不是通用事件,所以不生效

更多关于HarmonyOS 鸿蒙Next @Styles装饰器定义的animation动画在Text组件上有效,在Divider组件上为什么会失效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,@Styles装饰器用于定义样式,而animation属性用于定义动画效果。Text组件支持animation属性,因此在该组件上应用@Styles定义的动画是有效的。然而,Divider组件是一个简单的分割线组件,主要用于视觉上的分隔,它并不支持animation属性,因此在Divider组件上应用@Styles定义的动画会失效。

具体来说,Divider组件的设计初衷是提供一种简单的、无交互的分隔线,它不具备动画功能。因此,即使通过@Styles装饰器定义了动画,Divider组件也无法响应这些动画效果。这与组件的功能定位和设计限制有关。

回到顶部