【问题标题】:Anime.Js Seek function not reversing in ReactAnime.Js Seek 函数在 React 中不反转
【发布时间】:2020-05-09 01:13:43
【问题描述】:

我正在尝试制作一个随着您滚动而转换的动画。我需要它在向上滚动时反转。我知道这是可能的 (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

如您所见,它只向前移动,与滑块无关。它也永远不会逆转。我不知道发生了什么......

【问题讨论】:

    标签: reactjs animation anime.js


    【解决方案1】:

    我能够修复我的动画,您可以在此处查看工作版本:
    https://codesandbox.io/s/animejs-react-seeking-h8y6m

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

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

    【讨论】:

      猜你喜欢
      • 2019-08-28
      • 1970-01-01
      • 2021-09-29
      • 2021-06-16
      • 1970-01-01
      • 2019-09-20
      • 2021-01-19
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多