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

Question

我正在尝试用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, 
                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

我错过了什么？

Answer 1

您永远无法消除WebGL动画中偶尔出现的卡顿现象。在每个web呈现框架(包括PixiJS)下面都有一个对requestRenderFrame()的调用。顾名思义，这是向浏览器发出的重绘窗口的请求。你不会总是得到一个“当然，现在就做！”从浏览器。有时浏览器很忙。有时，您的javascript垃圾收集器必须运行。在中国，有时一只蝴蝶拍打它的翅膀。

重点是，完全控制帧速率的唯一方法是使用诸如DirectX之类的技术，该技术允许完全控制实际的渲染和显示硬件(主要是！)。WebGL根本不适合这一点。

Answer 2

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