如何在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

我缺少什么?

wly1zwss 回答:如何在pixi.js中实现黄油平滑运动(没有任何滞后/尖峰)

您将永远无法消除WebGL动画中的偶尔卡顿现象。在每个Web渲染框架(包括PixiJS)之下都是对requestRenderFrame()的调用。顾名思义,它是对浏览器的 request 请求,用于重新绘制窗口。您将不会总是找回“确定,立即执行!”从浏览器。有时浏览器很忙。有时,您的javascript垃圾收集器必须运行。有时候,一只蝴蝶在中国扇动翅膀。

要点是,完全控制帧速率的唯一方法是使用DirectX之类的技术,该技术可以完全控制实际的渲染和显示硬件(大多数情况下!)。 WebGL根本不适合这样做。

,

它对我来说运行得很好,但是您可以尝试设置抗锯齿:true和分辨率:window.devicePixelRatio。

本文链接:https://www.f2er.com/1413028.html

大家都在问