Spring 类是 Tween 的替代品，通常更适合经常变化的值。

¥The Spring class is an alternative to Tween that often works better for values that are frequently changing.

在这个例子中，我们有一个跟随鼠标的圆圈，以及两个值 — 圆圈的坐标和它的大小。让我们将它们转换为弹簧：

¥In this example we have a circle that follows the mouse, and two values — the circle’s coordinates, and its size. Let’s convert them to springs:

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

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

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

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

与 Tween 一样，spring 具有可写的 target 属性和只读的 current 属性。更新事件处理程序...

¥As with Tween, springs have a writable target property and a readonly current property. Update the event handlers...

<svg
	onmousemove={(e) => {
		coords.target = { x: e.clientX, y: e.clientY };
	}}
	onmousedown={() => (size.target = 30)}
	onmouseup={() => (size.target = 10)}
	role="presentation"
>

...和 ​​<circle> 属性：

¥...and the <circle> attributes:

<circle
	cx={coords.current.x}
	cy={coords.current.y}
	r={size.current}
></circle>

两个 spring 都有默认的 stiffness 和 damping 值，它们控制着 spring 的……弹性。我们可以指定自己的初始值：

¥Both springs have default stiffness and damping values, which control the spring’s, well... springiness. We can specify our own initial values:

let coords = new Spring({ x: 50, y: 50 }, {
	stiffness: 0.1,
	damping: 0.25
});

摇动鼠标，并尝试拖动滑块以了解它们如何影响弹簧的行为。请注意，你可以在弹簧仍在运动时调整值。

¥Waggle your mouse around, and try dragging the sliders to get a feel for how they affect the spring’s behaviour. Notice that you can adjust the values while the spring is still in motion.