,Chain react-spring 悬停动画

Question

我正在尝试在 react-spring 上制作一个简单的多步动画：旋转一个图标，该图标会转到 10deg，然后转到 -10deg，然后返回到 [=16] =].此动画将在用户悬停图标时执行。

以下代码片段展示了一个只有第一步的动画：

const [isBooped, setBooped] = useState(false);

const style = useSpring({
  rotate: isBooped ? 10 : 0,
  config: config.wobbly,
});

const onMouseEnter = useCallback(() => setBooped(true), []);

useEffect(() => {
  if (!isBooped) {
    return;
  }

  const timeoutId = window.setTimeout(() => {
    setBooped(false);
  }, 250);

  return () => {
    window.clearTimeout(timeoutId);
  };
}, [isBooped]);

return (
  <Button onMouseEnter={onMouseEnter}>
    <Icon style={style} />
  </Button>
);

我知道 to 接受一个数组来链接多个动画，如下所示：

to: [{ rotate: 10 }, { rotate: -10 }, { rotate: 0 }],

...但我不知道如何处理 isBooped 状态。

这是一个带有代码的沙箱： https://codesandbox.io/s/react-spring-test-o8fwm?file=/src/Notifications.js

Answer 1

这是使用 imperative API react-spring 提供的好机会。

如果你希望它在有人没有悬停在图标上时停止动画，你也可以取消动画中流，或者它应该自己重置回 0 缩短动画（这是在下面提供的示例中注释掉了）。

通过将函数传递给 useSpring 挂钩，您将获得一个数组，其中第一项是您的样式，第二项是 API。然后您可以使用效果来触发异步动画开始运行。这是您修改后的 codesandbox 以证明这一点：https://codesandbox.io/s/react-spring-test-forked-ildtb?file=/src/Notifications.js

,Chain react-spring 悬停动画

,Chain react-spring animations on hover

reactjs

react-spring