Anime.Js React 中求函数不逆向
Anime.Js Seek function not reversing in React
我正在尝试制作一个在您滚动时转换的动画。我需要它在向上滚动时反转。我知道这是可能的 (here's an example) 但我无法在 React 中获得类似的行为。
我制作这个演示是为了简化我的问题(基于 AnimeJs's docs 中的内容):
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
如你所见,它只向前移动,而不是相对于滑块。它也永远不会逆转。我不确定发生了什么...
我能够修复我的动画,你可以在这里看到一个工作版本:
https://codesandbox.io/s/animejs-react-seeking-h8y6m
最大的变化是我将动画声明移到了 useState
钩子中。我认为正在发生的事情是在每次滴答时重新创建动画,因此无法反转。但是一旦 React 在重新渲染之间知道它,它就开始工作了。
如果这是错误的或以任何方式不准确的人请纠正我!
我正在尝试制作一个在您滚动时转换的动画。我需要它在向上滚动时反转。我知道这是可能的 (here's an example) 但我无法在 React 中获得类似的行为。
我制作这个演示是为了简化我的问题(基于 AnimeJs's docs 中的内容):
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
如你所见,它只向前移动,而不是相对于滑块。它也永远不会逆转。我不确定发生了什么...
我能够修复我的动画,你可以在这里看到一个工作版本:
https://codesandbox.io/s/animejs-react-seeking-h8y6m
最大的变化是我将动画声明移到了 useState
钩子中。我认为正在发生的事情是在每次滴答时重新创建动画,因此无法反转。但是一旦 React 在重新渲染之间知道它,它就开始工作了。
如果这是错误的或以任何方式不准确的人请纠正我!