javascript - Javascript 动画。在点之间悬停时移动 div

Question

我需要在悬停时在闪光灯周围移动红色圆圈，但是当光标消失时，它会回到起点。我怎样才能在循环中暂停？也许是做这个动画的另一种方式？

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上的第一次体验，所以你也可以给一些写问题的建议：）谢谢你的帮助！

标签： javascriptcss

Answer 1

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

https://github.com/yairEO/pathAnimator

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