Skip to main content

Функция spring является альтернативой tweened, которую обычно лучше использовать для часто изменяющихся значений.

В этом примере у нас есть два хранилища — одно содержит координаты круга, а другое — его размер. Давайте заменим их на функции spring:

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

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

Обе функции имеют значения по умолчанию — жёсткость stiffness и затухание damping, которые управляют пружинностью колебаний. Мы можем указать любые начальные значения:

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

Повозите мышкой и попробуйте подвигать ползунки, чтобы почувствовать, как они влияют на поведение преобразований функции spring. Обратите внимание, что вы можете регулировать эти значения даже в процессе анимации.

Подробнее по ссылке API.