Question

在元素处于可见状态时（例如，当我们滚动到元素时），是否有任何内置方法可以使动画开始？

Framer Motion的“安装动画”部分显示：

安装组件时，如果它们与样式或初始定义的值不同，它将自动设置为动画值。

因此，我无法真正找到让动画在观看时开始播放的简单方法。

但是，我现在看到的唯一选择是使用Animation Controls，这意味着我将不得不手动实现滚动上的侦听器并触发control.start()，任何更简单的方法都将不胜感激

Answer 1

恐怕目前还没有内置的方法来实现这一目标。但是，如上所述，您目前可以使用imperative animation controls来达到此效果。交叉口观察器对于检测元素当前是否可见很有用。

这是一个CodeSandbox，演示了模式：https://codesandbox.io/s/framer-motion-animate-in-view-gqcc8。

相关代码：

function Box() {
  const controls = useAnimation();
  const [ref, inView] = useInView();

  useEffect(() => {
    if (inView) {
      controls.start("visible");
    }
  }, [controls, inView]);

  return (
    <motion.div
      ref={ref}
      animate={controls}
      initial="hidden"
      variants={{
        visible: { opacity: 1},
        hidden: { opacity: 0}
      }}
    />
  );
}

当元素在视图中时成帧器运动动画（滚动到元素时）

1 个答案: