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
我用你的代码试了一下,@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
组件也无法响应这些动画效果。这与组件的功能定位和设计限制有关。