是否有可能获得苗条补间运动的状态？

Question

在 Svelte 中，当某些东西从一种补间状态移动到另一种状态时，我想进一步突出显示该运动，但希望最终处于与之前相同的状态。

使用 svelte 教程中的部分示例：

<script>
    const progress = tweened(0, {
        duration: 400,
        easing: cubicOut
    });
</script>

<progress value={$progress}></progress>

<button on:click="{() => progress.set(0.25)}">
    25%
</button>

<button on:click="{() => progress.set(0.5)}">
    50%
</button>

在 400ms 的持续时间内，我想以不同的颜色显示进度条。所以如果它通常是蓝色的，我希望它在整个 400 毫秒内都是红色的，然后回到原来的颜色。

为此，我只需要知道progress当前是否是“补间”（抱歉，不确定这里的词是什么）。例如

<progress value={$progress} class:tweening={progress.tweening === true}></progress>

<style>
.tweening {
  /* my styles I want to apply while tweening */
}
</style>

这是否可以在不增加大量复杂性的情况下实现（例如，不手动检查 HTML 值是否每隔几毫秒更改一次）？

Answer 1

Svelte tweened函数返回基本的 svelte 存储。

您可以使用 获取动画时的状态progress.subscribe(console.log)。在控制台中，每个日志只能看到一个数字。是的，这是您唯一可以读取的数据。

但是（来自svelte.dev/tutorial/tweened）

和方法都返回set一个update在补间完成时解析的承诺。

因此，您可以等到承诺解决，然后将进度条的颜色更改回“正常”颜色。

代码示例：

let tweening = false;
async function setProgress(v: number) {
    tweening = true;
    await progress.set(v)
    tweening = false;
}

或者REPL