建站公司都有哪些,天津 公司网站建设,wordpress主题 摄影,学校部门网站建设总结【关键字】
HarmonyOS、ArkTS、组件内转场动画、颜色异常 【问题描述】
根据组件内转场动画文档中示例编写代码#xff0c;使用动画转场组件button#xff0c;并给button设置背景色让button透明度为0#xff0c;实现动画转场时#xff0c;会先出现默认蓝色button#xf…【关键字】
HarmonyOS、ArkTS、组件内转场动画、颜色异常 【问题描述】
根据组件内转场动画文档中示例编写代码使用动画转场组件button并给button设置背景色让button透明度为0实现动画转场时会先出现默认蓝色button然后动画再消失问题代码如下所示
State flag: boolean true;
State show: string show;build() {Column() {Button(this.show).width(80).height(30).margin(30).onClick(() {if (this.flag) {this.show hide;} else {this.show show;}animateTo({ duration: 1000 }, () {this.flag !this.flag;})})if (this.flag) {Button(按钮).transition({ type: TransitionType.Insert, translate: { x: 20, y: -20 } }).transition({ type: TransitionType.Delete, opacity: 0, scale: { x: 0, y: 0 } }).backgroundColor(rgba(255,255,255,0)).width(100).height(30).margin(5)}}
}
问题现象请见下图中间button按钮动画显示的时候应该透明的但是出现了蓝色按钮再消失现象 【问题分析与解决】
设置组件转场动画时若组件存在默认背景色或者其他默认属性颜色使用上述方式设置转场动画时会闪现默认属性颜色目前可通过如下方式解决如组件本身就不可见可不通过if判断this.flag变量来控制而是通过组件的visibility属性判断是否显示代码如下所示这样就可以解决button播放动画时默认颜色显示问题了。
build() {Column() {Button(this.show).width(80).height(30).margin(30).onClick(() {if (this.flag) {this.show hide;} else {this.show show;}animateTo({ duration: 1000 }, () {this.flag !this.flag;})})Button(按钮).transition({ type: TransitionType.Insert, translate: { x: 20, y: -20 } }).transition({ type: TransitionType.Delete, opacity: 0, scale: { x: 0, y: 0 } }).visibility(this.flag ? Visibility.Visible : Visibility.None).backgroundColor(rgba(255,255,255,0)).width(100).height(30).margin(5)}
} 【参考文档】
https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/arkts-transition-animation-within-component-0000001500755277-V3
