Question

我有一个线性刻度，它是屏幕像素和帧之间的映射（0-100）

const frameScale = scaleLinear()
  .domain([0, 1000]) // pixels
  .range([0, 100]) // frames
  .clamp(true);

我现在想要一个包含任意数量的关键帧的比例

const keyScale = scale***()
  .domain([5, 25, 60, 88]) // key frames
  .range([0, 100]);

我希望能够从像素值或帧中确定最接近的关键帧。

关键帧的定义范围应该是多少？

我应该用什么函数来转换px - ＆gt;最近的关键帧和框架 - ＆gt;关键帧？

更新这是一个游乐场，可以看到我正在尝试做什么。 https://beta.observablehq.com/@leon/key-frame-scales

使用scaleQuantize可以提供一些东西，但它不正确，因为你可以看到它将关键帧50输出到远处。

Answer 1

我无法找到有效的预制比例。

我最终做的是首先使用frameScale来获取当前帧。

然后使用此函数获取最接近的关键帧

const currentFrame = this.frameScale(x);

const keyframes = [10, 20, 30];

const closestFrame = closestKeyFrame(keyframes, currentFrame);

const closestKeyFrame = (keyframes, frame) => {
    return keyframes.reduce((prev, curr) => Math.abs(curr - frame) < Math.abs(prev - frame) ? curr : prev);
}

使用比例查找最近的关键帧

1 个答案: