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

Question

我使用 p5.js 来制作一些想法的原型，但由于 p5.js 并没有真正使用实际的 HTML 来绘制东西（据我所知，它使用 canvas), 它不包括可选文本之类的东西。我想要达到的效果会不断变化（DOM 元素的 CSS 会不断变化），有没有办法可以改变 CSS 函数每"frame"，类似于p5.js?

的update函数

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 将与屏幕的刷新率和计算机的处理器同步，以创建尽可能流畅的动画。如果你想让它看起来超级流畅，这对很多动画很有用。

function animationFunction(){

  // Put your logic here:

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

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

`setInterval`

设置间隔接受一个函数作为第一个参数，一个毫秒数作为第二个参数，所以这对于那些你想明确设置 "frames".

之间的时间间隔的人来说更好。

let numberOfMillisecondsBetweenEachFrame = 300;

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

这是两种方法的示例：

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

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

An "update" function for JavaScript, similar to p5.js?

javascript

css

p5.js

坚持 p5

`requestAnimationFrame`

`setInterval`