Progress的ScaleRing样式,如何实现loading效果

Progress的ScaleRing样式,如何实现loading效果

HarmonyOS
2024-04-29 00:17:52
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
gdycp

参考如下Demo:

@Entry 
@Component 
struct ProgressExample { 
  @State progressValue: number = 0 
  @State animationId: number | null = null 
  build() { 
    Column({ space: 15 }) { 
      Progress({ value: 0, total: 100, type: ProgressType.ScaleRing }) 
        .color(Color.Orange) 
        .value(this.progressValue) 
        .width(100) 
        .style({ strokeWidth: 10, scaleCount: 20, scaleWidth: 5, enableSmoothEffect: true }) 
      Progress({ value: 0, total: 100, type: ProgressType.ScaleRing }) 
        .color(Color.Red) 
        .value(this.progressValue) 
        .width(100) 
        .style({ strokeWidth: 10, scaleCount: 20, scaleWidth: 5, enableSmoothEffect: true }) 
      Button('开始动画').onClick(() => { 
        if (this.animationId === null) { 
          this.animationId = setInterval(() => { 
            this.progressValue++ 
            if (this.progressValue == 100) { 
              this.progressValue = 0 
            } 
          }, 10) 
        } 
        console.log(this.animationId.toString()) 
      }) 
      Button('结束动画').onClick(() => { 
        clearInterval(this.animationId) 
        this.animationId = null 
        this.progressValue = 0 
      }) 
    }.width('100%').padding({ top: 5 }) 
  } 
}
分享
微博
QQ
微信
回复
2024-04-29 16:18:16
相关问题
如何通过Progress实现loading效果
63浏览 • 1回复 待解决
动态布局下加载loading效果实现
330浏览 • 1回复 待解决
「多态控件」效果样式确认
713浏览 • 1回复 待解决
Progress进度条如何实现渐变色?
80浏览 • 1回复 待解决
如何实现按钮点击效果
43浏览 • 2回复 待解决
如何实现组件阴影效果
428浏览 • 1回复 待解决
如何实现类似keyframes效果
926浏览 • 1回复 待解决
如何实现通用吸顶效果
223浏览 • 1回复 待解决
如何实现列表页单选效果
1167浏览 • 0回复 待解决
如何实现list折叠动画效果
29浏览 • 1回复 待解决
如何实现动画转场效果
427浏览 • 1回复 待解决
如何实现视频滤镜效果
866浏览 • 1回复 待解决
canvas如何实现水印效果
427浏览 • 1回复 待解决
如何实现星级评分效果
104浏览 • 1回复 待解决
如何实现图片大图预览效果
606浏览 • 1回复 待解决
滑动组件如何实现单边spring效果
555浏览 • 1回复 待解决
文字动画效果如何实现
898浏览 • 0回复 待解决
如何实现全局浮窗效果
792浏览 • 1回复 待解决
图片模糊效果如何实现
368浏览 • 1回复 待解决
如何等效实现JSONObejct效果
283浏览 • 1回复 待解决
如何实现顶部渐变遮罩效果
40浏览 • 1回复 待解决
如何实现一个自定义样式toast提示
898浏览 • 1回复 待解决