svelte/motion模块导出两个函数： tweened 和 spring。
用于创建writable（可写）store，其值会在set 和 update之后更新，而不是立即更新。
（人话：用 svelte 提供的tweened 和 spring可以达成流程变化的动画效果）

1、tweened — 渐变动画效果

参数

tweened(value: any, options)

• delay: 在渐变动画开始时有多少延迟等待时间，单位毫秒
• duration: 动画持续时间
• easing: 函数，缓动样式，多种样式可在svelte/easing’包中选择
• interpolate： 函数。用于在任意值之间插值的自定义（from，to）=>t=>值函数。默认情况下，Svelte将在数字、日期和形状相同的数组和对象之间进行插值（只要它们只包含数字和日期或其他有效数组和对象）。如果你想插值（例如）颜色串或变换矩阵，请提供一个自定义插值器
  

示例

• 匀速地滑

	import { tweened } from 'svelte/motion'
	const progress = tweened(0, {
		duration: 400
	})

• 自定义速度地滑

	import { tweened } from 'svelte/motion'
	import { cubicOut } from 'svelte/easing'
	const progress = tweened(0, {
		duration: 400,
		easing: cubicOut
	})

2、spring — 用于频繁变化的值

官方提供了一个跟随鼠标移动的红点，修改移动的动画，让移动不那么生硬
关键代码

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

	let coords = spring({ x: 50, y: 50 });
	let size = spring(10);
</script>

示例完整代码
就像是控制鼠标操作的灵敏度一样

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

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

<style>
	svg { width: 100%; height: 100%; margin: -8px; }
	circle { fill: #ff3e00 }
</style>

<div style="position: absolute; right: 1em;">
	<label>
		<h3>stiffness ({coords.stiffness})</h3>
		<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01">
	</label>

	<label>
		<h3>damping ({coords.damping})</h3>
		<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01">
	</label>
</div>

<svg
	on:mousemove="{e => coords.set({ x: e.clientX, y: e.clientY })}"
	on:mousedown="{() => size.set(30)}"
	on:mouseup="{() => size.set(10)}"
>
	<circle cx={$coords.x} cy={$coords.y} r={$size}/>
</svg>