Question

我正在使用＆＃34;冰沙图表＆＃34; http://smoothiecharts.org/。
我试图让动画停止并重新启动，但我所能做的就是冻结＆＃34;观看＆＃34;图片。动画并没有真正停止。它似乎继续在后台运行？

重新启动后，整个图表会跳转到实际时间。

开始＆＃34;开始＆＃34;我需要恢复动画，从暂停的位置开始我怎样才能做到这一点？

我对此很新，并且一直试图解决这个问题，但我仍然坚持这个问题。

这是动画的代码：

 SmoothieChart.AnimateCompatibility = (function() {
    var requestAnimationFrame = function(callback, element) {
          var requestAnimationFrame =
            window.requestAnimationFrame        ||
            window.webkitRequestAnimationFrame  ||
            window.mozRequestAnimationFrame     ||
            window.oRequestAnimationFrame       ||
            window.msRequestAnimationFrame      ||
            function(callback) {
              return window.setTimeout(function() {
                callback(new Date().getTime());
              }, 16);
            };
          return requestAnimationFrame.call(window, callback, element);
        },
        cancelAnimationFrame = function(id) {
          var cancelAnimationFrame =
            window.cancelAnimationFrame ||
            function(id) {
              clearTimeout(id);
            };
          return cancelAnimationFrame.call(window, id);
        };

    return {
      requestAnimationFrame: requestAnimationFrame,
      cancelAnimationFrame: cancelAnimationFrame
    };
  })();

这是最初的停止......

SmoothieChart.prototype.stop = function() {
if (this.frame) {
  SmoothieChart.AnimateCompatibility.cancelAnimationFrame(this.frame);
    delete this.frame;
  }
};

这是启动功能

 SmoothieChart.prototype.start = function() {
    if (this.frame) {
      // We're already running, so just return
      return;
    }
    // Make sure the canvas has the optimal resolution for the device's pixel ratio.
    if (this.options.enableDpiScaling && window && window.devicePixelRatio !== 1) {
      var canvasWidth = this.canvas.getAttribute('width');
      var canvasHeight = this.canvas.getAttribute('height');

      this.canvas.setAttribute('width', canvasWidth * window.devicePixelRatio);
      this.canvas.setAttribute('height', canvasHeight * window.devicePixelRatio);
      this.canvas.style.width = canvasWidth + 'px';
      this.canvas.style.height = canvasHeight + 'px';
      this.canvas.getContext('2d').scale(window.devicePixelRatio, window.devicePixelRatio);
    }

    // Renders a frame, and queues the next frame for later rendering
    var animate = function() {
      this.frame = SmoothieChart.AnimateCompatibility.requestAnimationFrame(function() {
        this.render();
        animate();
      }.bind(this));
    }.bind(this);

    animate();

  };

如何暂停和恢复HTML5动画？

0 个答案: