动画自定义电池填充图标

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/

更新小提琴

根据评论，这里有一个更新的小提琴https://jsfiddle.net/r2unrg31/1/

请注意，你可以把它包括在一个顶部的边界上。另请注意，“凹槽”的背景颜色需要与平台的背景颜色相匹配。