如何使用Lottie的onSegmentStart事件处理器？

该事件是Lottie动画实例的原生生命周期事件，仅在动画每一个播放片段启动的瞬间触发一次。
触发场景包含三类：

• 动画初始化完成后首次启动播放
• 调用playSegments方法切换到指定片段播放
• 开启循环时，单轮播放结束切换到下一轮循环的起始节点
  它和逐帧触发的onEnterFrame事件核心区别是不会在片段播放过程中重复触发，非常适合做片段维度的逻辑触发。

支持两种绑定写法：

1. 初始化加载动画时，直接在配置项中传入onSegmentStart回调

const anim = lottie.loadAnimation({
  container: document.querySelector('#lottie-box'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: './animation.json',
  onSegmentStart: (currentSegment) => {
    // 回调参数currentSegment为当前启动片段的帧范围，格式为[起始帧, 结束帧]
    console.log('当前播放片段帧范围：', currentSegment)
  }
})

2. 动画实例创建完成后，通过事件监听方法动态绑定

anim.addEventListener('segmentStart', (currentSegment) => {
  console.log('片段启动：', currentSegment)
})

实现逻辑：提前定义好需要变速的片段帧区间，在onSegmentStart触发时比对当前启动的片段是否为目标片段，匹配时调用setSpeed修改速度，非目标片段恢复默认速度即可。
参考代码：

// 配置项：需要慢放的片段帧范围（30帧-60帧）
const TARGET_SEGMENT = [30, 60]
const DEFAULT_SPEED = 1
const TARGET_SEGMENT_SPEED = 0.5

const anim = lottie.loadAnimation({
  container: document.querySelector('#lottie-box'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: './animation.json',
  onSegmentStart: (currentSegment) => {
    // 校验当前片段是否为目标变速片段
    const matchTarget = currentSegment[0] === TARGET_SEGMENT[0] && currentSegment[1] === TARGET_SEGMENT[1]
    anim.setSpeed(matchTarget ? TARGET_SEGMENT_SPEED : DEFAULT_SPEED)
  }
})

// 如果需要拆分多段播放触发逻辑，主动调用playSegments传入分段数组即可
// 示例：将动画拆分为3段顺序播放，播放到TARGET_SEGMENT时会自动触发变速
// anim.playSegments([[0, 29], TARGET_SEGMENT, [61, anim.totalFrames]], true)

注意：如果没有主动调用playSegments拆分片段，Lottie会默认把整个动画识别为一个[0, 总帧数]的完整片段，此时onSegmentStart仅会在首次播放、循环重启时触发。

内容的提问来源于stack exchange，提问作者Josh Silveous