Javascript animation。 在点之间移动 hover 上的 div

Question

我需要在 hover 上的 flash 周围移动红色圆圈，但是当 cursor 出来时，桅杆会移回起点。 我怎样才能在循环中暂停？ 也许是另一种方法来做到这一点 animation？

 var circle = document.querySelector('.circle'); var wayPoints = [[32.3,23.3],[42,42],[45.5,36.5],[55.2,53.7],[57.8,49.2],[73.5,78.5],[52.5,61],[50.5,65.5],[39,52],[36.5,56],[22.5,44.8]]; circle.addEventListener('mouseover', moveCircle); //circle.addEventListener('mouseout', backCircle); function moveCircle(){ for(i in wayPoints){ circle.style.top = wayPoints[i][0]; circle.style.left = wayPoints[i][1]; } }

 body{ height: 100vh; padding: 0; margin:0; display: flex; justify-content: center; align-items: center; }.animation_wrapper{ width: 80%; height: auto; border: 2px solid black; position: relative; }.circle{ width: 2%; height: 4%; border-radius: 50%; background: red; position: absolute; top: 32.3%; left:23.3%; cursor: pointer; transition: 4s; } img{ width: 100%; }

 <div class="animation_wrapper"> <img src="https://i.pinimg.com/originals/26/41/a9/2641a94b84a88671449faea04d29a647.png" alt="flash"> <div class="circle"></div> </div>

这是我在stackoverflow上的第一次体验，所以你也可以给一些写问题的建议：）谢谢你的帮助！

Answer 1

8 年前，我专门为此制作了一个库：

https://github.com/yairEO/pathAnimator

您将获得一个 SVG 路径，然后很容易实现您所追求的。