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>