我使用 PIXI.js 在 Canvas 上绘制了一个基于网格的系统。
我正在尝试制作动画,首先每个粒子 position.y
是 -200,然后使用 Tween.js
我'我想让它们掉下来。
我将位置更改为正确的位置,即 particle._y
。
正如您所注意到的那样,您会在跌落后看到一些空白区域并且 CPU 过热。
http://jsbin.com/wojosopibe/1/edit?html,js,output
function animateParticles() {
for (var k = 0; k < STAGE.children.length; k++) {
var square = STAGE.children[k];
new Tween(square, 'position.y', square._y, Math.floor(Math.random() * 80), true);
}
}
我觉得我做错了什么。
谁能解释一下我做错了什么以及为什么跌倒后会有一些空白区域?
最佳答案
空白的原因是你的一些动画没有开始。原因在这一行:
new Tween(square, 'position.y', square._y, Math.floor(Math.random() * 80), true);
查看您对 Tween.js 的函数定义,我看到了这一点:
function Tween(object, property, value, frames, autostart)
第四个参数是frames。我假设这是完成动画所需的帧数。 那么您的 Math.floor 函数有时会返回零,这意味着动画将没有帧并且不会开始!!
您可以改用 math.ceil() 来解决这个问题。这样动画总是至少有 1 帧:
new Tween(square, 'position.y', square._y, Math.ceil(Math.random() * 80), true);
现在,至于性能,我建议以不同的方式进行设置...
为所有这些图形对象制作动画是非常密集的。我的建议是绘制一个红色正方形,然后使用 RenderTexture 从正方形生成位图。然后,您可以将 Sprites 添加到舞台,这在制作动画时表现得更好。
//Cretae a single graphics object
var g = new PIXI.Graphics();
g.beginFill(0xFF0000).drawRect(0, 0, 2, 2).endFill();
//Render the graphics into a Texture
var renderTexture = new PIXI.RenderTexture(RENDERER, RENDERER.width, RENDERER.height);
renderTexture.render(g);
for (var i = 0; i < CONFIG.rows; i++) {
for (var j = 0; j < CONFIG.cols; j++) {
var x = j * 4;
var y = i * 4;
//Add Sprites to the stage instead of Graphics
var PARTICLE = new PIXI.Sprite(renderTexture);
PARTICLE.x = x;
PARTICLE.y = -200;
PARTICLE._y = H - y;
STAGE.addChild(PARTICLE);
}
}
此链接将包含更多 RenderTexture 示例: http://pixijs.github.io/examples/index.html?s=demos&f=render-texture-demo.js&title=RenderTexture
关于javascript - Pixi.js 绘制下落的方 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33671738/