MC.js 最佳中文版

⚡ 运动控制 · 轻量动画引擎

🎯 为 H5 与移动端打造的流畅交互库

中文文档 · 开箱即用 · 智能补间 · 物理缓动

📦 安装 v3.2 📖 中文指南

🚀 核心优势

极致轻量，移动端加载无压力

iOS/Android/PC 一致体验

贝塞尔、弹性、回弹、物理模拟

文档/示例/社区全面汉化

三行代码实现平滑运动：

// 引入 MC.js (CDN)
import MC from 'mc.js';

MC.animate('#box', { x: 280, opacity: 0.8 }, {
  duration: 800, easing: 'spring(1, 80, 12)'
});
        

✨ 实时预览效果

🎬 补间动画 Tween

支持数值、颜色、字符串补间，自动识别单位 (px, %, deg)。链式调用与时间线控制。

🧲 物理引擎 Physics

弹簧、惯性、拖拽、碰撞检测。模拟真实运动，适合游戏级交互。

📜 滚动驱动 Scroll

基于 IntersectionObserver 的滚动动画，延迟加载与视差效果轻松实现。

MC.js 与 anime.js 或 GSAP 有何不同？

MC.js 专注于移动端与轻量化场景，gzip 仅 6KB，内置中文文档与 spring 物理缓动。API 更简洁，适合 H5 互动营销与小程序 WebView。

是否支持 TypeScript 与框架 (React/Vue)？

完全支持。提供 TypeScript 声明文件，并有 React Hook (useMC) 与 Vue 指令 (v-mc) 扩展包。中文社区提供示例。

如何实现连续动画与时间线？

使用 MC.timeline() 可以轻松创建序列动画，支持 delay, stagger, 循环与 yoyo 效果。具体可查阅中文指南“时间线”章节。

移动端触摸交互是否有优化？

内置 touch 事件适配与硬件加速 (transform: translateZ(0))，在 iOS/Android 上保持 60fps 流畅度。提供手势识别插件。

是否兼容无头浏览器与 SSR？

核心库不依赖 DOM，可在 Node 环境运行；DOM 插件仅在浏览器端加载。支持 Next.js/Nuxt 静态生成。

💬 更多问题？访问中文社区或提交 Issue，平均回复时间 < 2h

遵循百度移动端算法，页面采用语义化结构、卡片式分层、快速加载与适配。MC.js 助力交互体验提升用户停留。

📲 视口适配

🔍 语义化标签

⚡ 轻量交互

当前版本: v3.2.1 (中文稳定版) · 2025.04

npm install mc.js@latest

GitHub

中文文档

Playground