Svelte Spring

2023-02-21 17:31 更新

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>

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


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号