Функция «update» для JavaScript, аналогичная p5. js? - PullRequest
Новая
       6

Функция «update» для JavaScript, аналогичная p5. js?

0 голосов
/ 22 апреля 2020

Я использовал p5. js для создания прототипа некоторых идей, но поскольку p5. js на самом деле не рисует вещи с использованием фактического HTML (насколько я понимаю, он использует холст), он не не включать такие вещи, как выбираемый текст. Эффект, которого я пытаюсь достичь, будет постоянно меняться (CSS элемента DOM будет постоянно меняться), есть ли способ, которым я могу изменять CSS функцию в каждом «кадре», подобно функция обновления p5. js?

1 Ответ

1 голос
/ 22 апреля 2020

Придерживание с p5

Если вам удобно использовать p5, вы можете придерживаться этого. Вот демонстрация из документации о том, что делает функция style():

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

Вы заметите, что она использует другую Функция p5, createDiv() для создания html div (который вы можете изменить содержимое), который, я думаю, сам по себе является оберткой для JavaScript 'createElement.

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

Всегда стоит поискать документы в уже используемой вами библиотеке, прежде чем начать изучать что-то новое, на мой взгляд.

Если p5 просто абсолютно не Если вы хотите go (возможно, вы не используете 80% его функций), есть два других маршрута, которые я упомянул в своем комментарии.

requestAnimationFrame

requestAnimationFrame будет синхронизироваться c с частотой обновления экрана sh и процессором компьютера для создания максимально плавной анимации. Это полезно для большого количества анимации, если вы хотите, чтобы она выглядела очень плавной. 

function animationFunction(){

  // Put your logic here:

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

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

setInterval

Заданный интервал принимает функцию в качестве первого аргумента и число миллисекунд в качестве во-вторых, это лучше для тех, где вы хотите явно установить, как долго между «кадрами». 

let numberOfMillisecondsBetweenEachFrame = 300;

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

Вот пример обоих методов:

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

...