用途:在 Framer Motion 中实现滚动驱动动画,包括 useScroll、useTransform、滚动联动效果、视差和进度指示。与核心动画技能 framer-motion-core、变体技能 framer-motion-variants、布局动画技能 framer-motion-layout 相关。
主要能力:useScroll 跟踪滚动进度,支持 target、offset、container 选项;useTransform 把一个 motion value 映射为另一个,支持多段输入输出和 clamp: false 关闭钳制。可用于视差(不同滚动速度制造深度)、滚动进度条、使用 useInView 配合 variants 在元素进入视口时触发动画。offset 格式为 "start end",每端可取 start、center、end 或百分比,如 ["start end", "end start"] 表示元素可见期间,[0, 1] 表示整篇文档滚动。useInView 选项有 once(是否只触发一次,默认 false)、margin(触发偏移,默认 "0px")、amount(可见阈值,"any"、"all" 或数字)。
使用方式:从 framer-motion 引入 useScroll、useTransform、useInView 和 motion,通过 style 将 motion value 绑定到组件,如 scaleX: scrollYProgress。简单滚动触发可用 whileInView。
最佳实践:滚动联动动画用 useScroll 配 useTransform;简单滚动触发用 whileInView;设置恰当的 offset 控制起止;缩放动画设置 transformOrigin。避免不使用 offset、横向滚动容器忘记设高度、对布局属性做滚动动画、入场动画未加 once: true。
限制:资料未提供安装命令、价格、平台与版本要求,暂未提供。更多信息见 https://www.framer.com/motion/use-scroll/ 等官方链接。