画布动画

Question

I need to create animation with circle. When we see a block with a circle, then the animation starts to fill the boundary of the circle and stops in a certain position. Interesting how to do this animation on native js. enter image description here

Answer 1

The best option is to call window.requestAnimationFrame , which calls your render function. Within your render function you have to measure the elapsed time since your last animation frame (and calculate your new angle), redraw the animation and call requestAnimationFrame.

I quickly made a sample at CodePen :

function draw(angle) { ... }

var duration = 3000; // duration of the animation in ms
var max_angle = 3 / 2 * Math.PI; // maximum animation angle

var angle = 0; // current animation angle
var lastRendered = performance.now();

function render(timestamp) {
  angle += (timestamp - lastRendered) * 2 * Math.PI / duration; // calculate new angle
  if (angle > max_angle) angle = max_angle;
  lastRendered = timestamp;
  draw(angle);
  if (angle < max_angle) requestAnimationFrame(render);
}

requestAnimationFrame(render);