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 发布文章使用：只允许注册用户才可以访问！

最新文章

  1. BNF 巴科斯范式
  2. 微信接口请求万能函数http_request
  3. Flask框架学习笔记（API接口管理平台 V1.0）
  4. string.Format 格式化时间，货币
  5. java web 实现验证码
  6. LeetCode Maximum Product Subarray 最大子序列积
  7. huhamhire-hosts必备神器！
  8. poj 3007 Organize Your Train part II（静态字典树哈希）
  9. Could not find the Visual SourceSafe Internet Web Service connection information
  10. hdu 六度分离
  11. mysql 重启
  12. Linux查看磁盘剩余空间
  13. 全排列筛选（java）
  14. 简单了解Django
  15. js-ES6学习笔记-变量的解构赋值
  16. [BZOJ4379][POI2015]Modernizacja autostrady[树的直径+换根dp]
  17. spring注入时报错：：No qualifying bean of type &#39;xxx.xxMapper&#39;
  18. Python学习——Python基本数据类型(一）
  19. 数学公式 AS3应用
  20. [ABP项目实战]-后台管理系统-目录

热门文章

  1. MySQL主从复制配置部署
  2. 在这个应用中，我使用了 MQ 来处理异步流程、Redis 缓存热点数据、MySQL 持久化数据，还有就是在系统中调用另外一个业务系统的接口，对我的应用来说这些都是属于 RPC 调用，而 MQ、MySQL 持久化的数据也会存在于一个分布式文件系统中，他们之间的调用也是需要用 RPC 来完成数据交互的。
  3. Python基础(变量、字符编码、数据类型)
  4. Java——I/O,字节流与字符流，BufferedOutputStream，InputStream等（附相关练习代码）
  5. Latex安装教程（附美赛论文latex模板）
  6. Pytest（10）assert断言
  7. 模块化之CommonJS
  8. JVM之堆体系结构
  9. 2019牛客多校 Round5
  10. Cyclic Nacklace HDU - 3746