滚动动画

滚动动画有两种类型

• Scroll-triggered: 当元素进入视口时，会触发常规动画。

• Scroll-linked: 值直接链接到滚动进度。

Motion 能够实现这两种类型的动画。

Scroll-triggered 动画

Scroll-triggered 动画只是在元素进入或离开视口时触发的常规动画。

Motion 提供了thewhileInView属性以在元素进入视图时设置动画目标或变体。

<motion.div
  initial={{ opacity: 0 }}
  whileInView={{ opacity: 1 }}
/>

一次性动画

使用theviewport选项，可以设置 once: true，这样一旦元素进入视口，它就不会动画移出。

<motion.div
  initial="hidden"
  whileInView="visible"
  viewport={{ once: true }}
/>

更改滚动容器

默认情况下，当元素进入/离开 window 时，它将被视为在视口内。这可以通过提供另一个可滚动元素的 ref 来更改。

function Component() {
  const scrollRef = useRef(null)
  
  return (
    <div ref={scrollRef} style={{ overflow: "scroll" }}>
      <motion.div
        initial={{ opacity: 0 }}
        whileInView={{ opacity: 1 }}
        viewport={{ root: scrollRef }}
      />
    </div>
  )
}

有关更多配置选项，请查看themotion组件API 参考。

设置状态

还可以使用 useInView 在任何元素（不仅仅是 motion 组件）进入和离开视口时设置状态hook.

Scroll-linked 动画

Scroll-linked 动画是使用以下内容创建的motion values和 useScrollhook.

useScroll 返回四个 motion values，其中两个以像素为单位存储滚动偏移量 (scrollX 和 scrollY)，另外两个将滚动进度存储为介于 0 和 1 之间的值。

这些 motion values 可以直接传递给特定样式。例如，将 scrollYProgress 传递给 scaleX 非常适合作为进度条。

const { scrollYProgress } = useScroll();

return (
  <motion.div style={{ scaleX: scrollYProgress }} />  
)

由于 scrollY 是一个 MotionValue，因此您可以使用一个巧妙的技巧来判断用户滚动方向何时更改

const { scrollY } = useScroll()
const [scrollDirection, setScrollDirection] = useState("down")

useMotionValueEvent(scrollY, "change", (current) => {
  const diff = current - scrollY.getPrevious()
  setScrollDirection(diff > 0 ? "down" : "up")
})

非常适合触发粘性页眉动画！
~ Sam Selikoff,Motion for React Recipes

值平滑

此值可以通过将其传递给 useSpring 来平滑。

const { scrollYProgress } = useScroll();
const scaleX = useSpring(scrollYProgress, {
  stiffness: 100,
  damping: 30,
  restDelta: 0.001
})

return <motion.div style={{ scaleX }} />

转换其他值

使用theuseTransformhook，可以轻松使用进度 motion values 在任何值之间混合，例如颜色

const backgroundColor = useTransform(
  scrollYProgress,
  [0, 0.5, 1],
  ["#f00", "#0f0", "#00f"]
)

return <motion.div style={{ backgroundColor }} />

示例

跟踪元素滚动偏移量

跟踪视口内的元素

视差

3D

滚动速度和方向

阅读完整useScroll文档以了解更多关于创建上述效果的信息。