Question

我是第一次来这里，而且是编码方面的新手，所以请耐心等待。

我正在为自己编写一个网站，我想添加一个动画的Java脚本正弦波（基于有关此问题的superHi教程）。当我在HTML文件中添加第一个wave的脚本时，一切都很好，但是当我添加第二个脚本（具有不同的参数，因此我可以生成不同的wave）时，第二个脚本就无法正常工作。

我已经将id添加到我希望受到脚本影响的元素中，但这不能解决我的问题。无论如何，这是代码的HTML部分：

<body>

  <section class="wave1">
    <svg class="wave1">
      <path id="wave1" class="wave1" d="M10,10 L50,100 L90,50"></path>
    </svg>
  </section>

  <section class="wave2">
    <svg class="wave2">
      <path id="wave2" class="wave2" d="M10,10 L50,100 L90,50"></path>
    </svg>
  </section>

  <script src="scripts/wave1.js"></script>
  <script src="scripts/wave2.js"></script>

</body>

这是两种不同的js，第一波：

let xs = []
for (var i = 0; i <= 5000; i++) {
  xs.push(i)
}

let t = 0
function animate() {

  let points = xs.map(x => {
    let y = 25 + 10 * Math.sin((x + t) / 5)
    return [x, y]
  })

  let path = "M" + points.map(p => {
    return p[0] + "," + p[1]
  }).join(" L")

  document.getElementById("wave1").setAttribute("d", path)
  t += 0.8
  requestAnimationFrame(animate)
}

animate()

第二波：

let vt = []
for (var x = 0; x <= 5000; x++) {
vt.push(x)
}

let w = 0

function animate() {

 let points = vt.map(e => {

   let r = 55 + 35 * Math.sin((e + w) / 15)

   return [e, r]
   })

let path = "M" + points.map(p => {
return p[0] + "," + p[1]
}).join(" L")

document.getElementById("wave2").setAttribute("d", path)

w += 3

requestAnimationFrame(animate)
}

animate()

任何帮助都会得到真正的感谢，

提前谢谢！

HTML中冲突的Java脚本正弦波

0 个答案: