SvelteSpring

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>

<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>

&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)}"

>

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

</svg>