什么是 Motion.dev 动画库？

Motion.dev 代表了下一代动画库，是 Framer Motion 的演进版本。此技能提供了构建流体、高性能 Web 动画所需工具的全面访问，且体积仅为 2.3kb。通过将其纳入您的 Openclaw Skills 工具包，您将获得使用硬件加速技术为 HTML、SVG 和 JavaScript 对象制作动画的能力，确保在所有设备上提供流畅的用户体验。

该技能涵盖了多功能的 Motion API，简化了弹簧物理和手势检测等复杂任务。无论您是在构建 React 应用还是使用原生 JavaScript，此文档都能确保您以专业级的精度实现从基础过渡到复杂的滚动触发时间线的所有内容。

下载入口:https://github.com/openclaw/skills/tree/main/skills/leonaaardob/lb-motion-skill

安装与下载

1. ClawHub CLI

从源直接安装技能的最快方式。

2. 手动安装

将技能文件夹复制到以下位置之一

优先级：工作区 > 本地 > 内置

3. 提示词安装

将此提示词复制到 OpenClaw 即可自动安装。

Motion.dev 动画库 应用场景

• 在 React、Vue 或原生 JavaScript 应用中实现生产级动画。
• 为落地页创建响应式的、滚动关联或滚动触发的视觉效果。
• 开发基于手势的交互，包括拖拽、悬停、点击和按压状态。
• 将现有的 Framer Motion 实现迁移到性能更强的 Motion.dev 引擎。
• 通过利用硬件加速的运动序列优化 Web 应用性能。

1. 通过 Openclaw Skills 访问文档，确定最佳动画方法，例如 animate 函数或框架特定组件。
2. 使用 CSS 选择器或直接元素引用定位特定的 DOM 元素。
3. 定义动画的关键帧属性，如缩放、旋转或透明度。
4. 配置过渡设置，包括时长、缓动或弹簧物理参数（劲度、阻尼）。
5. 执行动画逻辑或将其链接到外部触发器，如滚动位置或用户手势。

Motion.dev 动画库 配置指南

要将此技能集成到您的项目中，请使用您偏好的包管理器安装核心库：

npm install motion

对于 React 特定的实现，请确保从正确的入口点导入 motion 组件：

import { motion } from "motion/react"

Motion.dev 动画库 数据架构与分类体系

该技能通过以下主要接口组织动画逻辑和配置：

name: motion
version: 1.0.0
description: Complete Motion.dev documentation - modern animation library for React, JavaScript, and Vue (formerly Framer Motion)
author: Leonardo Balland
tags:
  - motion
  - animation
  - react
  - javascript
  - vue
  - framer-motion
  - transitions
  - gestures
  - scroll
  - spring
  - keyframes
read_when:
  - Working with Motion animations or Framer Motion
  - Implementing animations in React, Vue, or vanilla JavaScript
  - Creating scroll-linked or scroll-triggered animations
  - Building gesture-based interactions
  - Optimizing animation performance
  - Migrating from Framer Motion to Motion

Motion.dev Documentation

Motion is a modern animation library for React, JavaScript, and Vue. It's the evolution of Framer Motion, offering:

• Tiny size: Just 2.3kb for the mini HTML/SVG version
• High performance: Hardware-accelerated animations
• Flexible: Animate HTML, SVG, WebGL, and JavaScript objects
• Easy to use: Intuitive API with smart defaults
• Spring physics: Natural, kinetic animations
• Scroll animations: Link values to scroll position
• Gestures: Drag, hover, tap, and more

Quick Reference

Installation

npm install motion

Basic Animation

import { animate } from "motion"

// Animate elements
animate(".box", { rotate: 360, scale: 1.2 })

// Spring animation
animate(element, { x: 100 }, { type: "spring", stiffness: 300 })

// Stagger multiple elements
animate("li", { opacity: 1 }, { delay: stagger(0.1) })

React

import { motion } from "motion/react"

Scroll Animations

import { scroll } from "motion"

scroll(animate(".box", { scale: [1, 2, 1] }))

Documentation Structure

• quick-start.md - Installation and first animation
• More docs to be added...

When to Use This Skill

Use this skill when:

• Implementing animations in web applications
• Optimizing animation performance
• Creating scroll-based effects
• Building interactive UI with gestures
• Migrating from Framer Motion to Motion

External Resources

• Official site: https://motion.dev
• GitHub: https://github.com/motiondivision/motion
• Examples: https://motion.dev/examples