render-looper

帧动画管理器，脱离于业务逻辑之外，

安装方法

npm install render-looper

1. 基本用法

// 引入render-looper
import RenderLooper from 'render-looper';

var callBack = function(msDt, totalTime) {
    // msDt是上一帧到这一帧的时间间隔，以毫秒为单位
    // totalTime是从动画开始（t = 0）到当前的毫秒数
    // 这里是每一帧的回调函数，里面做绘制逻辑
    ...
}

// 帧数（每秒渲染多少次）
var fps = 50;
var renderLooper = new RenderLooper(callBack, fps);

// 可以不传fps，不传时，是以最优化的频率调用绘制回调函数
var renderLooper = new RenderLooper(callBack);

// 开始动画
renderLooper.start();

// 停止动画
renderLooper.stop();

// 获取当前帧数
renderLooper.getFps();

// 替换回调函数(不用stop之后再替换，可随时随地热更新，立即生效！)
var callBack2 = function() {...}
renderLooper.changeCb(callBack2);
...

// 总时间重新从0开始
renderLooper.clearTotalTime();

正在使用 render-looper 的项目

• 腾讯新闻h5页面

在线例子

simple demo

使用render-looper制作的焰火

星空特效