webtiming/timingsrc项目中的时序转换器(Timing Converters)详解

时序转换器概述

时序转换器(Timing Converters)是webtiming/timingsrc项目中的核心功能之一，它允许开发者基于基础时序对象(Timing Object)创建各种转换后的时序表示。这些转换器可以修改时序对象的行为特性，如速度、位置、时间范围等，而无需直接修改原始时序对象。

基础时序对象

在示例中，首先创建了一个基础时序对象：

var to = new TIMINGSRC.TimingObject({range:[0,50]});

这个对象定义了一个从0到50的范围，作为所有转换器的基础。通过四个控制按钮可以操作这个基础时序对象：

• 播放(Play)：以正常速度(1.0)前进
• 暂停(Pause)：速度设为0
• 重置(Reset)：位置归零并停止
• 后退(Backwards)：以反向速度(-1.0)播放

时序转换器类型详解

1. 倾斜转换器(Skew Converter)

var toSkew = new TIMINGSRC.SkewConverter(to, 2);

倾斜转换器会对原始时序对象的位置值进行线性偏移。在示例中，参数为2表示输出的位置值是原始值的2倍。例如原始位置为5时，转换器输出10。

2. 延迟转换器(Delay Converter)

var toDelay = new TIMINGSRC.DelayConverter(to, 1.0);

延迟转换器会使得时序对象的输出延迟指定的时间(秒)。示例中延迟1秒，意味着当原始时序对象到达某位置时，转换器会在1秒后才输出相同的位置值。

3. 时间偏移转换器(TimeShift Converter)

var toTimeshift = new TIMINGSRC.TimeShiftConverter(to, -1.0);

时间偏移转换器会调整时序对象的时间轴。与延迟不同，它实际上是"重写"时间值。示例中偏移-1秒，意味着转换器的时钟比原始时序对象慢1秒。

4. 缩放转换器(Scale Converter)

var toScale = new TIMINGSRC.ScaleConverter(to, 2);

缩放转换器会按比例调整时序对象的速度。示例中参数为2，意味着转换器的速度是原始速度的2倍。如果原始速度为1，转换器速度为2；原始速度为0.5，转换器速度为1。

5. 循环转换器(Loop Converter)

var toLoop = new TIMINGSRC.LoopConverter(to, [0, 10]);

循环转换器会使时序对象在指定区间内循环。示例中设置为[0,10]，当时序对象位置超过10时会自动回到0继续前进。这对于创建循环动画特别有用。

6. 范围转换器(Range Converter)

var toRange = new TIMINGSRC.RangeConverter(to, [10,15]);

范围转换器会强制时序对象在指定范围内运行。与循环转换器不同，它不会自动循环，而是将输出限制在给定范围内。示例中设置为[10,15]，意味着任何小于10的位置会被视为10，大于15的位置会被视为15。

7. 导数转换器(Derivative Converter)

var toDerivative = new TIMINGSRC.DerivativeConverter(to);

导数转换器会输出原始时序对象的位置变化率(速度)。这对于需要监控时序对象速度变化的场景非常有用。

实现原理

所有转换器都通过监听基础时序对象的变化来工作。示例中使用了一个数组来存储转换器与对应DOM元素的映射关系：

var array = []; // timing object/converter -> dom element
array.push([to, document.getElementById("to")]);

然后通过定时器定期更新显示：

setInterval(function () {
  array.forEach(function (item) {
    var to = item[0];
    var elem = item[1];
    var pos = to.query();
    if (pos !== null) {
      elem.innerHTML = to.query().position.toFixed(2);
    }
  });
}, 200);

这种设计模式使得添加新的转换器变得非常简单，只需创建转换器并将其添加到数组中即可。

应用场景

时序转换器在多媒体同步、动画控制、交互式内容等领域有广泛应用：

1. 多媒体同步：可以使用延迟转换器来调整音视频同步
2. 动画控制：循环转换器可用于创建无缝循环动画
3. 速度控制：缩放转换器可用于实现慢动作或快进效果
4. 范围限制：范围转换器可用于确保动画或媒体在安全范围内播放

通过组合不同的转换器，开发者可以构建复杂的时序行为，而无需从头编写复杂的控制逻辑。这种模块化的设计大大简化了基于时间的Web应用的开发。