如何解决如何在pixi.js中实现黄油平滑运动没有任何滞后/尖峰
我正在尝试使用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。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。