如何创建在 JS 中按下按钮时显示的微调器动画？答案

【问题标题】：How to create a spinner animation that displays on button press in JS?如何创建在 JS 中按下按钮时显示的微调器动画？
【发布时间】：2021-07-01 04:17:38
【问题描述】：

我正在尝试向我的网站添加一个微调器，但我正在努力让它工作并且可以通过一些帮助来完成。我正在尝试使 js.p5 画布位于视频的顶部，但在按下播放按钮之前一直隐藏，在该按钮中播放微调器动画直到页面刷新（微调器不必是实际的微调器对于视频而言，纯粹是出于家庭作业的原因，以展示我在课堂上学到的知识。按下按钮时让微调器在视频区域顶部播放就足够了）。

我的整个过程是事件侦听器将执行“微调器”函数中的代码，然后创建微调器。我知道事件侦听器使用按钮注册用户输入，并且“drawCanvas”、“draw”和“drawElements”函数在视频上显示微调器就可以了，但是在使用事件处理程序时，它不会“ t.

提前谢谢大家:D

function play_pause() {
  var playpause = document.getElementById('playPause');
  if (playpause.innerHTML == "Play") playpause.innerHTML = "Pause";
  else playpause.innerHTML = "Play";
};

var playpause = document.getElementById('playPause')
playpause.addEventListener('click', function spinner() {
  function drawCanvas() {
    let spinCanvas = createCanvas(100, 100);
    spinCanvas.position(450, 560, 'absolute');
    spinCanvas.hide();
    frameRate (13);
  };

  function draw() {
    background(0, 0, 0, 80);
    drawElements();
  };

  function drawElements() {
    let num = 8;
    push();
    translate(width/2, height/2);
    let cir = 360/num*(frameCount%num);
    rotate(radians(cir));
    noStroke();
    fill(0, 102, 204);
    ellipse(30, 0, 22, 22);
    pop();
    stroke(255, 255, 0, 18);
  };
});

【问题讨论】：

标签： javascript p5.js

【解决方案1】：

嗯，这是 W3schools 链接： W3Scool link to "How to make a loader"

然后你就可以这样做了：

function toggleSpinner(boolean){
  if(boolean == true){
    select('.loader').hide() // .style.visibility = hidden; I believe is in native
  } else if(boolean == false) {
    select('.loader').show()
  }
}

你也可以完全做到 ..if(boolean){... 和 ..if(!boolean){...

我并不完全相信使用 js 会很棒，尽管您可能可以在 js 中做同样的事情：

let interv = setInterval() and
    interv.clearInterval()
and arc() and translate() -> rotate() and stuff

【讨论】：