如何使用成帧器运动 useAnimate hook 设置初始值

Question

运动组件有一个初始道具：

<motion.div
  initial={{ x: "100%" }}
  animate={{ x: "calc(100vw - 50%)" }}
/>

使用带有

useInView

钩子的 useAnimate 时：

const [scope, animate] = useAnimate();
const isInView = useInView(scope, { once: true, amount: 0.8 });

useEffect(() => {
  if (isInView) {
    animate('.anim-up', { y: [100, 0] }, { duration: 1, delay: stagger(0.15) })
  }
}, [isInView]);

第一个关键帧所有元素从0跳到100，如何设置初始值？

Answer 1

使用

useAnimate

时，请在 CSS 文件本身中分配初始值。然后，您需要将元素转换为的值必须传递给 animate 方法。使用

initial

时不需要道具

useAnimate

。另外，最好直接引用元素，而不是使用类名（如“span”/“p”/“div”等）

这是您的解决方案的示例（y 从 100 移动到 0）。

const [animationScope, animateSpan] = useAnimate();

useEffect(() => {
  if (isInView) {
    animateSpan('span', { y: 0 }, { duration: 1, delay: staggerChildren(0.15) })
  }
}, [isInView]);

//jsx to be returned:
    
  <div ref={animationScope}>
    <motion.span></motion.span>
  </div>

在上面的示例中，只有当

<span></span>

的

transform: translateY()

为

100

时才能实现预期结果。另外，请注意，上面的

useEffect

仅当依赖项

isInView

的状态发生变化时才会启动（提及这一点，因为它似乎是一个常规变量）。祝你好运！

Answer 2

补充一下：当使用 useAnimate 对 SVG 组件内部进行动画处理时，除非添加了运动，否则即使通过样式定义，翻译也会失败。这很令人困惑，所以我将其添加为评论。