如何实现类似运动健康渐变色热量环效果

如何实现类似运动健康渐变色热量环效果

HarmonyOS
2024-01-30 23:21:14
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
liuhuzhou

1. 使用DataPanel实现环形图形,通过valueColors属性设置数据段颜色和trackShadow属性设置投影样式来模拟颜色渐变效果。

2. 使用Stack叠加多个圆环叠加。

3. 使用rotate属性进行图形旋转。

实现效果:

参考代码:

@Entry 
@Component 
struct LinearGradientDataPanelExample { 
  public values1: number[] = [80]; 
  color1: LinearGradient = new LinearGradient([{ color: "#F22424", offset: 0 }, { color: "#FF9933", offset: 1 }]); 
  color2: LinearGradient = new LinearGradient([{ color: "#FFAE0D", offset: 0 }, { color: "#FFD814", offset: 1 }]); 
  color3: LinearGradient = new LinearGradient([{ color: "#266EFF", offset: 0 }, { color: "#4DC3FF", offset: 1 }]); 
  @State bgColor: string = '#08182431'; 
  @State offsetX: number = 15; 
  @State offsetY: number = 15; 
  @State radius: number = 5; 
  @State colorArray1: Array<LinearGradient | ResourceColor> = [this.color1]; 
  @State colorArray2: Array<LinearGradient | ResourceColor> = [this.color2]; 
  @State colorArray3: Array<LinearGradient | ResourceColor> = [this.color3]; 
 
  build() { 
    Column({ space: 5 }) { 
      Stack() { 
        DataPanel({ values: this.values1, max: 100, type: DataPanelType.Circle }) 
          .width(400) 
          .height(400) 
          .valueColors(this.colorArray1) 
          .trackShadow({ 
            radius: this.radius, 
            colors: this.colorArray1, 
            offsetX: this.offsetX, 
            offsetY: this.offsetY 
          }) 
          .strokeWidth(40) 
          .trackBackgroundColor(this.bgColor) 
        DataPanel({ values: this.values1, max: 100, type: DataPanelType.Circle }) 
          .width(300) 
          .height(300) 
          .valueColors(this.colorArray2) 
          .trackShadow({ 
            radius: this.radius, 
            colors: this.colorArray2, 
            offsetX: this.offsetX, 
            offsetY: this.offsetY 
          }) 
          .strokeWidth(40) 
          .trackBackgroundColor(this.bgColor) 
        DataPanel({ values: this.values1, max: 100, type: DataPanelType.Circle }) 
          .width(200) 
          .height(200) 
          .valueColors(this.colorArray3) 
          .trackShadow({ 
            radius: this.radius, 
            colors: this.colorArray3, 
            offsetX: this.offsetX, 
            offsetY: this.offsetY 
          }) 
          .strokeWidth(40) 
          .trackBackgroundColor(this.bgColor) 
      } 
      .rotate({ 
        x: 0, 
        y: 0, 
        z: 1, 
        centerX: '50%', 
        centerY: '50%', 
        angle: 215 
      }) 
    }.width('100%').margin({ top: 5 }) 
  } 
}
分享
微博
QQ
微信
回复
2024-02-01 11:34:31
相关问题
组件如何实现渐变色
204浏览 • 1回复 待解决
如何实现类似keyframes的效果
96浏览 • 1回复 待解决
List组件如何设置两端的渐变效果
88浏览 • 1回复 待解决
如何实现渐变的圆角边框
101浏览 • 1回复 待解决
如何实现组件边缘的颜色渐变
34浏览 • 1回复 待解决
如何实现视频滤镜效果
62浏览 • 1回复 待解决
鸿蒙 如何实现一个渐变的圆形图片;
10265浏览 • 2回复 已解决
如何实现列表页的单选效果
249浏览 • 0回复 待解决
应用怎么实现半模态效果
71浏览 • 1回复 待解决
鸿蒙-如何实现类似于HOME键的功能
8721浏览 • 2回复 待解决
鸿蒙中怎么实现动画翻转效果
8119浏览 • 2回复 待解决
Text实现scroll效果怎么弄?
3091浏览 • 1回复 待解决
Button组件如何设置渐变背景色
128浏览 • 1回复 待解决
arkts 什么时候可以实现模糊效果
975浏览 • 1回复 待解决