kwgt 电量进度条动画 用弧形状做动态圆环

基本思路

kwgt 里做进度条的最常用方案是 Arc（弧形状）+ 动态角度：

1. 画布上加一个弧形状
2. 弧的角度范围设成 $bi(level) * 3.6$（因为 100% × 3.6° = 360°）
3. Paint 颜色用 if 函数根据电量变
4. Overlay 一个小圆在中心显示电量数字

步骤详解

第一步：画底环（灰色 100%）

• Shape → Arc
• Angle Range = 360°（完整圆）
• Paint → Solid Color = 灰色（#CCCCCC）
• Stroke Thickness = 20（设成描边让它变成空心圆环）

这是底环，永远完整，不变化。

第二步：画电量进度环（彩色，动态）

• Shape → Arc（再添加一个，放在底环上层）
• Angle Range = $bi(level) * 3.6$ ← 核心：0 度 = 0%，360 度 = 100%
• Arc Start Angle = 270°（让进度环从顶部开始画，和时钟对齐）
• Paint → Solid Color = $if(bi(level)<20, '#FF4444', $if(bi(charging), '#44AAFF', '#44BB66'))$
• 电量 < 20% → 红色警告
• 充电中 → 蓝色
• 正常 → 绿色
• Stroke Thickness = 20（和底环一样粗）

第三步：显示中心数字

• 加一个 Text 元素放在圆环中心
• Text → 内容 = $bi(level)$
• 字号调大，居中对齐
• Paint Color 和进度环同步：同样的 if 表达式

进阶：加充电动画

想让进度环在充电时"旋转"表示正在充：

• 在 Animation 标签 → Rotation → 设一个缓慢的循环旋转动画（角度从 0 到 360，时间 2 秒，无限循环）
• 只在充电时生效：用 if + bi(charging) 控制动画开关

完整代码参考（放到 Arc 角度字段）

$bi(level) * 3.6$

颜色字段：

$if(bi(level) < 20, '#FF4444', $if(bi(charging), '#44AAFF', '#44BB66'))$

这套方案通用于：步数进度、日历进度、时间进度——把 bi(level) 换成任何 0-100 的比例值就行。