时间戳

首页 > 解决方案 > Anime.Js Seek 函数在 React 中不反转

reactjs - Anime.Js Seek 函数在 React 中不反转

问题描述

我正在尝试制作一个在您滚动时转换的动画。我需要它在向上滚动时反转。我知道这是可能的（这里有一个例子），但我无法在 React 中获得类似的行为。

我制作这个演示是为了简化我的问题（基于AnimeJs 文档中的内容）：

const me = useRef();
const [zoom, setZoom] = useState(0);

const zoomies = anime({
  targets: me.current,
  translateY: "80vh",
  autoplay: false
});

useEffect(() => {
  zoomies.seek(zoomies.duration * (zoom / 100));
}, [zoom, zoomies]);

这很简单，你可以在这里看到它的实际效果：
https ://codesandbox.io/s/animejs-react-seeking-wk09q

如您所见，它只向前移动，而不是相对于滑块。它也永远不会逆转。我不确定发生了什么...

标签： reactjsanimationanime.js

解决方案

我能够修复我的动画，你可以在这里看到一个工作版本：
https ://codesandbox.io/s/animejs-react-seeking-h8y6m

最大的变化是我将动画声明移到了一个useState钩子中。我认为正在发生的事情是动画在每个滴答声上都被重新创建，所以没有办法让它反转。但是一旦 React 在重新渲染之间知道了它，它就开始工作了。

如果这是错误的或以任何方式不准确的人请纠正我！

推荐阅读