javascript - JavaScript 的 "update"函数，类似于 p5.js？

Question

我使用 p5.js 来原型(prototype)化一些想法，但由于 p5.js 并没有真正使用实际的 HTML 来绘制东西(据我所知，它使用 Canvas )，所以它不包括诸如可选择的东西文本。我想要实现的效果会不断变化(DOM元素的CSS会不断变化)，有没有一种方法可以让我能够在每个“帧”改变CSS功能，类似于p5的更新功能.js？

Answer 1

坚持使用 p5

如果您习惯使用 p5，则可以坚持使用。以下是文档中有关 style() 函数功能的演示:

https://p5js.org/reference/#/p5.Element/style

你会注意到它使用另一个p5函数createDiv()来制作一个html div(你可以更改其内容)，我认为它本身就是JavaScript的createElement的包装器.

https://p5js.org/reference/#/p5/createDiv

在我看来，在开始学习新东西之前，搜索你已经使用的库的文档总是值得的。

如果 p5 绝对不是您想要的方式(也许您没有使用其 80% 的功能)，那么我在评论中提到了另外两条路线。

requestAnimationFrame

requestAnimationFrame 将与屏幕的刷新率和计算机处理器同步，以创建最流畅的动画。如果您希望动画看起来 super 平滑，这对于大量动画很有用。

function animationFunction(){

  // Put your logic here:

  // this makes the function repeat again
  requestAnimationFrame(animationFunction);
}

// this "kicks it off"
requestAnimationFrame(animationFunction);

设置间隔

设置间隔接受函数作为第一个参数和毫秒数作为第二个参数，因此这对于您想要显式设置“帧”之间的时间长度的情况更好。

let numberOfMillisecondsBetweenEachFrame = 300;

setInterval(function(){
  // Put your logic here
}, numberOfMillisecondsBetweenEachFrame);

以下是这两种方法的示例:

https://codepen.io/EightArmsHQ/pen/KKdNJRx