Создать анимационную сигнальную полосу с помощью JavaScript

0

Я создал бар с некоторыми элементами 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;
  }
})
  • 0
    Вы пытались использовать $ timeout, и переданная функция меняет цвет?
  • 0
    @ 9ersRule не уверен, как это сделать в каждом ряду.
Теги:
ionic

1 ответ

1
Лучший ответ

Я внес некоторые изменения в ваш плункер, это то, что вы хотели:

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

Обновлен код с использованием $ timeout

Поделиться
  • 0
    Я уменьшил время ожидания до 100, и оно очень медленное и не плавное. Любая идея, как сгладить это и увеличить скорость?
  • 0
    извините, я забыл изменить в другой раз. Это намного быстрее, чем. Я установил оба значения от 1000 до 100. Теперь, если мы сможем сделать это более плавным, чем мы все настроили :)
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню