Skip to main content

Hàm spring là một lựa chọn thay thế cho tweened mà thường hoạt động tốt hơn cho các giá trị thay đổi thường xuyên.

Trong ví dụ này, chúng ta có hai stores — một đại diện cho tọa độ của hình tròn, và một đại diện cho kích thước của nó. Hãy chuyển chúng thành springs:

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

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

Cả hai spring đều có giá trị mặc định stiffness và damping, điều này kiểm soát độ mượt mà của spring. Chúng ta có thể chỉ định giá trị ban đầu của chúng:

App.svelte
let coords = spring({ x: 50, y: 50 }, {
	stiffness: 0.1,
	damping: 0.25
});

Vung chuột của bạn xung quanh và thử kéo các thanh trượt để cảm nhận cách chúng ảnh hưởng đến hành vi của spring. Lưu ý, bạn có thể điều chỉnh các giá trị trong khi spring vẫn đang chuyển động.

Tiếp theo: Transitions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<script>
	import { writable } from 'svelte/store';
 
	let coords = writable({ x: 50, y: 50 });
	let size = writable(10);
</script>
 
<svg
	on:mousemove={(e) => {
		coords.set({ x: e.clientX, y: e.clientY });
	}}
	on:mousedown={() => size.set(30)}
	on:mouseup={() => size.set(10)}
	role="presentation"
>
	<circle
		cx={$coords.x}
		cy={$coords.y}
		r={$size}
	/>
</svg>
 
<div class="controls">
	<label>
		<h3>stiffness ({coords.stiffness})</h3>
		<input
			bind:value={coords.stiffness}
			type="range"
			min="0.01"
			max="1"
			step="0.01"
		/>
	</label>
 
	<label>
		<h3>damping ({coords.damping})</h3>
		<input
			bind:value={coords.damping}
			type="range"
			min="0.01"
			max="1"
			step="0.01"
		/>
	</label>
</div>
 
<style>
	svg {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}
 
	circle {
		fill: #ff3e00;
	}
 
	.controls {
		position: absolute;
		top: 1em;
		right: 1em;
		width: 200px;
		user-select: none;
	}
 
	.controls input {
		width: 100%;
	}
</style>
initialising