Блог

Главная - Вопросы по программированию - Вращающийся круг аниме js

Вращающийся круг аниме js

#javascript #anime.js

Вопрос:

Я пытаюсь заставить вращаться барабан, и в центре мыши я хочу, чтобы круг перестал вращаться и повернулся на «x» градусов, в режиме мыши круг должен вернуться к своему началу и продолжить анимацию вращения.

 function rotatingCircle(degree) {
    var test = 
    anime({
    targets: [document.getElementsByTagName("svg")[0]],
    rotate: degree,
    duration: 800,
    loop: true,
    elasticity: 0,
    easing: "linear"

  });
};

rotatingCircle(360);

var buttonEl = document.querySelector('.trigger');
var circleOne = document.getElementsByTagName("svg");


buttonEl.addEventListener('mouseenter', rotatingCircle(20));

buttonEl.addEventListener('mouseleave', rotatingCircle(0));

Добавьте момент, когда мой svg вообще не вращается. Когда я удаляю событие «mouseenter» и «mouseleave», мой svg вращается по желанию. Как сохранить анимацию вращающегося цикла И добавить событие «mouseenter» / «mouseleave», которое запускает поворот SVG на определенный угол?

Комментарии:

1. Не могли бы вы перефразировать это в вопрос и объяснить, где вы застряли?

2. Добавьте момент, когда мой svg вообще не вращается. Когда я удаляю событие «mouseenter» и «mouseleave», мой svg вращается по желанию. Как сохранить анимацию вращающегося цикла И добавить событие «mouseenter» / «mouseleave», которое запускает поворот SVG на определенный угол?

Ответ №1:

Одна из проблем, которую я вижу в вашем коде, заключается в том, что

 buttonEl.addEventListener('mouseenter', rotatingCircle(20));
buttonEl.addEventListener('mouseleave', rotatingCircle(0));

на самом деле вы вызываете функцию rotatingCircle , в которой вместо этого хотите отправить имя функции или анонимную функцию.

Пример имени функции, если это были функции без параметров

 buttonEl.addEventListener('mouseenter', rotatingCircle);
buttonEl.addEventListener('mouseleave', rotatingCircle);

Пример анонимной функции, когда вам нужно отправить параметры (используйте этот)

 buttonEl.addEventListener('mouseenter', () => rotatingCircle(20));
buttonEl.addEventListener('mouseleave', () => rotatingCircle(20));

Как думать об этом на примере:

слушателям просто нужна ссылка на то, что вызывать при запуске, им не нужно, что функция возвращает при вызове

Я сделал песочницу кода из того, о чем, по-моему, вы говорите. Проверьте это здесь: https://codesandbox.io/s/aninejs-different-animations-for-different-hover-states-ld76r

Метки: