createjs 优化 canvas 重绘

Question

据我所知，我有两种方法可以控制 canvas 重绘，因此当没有任何动画时它们不会简单地运行不断地。

设置一个检查条件的函数：

createjs.Ticker.addEventListener("tick", tick);
var redrawOn = false;
function tick(event) {
    if (redrawOn) {
        stage.update(event);
    }
}

或者，侦听补间对象的 'change' 事件并根据该事件重绘舞台：

var myTween = createjs.Tween.get(resetButton).to({'alpha': 1}, 500);
myTween.on('change', function(){
    stage.update();
});

它们都看起来很乏味，但第二个似乎更容易。一个比另一个更高效吗？如果是第二个，是否有一种方法可以简单地将 Tween class 扩展为始终执行此操作？为什么不是这样呢？

编辑：基本上我试图避免这样做：

createjs.Ticker.addEventListener("tick", stage);

因为我读的不好。所以，我有几个应用程序使用这个，现在我试图在滴答期间打开和关闭重绘，它变得一团糟......由于交互性，一些功能正在关闭滴答 - >重绘其他动画还没有完成。这是一场噩梦。

Answer 1

如果你有一个补间正在进行，那么当它发生变化时更新阶段是有意义的，但如果你有多个补间，你最终会得到不必要的额外更新。

将您的两种方法结合起来可能有意义，并在补间更改中将 redrawOn 设置为 true，然后在设置此值时更新 tick 上的舞台。

收藏据我了解，我有两种方法来控制 canvas 重绘，因此当没有任何动画时它们不会简单地运行不断。

设置一个检查条件的函数：

createjs.Ticker.addEventListener("tick", tick);
var redrawOn = false;
function tick(event) {
    if (redrawOn) {
        stage.update(event);
    }
    redrawOn = false;
}

var myTween = createjs.Tween.get(resetButton).to({'alpha': 1}, 500);
myTween.on('change', function(){
    redrawOn = true;
});

关于一般舞台自动收报机，它可能不好，但并不是天生就坏。如果您的应用变化很大，或者有很多复杂性，则每次更新一次阶段是有意义的。有比删除阶段标记更好的方法来优化您的应用程序。比如缓存复杂内容，使用SpriteSheets，降低Graphic复杂度等

希望对您有所帮助。

createjs 优化 canvas 重绘

createjs optimizing canvas redraws

canvas

createjs

tweenjs