CLEAR Motion

松手之后，它按物理继续走，而不是播完一段预设好的动画。中途改目标、随时打断，画面都不会跳。

开源版本 商业版本

WebAndroidWindows

参数

六个数字，决定手感。

刚度管回弹快慢，阻尼管余振多少，质量管起步轻重。

stiffness170

刚度。越大回弹越快，越小越松。

damping26

阻尼。越大越不振荡，过大则显得迟钝。

mass1.0

质量。越大起步越慢，停下也越慢。

gravity0

恒定重力。给运动加一个单向偏置。

roughness0.05

表面摩擦。影响动能损耗与停下的距离。

airResistance0.01

空气阻力。与速度平方成正比，快时更明显。

CLEAR Motion

物随心动 · 每一帧都遵循物理直觉的动效系统

物理即动画
遵循物理直觉的动效系统

CLEAR Motion 不是又一个缓动库——它是一套完整的物理动效系统，用真实的物理模型驱动每一次运动。

每一次点击的回弹、每一次滑动的惯性、每一次界面切换的过渡，都遵循真实的物理规律。触感自然、响应直觉，而非预设曲线的机械堆砌。这是 CLEAR Design 中「动效」层级的基石，也是所有清云产品交互体验的灵魂。

从清云音乐到清云计算器，所有清云产品的动效都同出一辙。同一套 Motion 引擎驱动，感受统一、体验一致——一次学会，处处熟悉。

01

触碰有生命感

按钮按下有层次，滑动有惯性，松手有回弹——每一次交互都有自己的"性格"

02

跨产品一致

从音乐到计算器，所有清云应用的交互反馈同源同感，体验零偏差

03

简单易用

引入即用，不引入额外依赖，不增加学习门槛。专注于动效本身即可

04

双版本可选

Web SDK 零依赖即用，C++ Pro 高性能原生，API 统一

一个引擎，覆盖从点击到滑动的全交互链条

动量滚动

列表滚动不再是生硬的逐行跳转。手指松开的瞬间，引擎计算出惯性动量，让内容像丝绸般顺滑滑行，减速自然、停止毫无突兀。

弹簧回弹

按钮按下、卡片抬起、弹窗弹出——每个交互层次都有专属的弹簧参数。不夸张、不廉价，恰到好处的阻尼感让人爱不释手。

物理拖拽

拖拽卡片、下拉刷新、侧滑返回——引擎实时计算力与加速度。边界有橡皮筋回弹，松手有惯性延续，像操作真实物体一般自然。

手势跟随

手指与界面的关系不再是"点击→响应"的二元逻辑。引擎让界面元素像真实物体一样随手指运动——推着走、拉回来、甩出去，直觉即操作。

物理动效 vs 传统动画
它能带来怎样的不同

传统缓动动画
  • 预设曲线（ease-in / ease-out），一成不变
  • 所有交互响应速度相同，缺乏层次感
  • 参数无物理含义，全靠视觉调参
  • 越界只能硬切回弹，生硬突兀
CLEAR Motion 物理动效
  • 每一帧根据力实时计算，运动永远自然
  • 不同交互（轻触 / 长按 / 快速滑动）响应各异
  • 刚度、阻尼、质量——每个参数都有物理意义
  • 越界自动弹簧回弹，自然不突兀
01

更自然的感受

人的触觉本能期待物理反馈。CLEAR Motion 让界面像真实世界一样运作——按下有阻力、松手有回弹、滑动有惯性。用户不需要学习如何操作，直觉自然会告诉手指该怎么做。

02

一致的体验

所有清云产品共享同一套物理参数。在清云音乐中感受到的滚动阻尼，在清云计算器里会一模一样。每一个交互瞬间，都是 "CLEAR 的感觉"。

03

面向未来的架构

三大动效模块独立协作互不干扰，可单独引入也可组合使用。Web 端零依赖即插即用，Pro 版跨端性能更优。UI 动效场景全覆盖——从点击回弹到列表滚动，从拖拽手势到界面切换。

一处打磨，处处皆享

Standard

Web 版

所有清云网页产品——清云音乐、清云计算器等——均已搭载 Standard 版引擎。你在浏览器中感受到的每一次回弹与滑动，都由它驱动。

  • 覆盖清云所有 Web 产品
  • 移动端与桌面端体验一致
  • 无需安装 · 即开即用
Pro

跨端引擎

为 Android、Windows 等原生应用打造的 Pro 版引擎，将 CLEAR Motion 的动效体验从网页延伸到桌面与移动设备。高性能、跨平台、一致性。

  • 覆盖 Android / Windows 应用
  • 原生性能 · 丝滑流畅
  • 与 Web 版体验无缝衔接

补间是一段录像。物理是当下的状态。

  • 01
    中途可以改主意

    补间一旦开始，只能等它走完或整段重播；物理随时接受新目标。

  • 02
    重来不跳帧

    补间重播会跳回起点；物理从当前位置和速度接着算，画面是连续的。

  • 03
    参数有意义

    补间调的是曲线形状；物理调的是物体本身。

版本

开源版本免费，商业版本跑原生。

同一套物理模型，同样的参数，同样的结果。区别只在运行环境和授权。

开源版本 · MIT

CLEAR Motion

浏览器直接用。一个 PhysicsEngine.js，三个模块独立可用，没有构建步骤，也没有依赖。

许可
MIT
体积
13 KB，未压缩
依赖
0
GitHub GitCode
商业版本

CLEAR Motion Pro

原生库。C++17 实现，时间步长由调用方控制，适合游戏循环、列表惯性与自绘控件。

平台
Android 四个 ABI · Windows x64 / x86
绑定
C · C++ · Rust · Java · Kotlin · C# · Go · Dart
分发
预编译二进制 + 公开头文件
GitHub GitCode

接入

引一个文件，或者链一个头文件。

两条路径都只有一步，没有构建流程，也不需要初始化。

CLEAR Motion 开源版本 · MIT
HTML 
<script src="/physics-engine.js"></script>
<script>
  const spring = new SpringAnimator(0, {
    stiffness: 320,
    damping: 20,
    mass: 1,
    onUpdate: v => { ball.style.transform = `translateX(${v}px)`; }
  });

  spring.setTarget(320);
</script>
CLEAR Motion Pro 商业版本
C · clear_motion.h 
/* engine */
cm_engine *cm_engine_create(const cm_config *config);
cm_entity *cm_engine_create_entity(cm_engine *e);
cm_spring *cm_engine_create_spring(cm_engine *e, const cm_spring_config *c);
void       cm_engine_update(cm_engine *e, float dt);
void       cm_engine_destroy(cm_engine *e);

/* scroll */
cm_scroll *cm_scroll_create(cm_engine *e, const cm_scroll_config *c);
void       cm_scroll_set_bounds(cm_scroll *s, float min, float max);
void       cm_scroll_start(cm_scroll *s, float velocity);
void       cm_scroll_move(cm_scroll *s, float delta);
void       cm_scroll_end(cm_scroll *s, float velocity);
void       cm_scroll_update(cm_scroll *s, float dt);
void       cm_scroll_destroy(cm_scroll *s);

/* spring */
cm_spring *cm_spring_animator_create(const cm_spring_config *c);
void       cm_spring_animator_set_target(cm_spring *s, float target);
void       cm_spring_animator_update(cm_spring *s, float dt);
void       cm_spring_animator_destroy(cm_spring *s);

预编译二进制与公开头文件，不含实现源码、构建脚本与单元测试。可以随成品分发并保留 LICENSE 与 NOTICE；不能反编译、单独转售或作为独立 SDK 再分发。