LogoClawIndex
案例技能关于
LogoClawIndex

motion-framer - React 与 JavaScript 动画交互

使用 motion 组件、变体、手势、布局过渡、退出动画、弹簧物理和滚动效果,为 React 与 JavaScript 创建动画。

标签

更新于: 2026-10-07

能力

典型输入

典型输出

该技能可以做什么

  • 创建运动组件
  • 配置动画状态
  • 处理悬停与点击手势
  • 实现拖拽交互
  • 实现组件退出动画
  • 实现布局变化动画
  • 创建基于滚动的效果

输入

  • UI 组件代码
  • 动画状态定义
  • 手势需求
  • 布局过渡需求
  • 滚动交互需求
  • Motion 库选择

输出

  • 动画 UI 组件
  • 悬停与点击交互
  • 拖拽交互
  • 页面过渡
  • 布局过渡
  • 基于滚动的效果

要求

  • React 项目需使用 React 18+
  • Motion v11+ 或 Framer Motion
  • 适用时使用现代 React 框架

来源

  • 规范: SKILL.md

ClawIndex

OpenClaw Skills 与 Use Case 索引

ClawIndex 是一个生态驱动的 OpenClaw Skills 与真实 Use Case 索引站。

索引

Skills·
Cases

Meta

关于·
声明·
邮箱·
GitHub
© 2026 ClawIndex 保留所有权利。
动画
React
JavaScript
手势
布局过渡
滚动效果
创建运动组件
配置动画状态
处理悬停与点击手势
实现拖拽交互
UI 组件代码
动画状态定义
手势需求
动画 UI 组件
悬停与点击交互
拖拽交互