通常，传达值正在更改的好方法是使用运动。Svelte 附带用于向用户界面添加动效的类。

¥Often, a good way to communicate that a value is changing is to use motion. Svelte ships classes for adding motion to your user interfaces.

从 svelte/motion 导入 Tween 类：

¥Import the Tween class from svelte/motion:

<script>
	import { Tween } from 'svelte/motion';

	let progress = $state(0);
</script>

<script lang="ts">
	import { Tween } from 'svelte/motion';

	let progress = $state(0);
</script>

将 progress 转换为 Tween 的实例：

¥Turn progress into an instance of Tween:

<script>
	import { Tween } from 'svelte/motion';

	let progress = new Tween(0);
</script>

<script lang="ts">
	import { Tween } from 'svelte/motion';

	let progress = new Tween(0);
</script>

Tween 类具有可写的 target 属性和只读的 current 属性 - 更新 <progress> 元素...

¥The Tween class has a writable target property and a readonly current property — update the <progress> element...

<progress value={progress.current}></progress>

...以及每个事件处理程序：

¥...and each of the event handlers:

<button onclick={() => (progress.target = 0)}>
	0%
</button>

单击按钮会导致进度条动画到其新值。不过，这有点机械化，让人不满意。我们需要添加一个缓动函数：

¥Clicking the buttons causes the progress bar to animate to its new value. It’s a bit robotic and unsatisfying though. We need to add an easing function:

<script>
	import { Tween } from 'svelte/motion';
	import { cubicOut } from 'svelte/easing';

	let progress = new Tween(0, {
		duration: 400,
		easing: cubicOut
	});
</script>

<script lang="ts">
	import { Tween } from 'svelte/motion';
	import { cubicOut } from 'svelte/easing';

	let progress = new Tween(0, {
		duration: 400,
		easing: cubicOut
	});
</script>

svelte/easing 模块包含 Penner 缓和方程，或者你可以提供自己的 p => t 函数，其中 p 和 t 都是介于 0 和 1 之间的值。

¥[!NOTE] The svelte/easing module contains the Penner easing equations, or you can supply your own p => t function where p and t are both values between 0 and 1.

Tween 可用的全套选项：

¥The full set of options available to Tween:

• delay — 补间开始前的毫秒数

  ¥delay — milliseconds before the tween starts

• duration — 补间持续时间（以毫秒为单位），或 (from, to) => milliseconds 函数，允许你（例如）为更大的值变化指定更长的补间

  ¥duration — either the duration of the tween in milliseconds, or a (from, to) => milliseconds function allowing you to (e.g.) specify longer tweens for larger changes in value

• easing — p => t 函数

  ¥easing — a p => t function

• interpolate — 用于在任意值之间进行插值的自定义 (from, to) => t => value 函数。默认情况下，Svelte 会在数字、日期和形状相同的数组和对象之间进行插值（只要它们只包含数字和日期或其他有效的数组和对象）。如果你想插入（例如）颜色字符串或变换矩阵，请提供自定义插值器

  ¥interpolate — a custom (from, to) => t => value function for interpolating between arbitrary values. By default, Svelte will interpolate between numbers, dates, and identically-shaped arrays and objects (as long as they only contain numbers and dates or other valid arrays and objects). If you want to interpolate (for example) colour strings or transformation matrices, supply a custom interpolator

你还可以调用 progress.set(value, options)，而不是直接分配给 progress.target，在这种情况下 options 将覆盖默认值。set 方法返回一个 promise，该 promise 在补间完成时解析。

¥You can also call progress.set(value, options) instead of assigning directly to progress.target, in which case options will override the defaults. The set method returns a promise that resolves when the tween completes.