使用 css 渐变和 javascript 创建动画

Question

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

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

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

Answer 1

您可以使用 javascript 为高度设置动画，使用 css 为渐变设置动画。我在鼠标悬停时在这里更新，但你可以让它随着每次扫描输入而更新并完成同样的事情。你只需要为你想要的任何其他渐变变化设置更多的 css 类。

var min = 15;
var max = 100
function randPercent(){
  return Math.floor(Math.random()*(max-min+1)+min);
}


$( ".statusBar" ).mouseover(function(){

  var barSize = randPercent();

  if (barSize > 50) {
    $(this).addClass('close');
  } else {
    $(this).removeClass('close');
  }

  $(this).animate({
    height: barSize+'%'
    },300
  );
  
});

.wrapper {
  height:100px;
  position:relative;
}
.statusBar {
  width:50px;
  min-height:10px;
  border:1px solid black;
  position:absolute;
  bottom:0;
}
.bg {
  -webkit-transition: background 1s ;
  -moz-transition: background 1s ;
  -ms-transition: background 1s ;
  -o-transition: background 1s ;
  transition: background 1s ;

  background: rgb(71,234,46);

}

.bg.close {
  background: rgb(247,247,49);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="statusBar  bg"></div>
</div>

Answer 2

为了获得更好的性能，最好是动画比例而不是高度。 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>