问题描述
我正在尝试使用pixi.js实现黄油的平滑运动。我想这应该是一件简单的事情,但似乎无法获得。
有时我会出现尖峰/微小的滞后。我已经在Ubuntu 20.04开发人员计算机上使用最新的Chrome版本和最新的PIXI js(实际上是5.3.3)对其进行了测试。我的旧Macbook pro上最新的Chrome(2013年末)上也发生了同样的事情
这是我正在使用的代码:
const app = new PIXI.Application({
view: document.querySelector("#view"),width: window.innerWidth,height: window.innerHeight,backgroundColor: 0x0,antialias: false
})
const ticker = PIXI.Ticker.system
const Box = new PIXI.Graphics()
Box.linestyle(1,0xff0000)
.drawRect(
100,100,100)
app.stage.addChild(Box)
let speed = 4
app.ticker.add( (dt) => {
if (Box.x < 0) {
speed *= -1
Box.x += speed * dt
}
if (Box.x > 800) {
speed *= -1
Box.x += speed * dt
}
Box.x += speed * dt
})
这是一个运行中的版本https://codepen.io/ferama/pen/LYZVBMx
我缺少什么?
解决方法
您将永远无法消除WebGL动画中的偶尔卡顿现象。在每个Web渲染框架(包括PixiJS)之下都是对requestRenderFrame()的调用。顾名思义,它是对浏览器的 request 请求,用于重新绘制窗口。您将不会总是找回“确定,立即执行!”从浏览器。有时浏览器很忙。有时,您的javascript垃圾收集器必须运行。有时候,一只蝴蝶在中国扇动翅膀。
要点是,完全控制帧速率的唯一方法是使用DirectX之类的技术,该技术可以完全控制实际的渲染和显示硬件(大多数情况下!)。 WebGL根本不适合这样做。
,它对我来说运行得很好,但是您可以尝试设置抗锯齿:true和分辨率:window.devicePixelRatio。