HarmonyOS 鸿蒙Next Progress组件的宽高值不支持动画 定位原因及解决办法
HarmonyOS 鸿蒙Next Progress组件的宽高值不支持动画 定位原因及解决办法
项目中视频录制按钮使用的Progress组件，该组件上下移动时，需要动态修改Progress组件的宽高值，做出的实际效果很奇怪，
调试发现Progress组件的宽高值不支持动画，动画开始就直接使用了最终的宽高值，我们项目里面动画时间是300ms，动画时间调到6s可以清楚的看到Progress组件的宽高值不支持动画，请问有什么解决办法吗？
demo：
struct Index {
@State cameraTranslateY: number = 0
@State cameraBtnSize: number = 65
@State isTranslate: boolean = false // 是否已经向下平移
aboutToAppear(): void {
}
clickEvent() {
if (this.isTranslate) {
animateTo({ duration: 6000, iterations: 1, playMode: PlayMode.Alternate }, () => {
this.cameraTranslateY = 0
this.cameraBtnSize = 65
})
} else {
animateTo({ duration: 6000, iterations: 1, playMode: PlayMode.Alternate }, () => {
this.cameraTranslateY = 100
this.cameraBtnSize = 50
})
}
this.isTranslate = !this.isTranslate
}
build() {
RelativeContainer() {
Text(‘点击Progress组件即可看到效果’)
.alignRules({
top: { anchor: ‘container’, align: VerticalAlign.Top },
middle: { anchor: ‘container’, align: HorizontalAlign.Center }
})
.margin({ top: 60 })
Row() {
Progress({ value: 50, total: 100, type: ProgressType.Ring })
.width(this.cameraBtnSize + 30)
.aspectRatio(1)
.color(’#FFA04F’)
.backgroundColor(’#F3F3F3’)
.style({ strokeWidth: 3 })
.padding(15)
.onClick(() => {
this.clickEvent()
})
}
.width(this.cameraBtnSize + 30)
.aspectRatio(1)
.alignRules({
center: { anchor: ‘container’, align: VerticalAlign.Center },
middle: { anchor: ‘container’, align: HorizontalAlign.Center }
})
.backgroundColor(Color.Grey)
.translate({
y: this.cameraTranslateY
})
}
.width(‘100%’)
.height(‘100%’)
.backgroundColor(Color.White)
}
}
可以试下使用animator 实现：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-animator-V5
如：
import { Animator as animator, AnimatorResult } from '@kit.ArkUI';
@Entry
@Component
struct ProgressDemo {
@State cameraTranslateY: number = 0
@State cameraBtnSize: number = 65
@State isTranslate: boolean = false // 是否已经向下平移
private backAnimator: AnimatorResult | undefined = undefined
create() {
this.backAnimator = animator.create({// 建议使用 this.getUIContext.creatAnimator()接口
duration: 6000,
easing: "ease",
delay: 0,
fill: "forwards",
direction: "normal",
iterations: 1,
begin: 100,
end: 50
})
this.backAnimator.onFinish = ()=> {
console.info('backAnimator onfinish')
}
this.backAnimator.onRepeat = ()=> {
console.info('backAnimator repeat')
}
this.backAnimator.onCancel = ()=> {
console.info('backAnimator cancel')
}
this.backAnimator.onFrame = (value:number)=> {
this.cameraBtnSize = value
}
}
aboutToAppear(): void {
this.create()
}
clickEvent() {
if (this.isTranslate) {
animateTo({ duration: 6000, iterations: 1, playMode: PlayMode.Alternate }, () => {
this.cameraTranslateY = 0
this.cameraBtnSize = 65
})
} else {
animateTo({ duration: 6000, iterations: 1, playMode: PlayMode.Alternate }, () => {
this.cameraTranslateY = 100
this.cameraBtnSize = 50
})
}
this.isTranslate = !this.isTranslate
}
build() {
RelativeContainer() {
Text('点击Progress组件即可看到效果')
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
.margin({ top: 60 })
Row() {
Progress({ value: 50, total: 100, type: ProgressType.Ring })
.width(this.cameraBtnSize + 30)
.aspectRatio(1)
.color('#FFA04F')
.backgroundColor('#F3F3F3')
.style({ strokeWidth: 3 })
.padding(15)
.onClick(() => {
// this.clickEvent()
this.isTranslate = !this.isTranslate
if (this.isTranslate) {
this.backAnimator?.play();
} else {
this.backAnimator?.reverse()
}
})
}
.width(this.cameraBtnSize + 30)
.aspectRatio(1)
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
.backgroundColor(Color.Grey)
.translate({
y: this.cameraTranslateY
})
}
.width('100%')
.height('100%')
.backgroundColor(Color.White)
}
}
作为IT专家，对于HarmonyOS 鸿蒙Next Progress组件宽高值不支持动画的问题，以下是定位原因及解决办法：
定位原因：
HarmonyOS鸿蒙Next的Progress组件，其宽高值不支持动画效果的原因，可能在于组件本身的属性设计。在HarmonyOS的UI框架中，部分组件的属性（如宽高）可能并未被设计为支持动画过渡效果。此外，如果组件的宽高是通过布局容器（如Row、Column等）的约束来确定的，那么直接对这些属性进行动画处理可能会受到限制。
解决办法：
- 使用布局类动画：考虑使用布局类的动画效果，如通过改变布局容器的尺寸来间接影响Progress组件的尺寸。这可以通过动画框架（如animateTo）来实现，但需要注意动画的终点状态和目标效果。
- 自定义动画：如果标准动画效果无法满足需求，可以考虑通过自定义动画来实现。例如，使用Canvas或其他绘图工具在组件上绘制动画效果，但这需要较高的编程技巧。
- 更新组件版本：检查并更新HarmonyOS的开发工具和组件库到最新版本，以查看是否增加了对宽高动画的支持。
如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。
