如何在plotly中重复动画

Question

我使用的例子来自： https://plot.ly/python/filled-area-animation/

如何重复播放动画？ 所以一旦点击播放按钮，它将继续重复播放？ 另一个选择是在加载动画后让动画不停地播放。你知道吗

Answer 1

可以找到一个解决方案here。其思想是，不用预先传递所有帧，而是使用update函数动态创建它们。 绘图是用Plotly.animate()创建的。你知道吗

您还可以更改此示例以适合您的情况。遍历数据点列表。到达数组末尾后，将计数器设置为0以从开头开始。你知道吗

本例使用redraw: false，它可以用于以高帧速率更新绘图。你知道吗

var n = 100;
var x = [], y = [], z = [];
var dt = 0.015;

for (i = 0; i < n; i++) {
  x[i] = Math.random() * 2 - 1;
  y[i] = Math.random() * 2 - 1;
  z[i] = 30 + Math.random() * 10;
}

Plotly.plot('graph', [{
  x: x,
  y: z,
  mode: 'markers'
}], {
  xaxis: {range: [-40, 40]},
  yaxis: {range: [0, 60]}
})

function compute () {
  var s = 10, b = 8/3, r = 28;
  var dx, dy, dz;
  var xh, yh, zh;
  for (var i = 0; i < n; i++) {
    dx = s * (y[i] - x[i]);
    dy = x[i] * (r - z[i]) - y[i];
    dz = x[i] * y[i] - b * z[i];

    xh = x[i] + dx * dt * 0.5;
    yh = y[i] + dy * dt * 0.5;
    zh = z[i] + dz * dt * 0.5;

    dx = s * (yh - xh);
    dy = xh * (r - zh) - yh;
    dz = xh * yh - b * zh;

    x[i] += dx * dt;
    y[i] += dy * dt;
    z[i] += dz * dt;
  }
}

function update () {
  compute();

  Plotly.animate('graph', {
    data: [{x: x, y: z}]
  }, {
    transition: {
      duration: 0
    },
    frame: {
      duration: 0,
      redraw: false
    }
  });

  requestAnimationFrame(update);
}

requestAnimationFrame(update);