DotLottie Web API——新一代播放引擎

为什么需要 DotLottie 播放器

lottie-web 和 lottie-player 都能播放 JSON 文件，但对于 dotLottie 格式（.lottie 文件），官方推荐用 LottieFiles 维护的 @lottiefiles/dotlottie-web：

• 原生支持 dotLottie 格式：包括 manifest、多动画、状态机、Motion Tokens。
• 更好的性能：重写了渲染管线，WebGL 加速可用。
• Motion Tokens API：运行时动态修改颜色、文字等 token 值。
• 状态机 API：编程方式触发状态转换。

安装

npm install @lottiefiles/dotlottie-web

基本用法

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

// 初始化
const dotLottie = new DotLottie({
  canvas: document.querySelector('#dotlottie-canvas'), // 必须用 canvas
  src: 'button.lottie',  // .lottie 文件 URL
  autoplay: true,
  loop: true,
});

// 播放/暂停
dotLottie.play();
dotLottie.pause();

Motion Tokens 运行时绑定

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

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

// 动画加载完成后
dotLottie.addEventListener('load', () => {
  // 绑定 token 值
  dotLottie.setTokens({
    'brand-primary': '#00A86B',  // 动态改颜色
    'counter': '42',              // 动态改文字
  });
});

setTokens 是实时生效的——动画正在播放时也可以改 token 值。

状态机交互

// 播放状态机里的某个状态
dotLottie.setMode('hovered');

// 触发状态转换
dotLottie.setInteraction('OnClick');

// 切换到指定状态
dotLottie.goToState('pressed');

多动画 dotLottie

一个 .lottie 文件里可以包含多段动画（manifest 里定义）：

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

dotLottie.addEventListener('load', () => {
  // 切换到第二套动画
  dotLottie.setAnimation(1);
});

和 lottie-player 的对比