· SvelteSpring_Svelte

Svelte Spring

spring 函数是 tweened 的替代方法，对于经常变化的值通常效果更好。在这个例子中，我们有两个 stores——一个代表圆的坐标，一个代表它的大小。让我们将它们转换为 springs：<script>

import { spring } from 'svelte/motion';

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

</script>两个 springs 都有默认的 stiffness和 damping，它们控制 spring 的…… springiness。我们可以指定我们自己的初始值：let coords = spring({ x: 50, y: 50 }, {

stiffness: 0.1,

damping: 0.25

});左右摇动鼠标，并尝试拖动滑块以了解它们如何影响 spring 的行为。请注意，您可以在 spring 仍在运动时调整这些值。示例代码App.svelte<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% }

circle { fill: #ff3e00 }

</style>

<label>

<h3>stiffness ({coords.stiffness})</h3>

</label>

&lt;label&gt;
    &lt;h3&gt;damping ({coords.damping})&lt;/h3&gt;
    &lt;input bind:value={coords.damping} type="range" min="0" max="1" step="0.01"&gt;&lt;/label&gt;

</div>

<svg

on:mousemove="{e => coords.set({ x: e.clientX, y: e.clientY })}"

on:mousedown="{() => size.set(30)}"

on:mouseup="{() => size.set(10)}"

</svg>