英文:
Is it possible to get the state of a svelte tweened motion?
问题
在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>
在400毫秒的持续时间内，我希望以不同的颜色显示进度条。因此，如果通常是蓝色的，我希望它在整个400毫秒内变为红色，然后恢复到原始颜色。
为此，我只需知道progress当前是否正在“缓动”（抱歉，不确定这里的词是什么）。例如：
<progress value={$progress} class:tweening={progress.tweening === true}></progress>
<style>
.tweening {
/* 缓动时要应用的样式 */
}
</style>
这是否可以在不添加过多复杂性的情况下实现（例如，不手动检查HTML值是否每几毫秒更改一次）？
英文:
In Svelte, while something is moving from one tweened state to another, I want to further highlight the motion , but want to end up in the same state as before.
Using part of the example from the svelte tutorial:
<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>
During the 400ms duration, I want to display the progress bar in a different color. So if it is usually blue, I want it to be red for the entire 400ms and then go back to its original color.
For this I would simply need to know if progress is currently "tweening" (sorry, not sure what the word here is) or not. So for example
<progress value={$progress} class:tweening={progress.tweening === true}></progress>
<style>
.tweening {
/* my styles I want to apply while tweening */
}
</style>
Is this possible without adding lots of complexity (e.g. not manually checking that the HTML value is changing every few ms)?
答案1
得分: 4
Svelte的tweened函数返回基本的Svelte存储。
您可以在动画进行时使用progress.subscribe(console.log)获取状态。在控制台中，您每次只会看到一个数字。是的，这是您可以读取的唯一数据。
但是（来自svelte.dev/tutorial/tweened）
set和update方法都返回一个在缓动完成时解析的 promise。
因此，您只需等待 promise 解析，然后将进度条的颜色恢复为"正常"。
示例代码：
let tweening = false;
async function setProgress(v: number) {
tweening = true;
await progress.set(v)
tweening = false;
}
或者 REPL
英文:
Svelte tweened function returns basic svelte store.
You can get the state while it's animating using progress.subscribe(console.log). In the console you will see one number only per log. Yes, that's the only data you can read.
But (from svelte.dev/tutorial/tweened)
> The set and update methods both return a promise that resolves when the tween completes.
So you can just wait until promise resolves and then change the color of your progressbar back to the "normal" one.
Code example:
let tweening = false;
async function setProgress(v: number) {
tweening = true;
await progress.set(v)
tweening = false;
}
Or REPL
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论