svelte/motion

svelte/motion 模块导出两个函数 tweened 和 spring，用于创建可写存储，其值在 set 和 update 之后随时间变化，而不是立即变化。

英The svelte/motion module exports two functions, tweened and spring, for creating writable stores whose values change over time after set and update, rather than immediately.

tweenedpermalink

导出片段： svelte/motion#tweened

补间存储会在固定的持续时间内更新其值。 可以使用以下选项：

英Tweened stores update their values over a fixed duration. The following options are available:

• delay （number，默认 0） — 开始前的毫秒数
• duration（number） | function，默认 400) — 补间持续的毫秒数
• easing （function，默认 t => t） — 一个 缓动函数
• interpolate (function) — 见下文

store.set 和 store.update 可以接受第二个 options 参数，该参数将覆盖实例化时传入的选项。

英store.set and store.update can accept a second options argument that will override the options passed in upon instantiation.

这两个函数都会返回一个 Promise，该 Promise 在补间完成时解析。 如果补间被中断，则 promise 将永远不会解决。

英Both functions return a Promise that resolves when the tween completes. If the tween is interrupted, the promise will never resolve.

开箱即用，Svelte 将在两个数字、两个数组或两个对象之间进行插值（只要数组和对象的 'shape' 相同，并且它们的 'leaf' 属性也是数字）。

英Out of the box, Svelte will interpolate between two numbers, two arrays or two objects (as long as the arrays and objects are the same 'shape', and their 'leaf' properties are also numbers).

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

	const size = tweened(1, {
		duration: 300,
		easing: cubicOut
	});

	function handleClick() {
		// this is equivalent to size.update(n => n + 1)
		$size += 1;
	}
</script>

<button on:click={handleClick} style="transform: scale({$size}); transform-origin: 0 0">
	embiggen
</button>

如果初始值为 undefined 或 null，则第一次值更改将立即生效。 当你具有基于属性的补间值并且在组件首次渲染时不希望有任何运动时，这非常有用。

英If the initial value is undefined or null, the first value change will take effect immediately. This is useful when you have tweened values that are based on props, and don't want any motion when the component first renders.

ts
import { tweened } from 'svelte/motion';
import { cubicOut } from 'svelte/easing';

const size = tweened(undefined, {
	duration: 300,
	easing: cubicOut
});

$: $size = big ? 100 : 10;

interpolate 选项允许你在任意值之间进行补间。 它必须是 (a, b) => t => value 函数，其中 a 是起始值，b 是目标值，t 是 0 到 1 之间的数字，value 是结果。 例如，我们可以使用 d3-interpolate 包在两种颜色之间平滑插值。

英The interpolate option allows you to tween between any arbitrary values. It must be an (a, b) => t => value function, where a is the starting value, b is the target value, t is a number between 0 and 1, and value is the result. For example, we can use the d3-interpolate package to smoothly interpolate between two colours.

<script>
	import { interpolateLab } from 'd3-interpolate';
	import { tweened } from 'svelte/motion';

	const colors = ['rgb(255, 62, 0)', 'rgb(64, 179, 255)', 'rgb(103, 103, 120)'];

	const color = tweened(colors[0], {
		duration: 800,
		interpolate: interpolateLab
	});
</script>

{#each colors as c}
	<button style="background-color: {c}; color: white; border: none;" on:click={(e) => color.set(c)}>
		{c}
	</button>
{/each}

<h1 style="color: {$color}">{$color}</h1>

springpermalink

导出片段： svelte/motion#spring

spring 存储根据其 stiffness 和 damping 参数逐渐更改为其目标值。 tweened 存储在固定持续时间内改变其值，而 spring 存储在由其现有速度确定的持续时间内改变其值，从而在许多情况下允许看起来更自然的运动。 可以使用以下选项：

英A spring store gradually changes to its target value based on its stiffness and damping parameters. Whereas tweened stores change their values over a fixed duration, spring stores change over a duration that is determined by their existing velocity, allowing for more natural-seeming motion in many situations. The following options are available:

• stiffness （number，默认 0.15） — 0 到 1 之间的值，其中较高值表示 'tighter' 弹簧
• damping （number，默认 0.8） — 0 到 1 之间的值，其中较低表示 'springier' 弹簧
• precision （number，默认 0.01） — 确定弹簧被认为具有 'settled' 的阈值，其中越低意味着越精确

上述所有选项都可以在弹簧运动时更改，并且会立即生效。

英All of the options above can be changed while the spring is in motion, and will take immediate effect.

ts
import { spring } from 'svelte/motion';

const size = spring(100);
size.stiffness = 0.3;
size.damping = 0.4;
size.precision = 0.005;

与 tweened 存储一样，set 和 update 返回一个 Promise，如果春天稳定下来，该 Promise 就会解决。

英As with tweened stores, set and update return a Promise that resolves if the spring settles.

set 和 update 都可以接受第二个参数 — 具有 hard 或 soft 属性的对象。 { hard: true } 立即设定目标值； { soft: n } 在稳定前将现有动量保留 n 秒。 { soft: true } 相当于 { soft: 0.5 }。

英Both set and update can take a second argument — an object with hard or soft properties. { hard: true } sets the target value immediately; { soft: n } preserves existing momentum for n seconds before settling. { soft: true } is equivalent to { soft: 0.5 }.

ts
import { spring } from 'svelte/motion';

const coords = spring({ x: 50, y: 50 });
// updates the value immediately
coords.set({ x: 100, y: 200 }, { hard: true });
// preserves existing momentum for 1s
coords.update(
	(target_coords, coords) => {
		return { x: target_coords.x, y: coords.y };
	},
	{ soft: 1 }
);

请参阅 spring 教程的完整示例。

英See a full example on the spring tutorial.

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

	const coords = spring(
		{ x: 50, y: 50 },
		{
			stiffness: 0.1,
			damping: 0.25
		}
	);
</script>

如果初始值为 undefined 或 null，则第一个值更改将立即生效，就像 tweened 值一样（见上文）。

英If the initial value is undefined or null, the first value change will take effect immediately, just as with tweened values (see above).

ts
import { spring } from 'svelte/motion';

const size = spring();
$: $size = big ? 100 : 10;

类型(Types)permalink

类型： svelte/motion