旋转圆动漫js答案

【问题标题】：Rotating cirle anime js旋转圆动漫js
【发布时间】：2021-03-21 15:26:44
【问题描述】：

我正在尝试让 cricle 旋转，并且在 mouseenter 上我希望圆圈停止旋转并旋转“x”度，在 mouseleave 上，圆圈应该旋转回原点并继续旋转动画。

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 旋转到指定角度？

【问题讨论】：

您能否将其改写为一个问题并解释您遇到的问题？
添加我的 svg 根本不旋转的那一刻。当我删除“mouseenter”和“mouseleave”事件时，我的 svg 会根据需要旋转。如何保持旋转循环动画并且可以添加“mouseenter”/“mouseleave”事件，触发旋转 SVG 旋转到指定角度？

标签： javascript anime.js

【解决方案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

【讨论】：