javascript - AngularJS:如何制作一个波动的进度条？

Question

我想制作一个进度条，从0开始，在一定时间内递增到最大值。当它达到最大值时，它会递减并重复该过程。这是我的尝试。

HTML:

<progressbar class="progress-striped active"
             max="max"
             value="value"
             type="success">
</progressbar>

JS:

app.controller('progressBar', function($scope,$timeout){
    $scope.max = 100;
    $scope.min = 0;
    $scope.value = 0;

    var increment = 5;
    var target = $scope.max;

    $scope.increment =  function() {
        $scope.value += increment;
    };

    $scope.decrement =  function() {
        $scope.value -= increment;
    };

    $timeout(function() {
        while ($scope.value <= target) {
            $scope.increment();
            if($scope.value === target) {
                target = $scope.min;
            };
        };

        while ($scope.value >= target) {
            $scope.decrement();
            if($scope.value === target) {
                target = $scope.max;
            };
        };
    }, 1000);
});

Answer 1

angular.module("test", []).controller('testController', function($scope, $interval, $timeout) {

  var min = 0,
    max = 100;
  var value = min;
  $scope.myStyle = {
    "width": "0%"
  };
  var increment = 5;

  function fluctuator() {
    value += increment;
    $scope.myStyle.width = value + "%";
    if (value > max || value < min) {
      increment *= -1;
      value += increment;
    }

  }

  var interval = $interval(fluctuator, 200);
  $timeout(function() {
    $interval.cancel(interval);
    alert("canceled to prevent infinite running of the interval.")
  }, 10000)
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
< <div ng-app="test" ng-controller="testController">
  test page
  <br/>
  <div class="progress">
    <div class="progress-bar progress-bar-striped active" ng-style="myStyle">
    </div>
  </div>
  </div>

这是一个示例，您可以使用它来创建波动的进度条。我在 10 秒后停止动画。