【HarmonyOS】实现一个自定义带圆点的进度条效果。

方案就是做一个圆角组件，然后利用rotate旋转，至于动画效果，我查了一下文档，只要设置enableSmoothEffect:false，就可以关闭动画，然后自己开个定时器，判断实际进度与动画进度的差值每隔10毫秒执行一次就行了。

上面的gif图比较卡是因为录屏转gif掉帧了哈，实际代码执行很流畅。

【代码】

@Entry
@Component
struct Page03 {@State value: number = 70 //实际进度，单位%@State valueAnim: number = 10 //动画进度，单位%progressId: number = 0aboutToAppear(): void {this.progressId = setInterval(() => {if (this.value > this.valueAnim) {this.valueAnim += 1} else if (this.value < this.valueAnim) {this.valueAnim -= 1}}, 10)}aboutToDisappear(): void {clearInterval(this.progressId)}build() {Column() {Button('设置为0%').onClick(() => {this.value = 0})Button('设置为50%').onClick(() => {this.value = 50})Button('设置为68%').onClick(() => {this.value = 68})Button('设置为100%').onClick(() => {this.value = 100})Stack() {// Image() //这里展示向内渐变的圆形图片做北京Text(`${this.valueAnim}%`) //这里展示进度Text('本月任务进度').fontSize('15lpx').margin({ top: '100lpx' })Progress({ value: this.valueAnim, total: 100, type: ProgressType.Ring }).width('200lpx').color(Color.Orange).style({ strokeWidth: 5, shadow: false ,enableSmoothEffect:false}) //这里系统进度条，可以实现无圆点进度Text().width('50lpx') //重点来了，这里的图片是一个png,但只有正上方有一个白芯的圆点，然后根据进度计算角度把图片进行旋转，也就是Image().rotate(根据进度计算角度哈)Stack() {Text().backgroundColor(Color.White).borderColor(Color.Orange).borderWidth(5).width('27lpx').height('27lpx').borderRadius('50lpx')}.width('220lpx').height('220lpx').align(Alignment.Top).rotate({angle:this.valueAnim / 100 * 360})}.width('300lpx').height('300lpx').backgroundColor(Color.Pink)}.height('100%').width('100%')}
}