Svelte Tweened
设置数值并观察DOM的自动更新是很酷的。知道更酷的是什么吗？变化这些值。Svelte包括一些工具，可以帮助你建立灵活的用户界面，使用动画来传达变化。让我们先把 progress存储改成一个Tweened值。<script>
import { tweened } from 'svelte/motion';
const progress = tweened(0);</script>单击这些按钮会使进度条以动画方式显示其新值。虽然它有点机械化并且不令人满意。我们需要添加一个easing(缓动)函数：<script>
import { tweened } from 'svelte/motion';
import { cubicOut } from 'svelte/easing';
const progress = tweened(0, { duration: 400,
easing: cubicOut
});
</script>svelte/easing 模块包含 Penner 缓动方程，或者您可以提供自己的 p => t 函数，其中 p 和 t 都是介于 0 和 1 之间的值。可用于tweened的全部选项。delay — tween 开始前的毫秒数duration — 以毫秒为单位的 tween 持续时间，或者一个(from,to)=> milliseconds的函数，允许你（例如）为更大的值变化指定更长的 tweens。easing — 一个 p => t 函数interpolate — 一个自定义 (from, to) => t => value 用于在任意值之间进行插值的函数。默认情况下，Svelte 将在数字、日期和形状相同的数组和对象之间进行插值（只要它们只包含数字和日期或其他有效的数组和对象）。如果要插入（例如）颜色字符串或转换矩阵，请提供自定义插值器您还可以将这些选项作为第二个参数传递给 progress.set 和 progress.update，在这种情况下它们将覆盖默认值。 set 和 update 方法都返回一个在 tween 完成时解析的 promise。示例代码App.svelte<script>
import { writable } from 'svelte/store';
const progress = writable(0);</script>
<style>
progress {
display: block;
width: 100%;
}
</style>
<progress value={$progress}></progress>
<button on:click="{() => progress.set(0)}">
0%
</button>
<button on:click="{() => progress.set(0.25)}">
25%
</button>
<button on:click="{() => progress.set(0.5)}">
50%
</button>
<button on:click="{() => progress.set(0.75)}">
75%
</button>
<button on:click="{() => progress.set(1)}">
100%
</button>