javascript - 动画自定义电池填充图标

Question

我在跨平台 Ionic 移动应用程序中使用 HTML、CSS 和 Javascript。我想创建一个“实时”电池填充图形，因此电池轮廓有一个模拟(ish)填充，它随着电量百分比而移动。

我显然可以每隔 5% 等将源图像替换为不同的图片，但这似乎不是一个很好的方法。有没有更简洁的使用 JS 的方法？

Answer 1

您可以使用以下方法来执行此操作；

1. 几个 HTML 容器，用于表示电池轮廓和电池电量。

2. 使用 javascript 操作电池充电容器的“高度”

   setInterval(function(){ if(batteryPercentage <= 100){ batteryInner.style.height = batteryPercentage + '%'; batteryPercentage += 5; } }, 100)

3. 使用电池充电容器高度的 CSS 过渡来动画高度变化。

快速而肮脏的例子https://jsfiddle.net/r2unrg31/

更新了 fiddle

根据评论，这是更新的 fiddle https://jsfiddle.net/r2unrg31/1/

请注意，您可以对其进行整理，在凹口顶部添加边框。另请注意，“凹口”的背景颜色需要与您平台的背景颜色相匹配。