用javascript创建一个动画信号栏答案

【问题标题】：Create an animation signal bar with javascript用javascript创建一个动画信号栏
【发布时间】：2015-10-29 02:06:14
【问题描述】：

我用一些 html 元素和 javascript 生成了一个栏。该条显示从黑色到红色的渐变颜色。现在我需要改变它，让颜色一个接一个地慢慢出现，以模拟强度条的动画。我不完全确定如何实现这一点。任何帮助表示赞赏。

到目前为止，这是我的 plunkr：http://embed.plnkr.co/FVkKbl/preview

HTML：

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>

  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">


  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css">

  <script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.min.js"></script>


  <script src="script.js"></script>
</head>

<body ng-app='todo'>
  <ion-pane>

    <ion-content>
      <div class="container padding" style="background-color: #fff;" ng-controller="MyCtrl">
        <div ng-repeat="item in colors" class="row">
          <div ng-style="{ 'backgroundColor': item }" style="width:80px;height:8px;">

          </div>
        </div>
      </div>
    </ion-content>
  </ion-pane>

</body>

</html>

JS：

angular.module('todo', ['ionic'])

.controller('MyCtrl', function($scope) {
  $scope.title = 'Ionic';
  $scope.colors = [];
  var j=0;
  for(var i=0;i<255;i+=8)
  {
    $scope.colors[j] = "rgb(" + i + ",0,0)";
    j=j+1;
  }
})

【问题讨论】：

您是否尝试过使用 $timeout 并让您传入的函数更改颜色？
@9ersRule 不确定如何在每一行上执行此操作。

标签： javascript html angularjs ionic

【解决方案1】：

我对您的 plunker 进行了一些更改，这就是您想要的：

$timeout($scope.runcolors, 1000, true);

Updated code using $timeout

【讨论】：

我将超时时间减少到 100 并且它非常缓慢且不流畅。知道如何平滑这一点并提高速度吗？
对不起，我忘记更改其他时间。它比它快得多。我将两者都设置为 1000 到 100。现在，如果我们可以使这更平滑，那么我们都设置好了 :)
后续问题：如何使栏从下到上而不是从上到下进行动画处理？
一切都好。我想到了。如果有人需要，这里是更新的 plunker：embed.plnkr.co/FVkKbl/preview
在将 javascript 实现到 cordova 应用程序中时，它实际上有点慢。我创建了另一个问题，看看这是否可以仅使用 CSS 来解决。 stackoverflow.com/questions/33402377/…