titanium - How to animate Canvas with setInterval

Question

I'm trying to draw arcs using the Canvas library. I get the first blue arc to be drawn, but then nothing is happening inside the setInterval (same behaviour with setTimeout). How can I use the Canvas to build stuff dynamically?

Here is my code:

var canvas = Canvas.createView();

canvas.begin();

canvas.arc(120, 120, 50, 0 * Math.PI, 2 * Math.PI, 0);
canvas.lineWidth(10);
canvas.strokeStyle('blue');
canvas.stroke();

var pointFrom = 1.5;

var interval = setInterval(function() {
  var pointTo = pointFrom - 0.5;

  console.log('pointFrom : ' + pointFrom);
  console.log('pointTo : ' + pointTo);
  canvas.arc(120, 120, 50, pointFrom * Math.PI, pointTo * Math.PI, 1);
  canvas.lineWidth(15);
  canvas.strokeStyle('red');
  canvas.stroke();

  pointFrom = pointTo;

  if (pointFrom < 0) clearInterval(interval);
}, 2000);

my_view.add(canvas);

Thanks

Answer 1

这

canvas.begin()
canvas.arc(120, 120, 50, pointFrom * Math.PI, pointTo * Math.PI, 1)
canvas.stroke()
canvas.commit()

必须在区间函数中。