SuperAPI AI 工具集

interactor

前端与建站

查看项目

更新于 10-16 04:02

技能介绍

Interactor 是一套用于构建交互与动效的技能,基于 @wix/interact 生态。它的核心理念是「交互优先」:开发者以声明式 JSON 配置描述动画,库负责 DOM 接线,几乎不需要直接调用动画引擎。

主要包与用途:@wix/interact 是声明式层,通过 InteractConfig 把触发器绑定到效果,提供 vanilla、React、Web-Component 入口,是主要 API。@wix/motion-presets 提供现成的命名效果(如 entrance、scroll、ongoing、mouse),以 namedEffect: { type: 'FadeIn' } 形式引用。@wix/motion 是引擎(WAAPI、CSS、ViewTimeline、fastdom),随 interact 内置,通常无需单独使用。@wix/interact-validate 是 InteractConfig 的静态校验器,用于代理侧校验及可选的开发/CI 守卫。@wix/splittext 把文本拆分为按字符/词/行的 span,并提供 Interact 适配器,用于逐字符、逐词或逐行文本动画。

使用方式遵循四步流程。第一步安装:运行 npm install @wix/interact @wix/motion-presets;文本动画另装 @wix/splittext;可选的校验包为开发依赖。第二步集成:根据技术栈选择入口,React/JSX 用 @wix/interact/react 的 <Interaction> 组件;静态或预渲染 HTML 用 @wix/interact/web 的 <interact-element>;无构建的纯 HTML 可用 CDN;打包的 vanilla 或其他框架用 /web 或基础 vanilla API。第三步添加或编辑交互:在 InteractConfig 的 interactions 数组中定义 key、trigger、effects 等,可复用 effects、sequences、conditions;选择触发器后绑定效果并设置对应播放字段。第四步校验:任何配置在进入 generate() 或 Interact.create() 前都应校验,修复所有 error 级问题,交付代码中不应包含校验器引用。

触发器与适用场景:viewEnter 用于元素滚动进入视口时的入场动画;viewProgress 用于滚动驱动效果(视差、揭示、与滚动位置同步);hover/interest 用于悬停效果(interest 兼顾焦点,更可访问);click/activate 用于点击切换(activate 兼顾键盘);pointerMove 用于跟随光标、倾斜、鼠标视差;animationEnd 用于链式动画。

关键限制与注意事项:registerEffects() 必须在 generate() 和 Interact.create() 之前运行,否则效果不会执行且仅告警;generate 的 useFirstChild 参数在 web 入口传 true,vanilla 与 React 传 false;需按官方策略做 FOUC 预防;viewEnter 同源同目标只能使用 once,重复触发需分离源和目标元素;viewProgress 要求祖先元素使用 overflow: clip 而非 hidden;不得虚构预设名称,不使用 DVD 或 Bg*/ImageParallax 等实验性预设;列表应使用唯一 key 的容器并通过 selector 或 listContainer 分发,不能重复相同 key;多层一起移动时应使用一个 key 的容器而非在每层重复效果。