js animation & requestAnimationFrame

js animation & requestAnimationFrame

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

window.requestAnimationFrame(callback);

const callback = () => {
  window.requestAnimationFrame(callback);
}
// inint
callback();

https://caniuse.com/#feat=requestanimationframe

refs

https://gomakethings.com/how-to-use-requestanimationframe-with-vanilla-js/

https://flaviocopes.com/requestanimationframe/

https://github.com/flaviocopes

https://css-tricks.com/using-requestanimationframe/

http://www.javascriptkit.com/javatutors/requestanimationframe.shtml

See the Pen svg paths (auto player) by xgqfrms
(@xgqfrms) on CodePen.

// define array to store balls
let balls = [];

// define loop that keeps drawing the scene constantly
function loop() {
  ctx.fillStyle = 'rgba(0,0,0,0.25)';
  ctx.fillRect(0,0,width,height);
  while(balls.length < 25) {
    var ball = new Ball(
      random(0,width),
      random(0,height),
      random(-7,7),
      random(-7,7),
      'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
      random(10,20)
    );
    balls.push(ball);
  }
  for(var i = 0; i < balls.length; i++) {
    balls[i].draw();
    balls[i].update();
    balls[i].collisionDetect();
  }
 // auto loop
  requestAnimationFrame(loop);
}

loop();

generator *function & yield

const log = console.log;

const d = document.querySelector(`[id="svg-path"]`);

log(`d`, d);
// d <path id=​"svg-path" d=​"M10 10">​</path>​

function *test() {
  yield d.setAttribute(`d`, `M10 10L10,100`);
  yield d.setAttribute(`stroke`, `#0f0`);
  yield d.setAttribute(`d`, `M10 10L10,100 H200`);
  yield d.setAttribute(`d`, `M10 10L10,100 H200 V10`);
  yield d.setAttribute(`d`, `M10 10L10,100 H200 V10 H10`);
  yield d.setAttribute(`fill`, `#f0f`);
  yield d.setAttribute(`fill`, `#fff7`);
}

let steps = 7;
const loop = () => {
  steps = 7;
  const app = test();
  const flag = setInterval(() => {
    if(steps > 0) {
      steps--;
      app.next(steps);
    } else {
      clearInterval(flag);
      requestAnimationFrame(loop);
    }
  }, 1000);
}
loop();

requestAnimationFrame 降帧/降频？

refs

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---