Motion Tokens 数据绑定——让一个动画适配多种品牌

为什么需要 Motion Tokens

假设你在做一个金融 App 的 Loading 动画——主色调是品牌蓝。然后同一个团队又要做一个保险 App 的 Loading 动画——主色调是品牌绿。

传统做法：在 Creator 里打开蓝版本 → 手动改所有用到蓝色的填充色为绿色 → 另存为新文件。如果还有第三个、第四个品牌呢？每个都要手动改一遍。

Motion Tokens 的做法：在 Creator 里把蓝色填充标记为一个 token（比如叫 brand-primary）。运行时传入 { "brand-primary": "#00A86B" }——同一个动画文件，自动渲染成绿色版本。

工作原理

Motion Tokens 是 dotLottie 格式的一部分，它做的事是：

1. 在设计端：你把动画里的某些属性（颜色值、文字内容、位置坐标、不透明度）"标记"为 token，并给 token 起一个语义化名字。
2. 打包时：token 信息和默认值被写入 .lottie 文件的 manifest。
3. 运行时：播放器在渲染每一帧时，检查当前 token 值——如果有外部传入的值，用外部的；没有就用默认值。

适用的属性类型

在 Creator 里设置 Motion Tokens

1. 在右侧属性面板里，找到你想暴露的属性（比如填充色）。
2. 点击属性名旁的 "..." 菜单 → 选择 "Convert to Motion Token"。
3. 输入 token 名称（建议用 kebab-case，比如 brand-primary）。
4. 继续标记其他属性，完成后导出 dotLottie。

开发端使用

import { DotLottie } from '@lottiefiles/dotlottie-web';

const player = new DotLottie({
  canvas: document.querySelector('#dotlottie-canvas'),
  src: 'loading.lottie',
});

// 运行时绑定 token 值
player.setTokens({
  'brand-primary': '#00A86B',
  'message': '正在加载...',
  'counter': '85',
});

token 值会立即生效，动画在运行中也可以动态修改。

实际应用

• 多品牌产品：一套动画文件，不同品牌皮肤换颜色和文字，不需要重新导出。
• 动态数据展示：把数字、百分比等实时数据通过 Motion Tokens 绑定到动画上（比如"步数计数器"动画，count token 随步数变化）。
• 暗色/亮色主题：用 token 暴露主背景色和前景色，切换主题时只需要改 token 值。