Анимация Javascript. Перемещение div при наведении между точками

#javascript #css

Вопрос:

Мне нужно переместить красный круг вокруг вспышки при наведении, но когда курсор отсутствует, он должен вернуться к начальной точке. Как я могу делать паузы в цикле? Может быть, есть другой способ сделать эту анимацию?

 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, поэтому вы также можете дать несколько советов по написанию вопросов 🙂
Спасибо за помощь!

1. В вашем JavaScript у вас нет имени переменной circle . Пожалуйста, добавьте circle переменную в свой код.

2. var circle = документ. querySelector(‘.circle’); Извините, я теряю его при копировании скрипта

Ответ №1:

Я создал библиотеку специально для этого, 8 лет назад:

https://github.com/yairEO/pathAnimator

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

1. Я должен сделать это на JS без библиотек: (

2. итак, скопируйте мою библиотеку в свой исходный код (всего несколько строк), а затем скажите, что вы сделали это сами 🙂

3. Или просто изучите, что я там сделал, поймите, насколько это просто, и создайте его заново