javascript - 使用 css 渐变和 javascript 创建动画

Question

我正在开发一个 cordova 应用程序，它允许我们扫描 rfid 标签。根据 RSSI 信号强度，我需要显示一个条形图来显示 rfid 标签的距离。距离标签越近，条形就越高，越远，条形就变得越小。我构建了以下 plunkr ，我想我可以使用它。不幸的是，动画不是很流畅，而且在移动应用程序上速度很慢。我认为问题是我显示/隐藏 div 并设置超时来模拟动画。我想我可能需要更改它以使用带有渐变的 CSS 动画。但我不太熟悉如何做到这一点，并且如果我只想显示栏的一小部分，我不知道如何隐藏部分渐变。非常感谢任何有关如何执行此操作的建议。

更新:我已经上传了一段关于我想要实现的目标的视频。不幸的是我无法将其上传到SO。当我阅读标签时，动画会发生变化。所以我可以来回移动标签，并基于它应该改变栏。

https://www.dropbox.com/s/9bd421fhqvt9v5g/gradient-bar-demo.mov?dl=0

Answer 1

为了获得更好的性能，最好对比例而不是高度进行动画处理。 Source (关于动画性能的非常好的文章)。

这里是一个如何做到这一点的示例。它并不完美，但希望它能为您提供一个良好的起点。

var input = document.querySelector('input');

input.addEventListener('input', function() {
    var value = this.value / 100;
    var bar = document.querySelector('.meter-bar');
    
    bar.style.transform = 'scaleY(' + value + ')';
    // Adjust background size to account for the scale change, there is probably a better solution
    bar.style.backgroundSize = '200px ' + (300 / value) + 'px';
});

input {
    width: 200px;
}

.meter {
    width: 200px;
    height: 300px;
    margin-top: 20px;
    background-color: #e5e5e5;
}

.meter-bar {
    width: 100%;
    height: 100%;
    background-color: #333;
    background-image: linear-gradient(to top, #64b572 0%, #9fc63d 50%, #f63908 100%);
    background-size: 200px 0;
    background-position: bottom;
    transform-origin: bottom;
    transform: scaleY(0);
    transition: transform 1s ease, background-size 1s ease;
    opacity: 0.8;
}

<input type="range" min="0" max="100" step="1" value="0">
    
<div class="meter">
    <div class="meter-bar">
    </div>
</div>