From f350e6a636df2d1c8dda5c4f2b4e7a5c8501b025 Mon Sep 17 00:00:00 2001 From: tanhauhau Date: Sat, 16 Apr 2022 11:21:35 +0800 Subject: [PATCH] add more examples on the spring store API docs --- site/content/docs/03-run-time.md | 21 ++++++++++++++++++- .../tutorial/09-motion/02-spring/text.md | 4 +++- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md index c6423f408c..86fc629198 100644 --- a/site/content/docs/03-run-time.md +++ b/site/content/docs/03-run-time.md @@ -558,10 +558,29 @@ A `spring` store gradually changes to its target value based on its `stiffness` --- -As with [`tweened`](/docs#run-time-svelte-motion-tweened) stores, `set` and `update` return a Promise that resolves if the spring settles. The `store.stiffness` and `store.damping` properties can be changed while the spring is in motion, and will take immediate effect. +The `store.stiffness`, `store.damping` and `store.precision` properties can be changed while the spring is in motion, and will take immediate effect. + +```js +const size = spring(100); +size.stiffness = 0.3; +size.damping = 0.4; +size.precision = 0.005; +``` + +--- + +As with [`tweened`](/docs#run-time-svelte-motion-tweened) stores, `set` and `update` return a Promise that resolves if the spring settles. Both `set` and `update` can take a second argument — an object with `hard` or `soft` properties. `{ hard: true }` sets the target value immediately; `{ soft: n }` preserves existing momentum for `n` seconds before settling. `{ soft: true }` is equivalent to `{ soft: 0.5 }`. +```js +const coords = spring({ x: 50, y: 50 }); +// updates the value immediately +coords.set({ x: 100, y: 200 }, { hard: true }); +// preserves existing momentum for 1s +coords.update((target_coords, coords) => { return { x: target_coords.x, y: coords.y }; }, { soft: 1 }); +``` + [See a full example on the spring tutorial.](/tutorial/spring) ```sv diff --git a/site/content/tutorial/09-motion/02-spring/text.md b/site/content/tutorial/09-motion/02-spring/text.md index 6d99e1b8c4..1b2bdfa376 100644 --- a/site/content/tutorial/09-motion/02-spring/text.md +++ b/site/content/tutorial/09-motion/02-spring/text.md @@ -24,4 +24,6 @@ let coords = spring({ x: 50, y: 50 }, { }); ``` -Waggle your mouse around, and try dragging the sliders to get a feel for how they affect the spring's behaviour. Notice that you can adjust the values while the spring is still in motion. \ No newline at end of file +Waggle your mouse around, and try dragging the sliders to get a feel for how they affect the spring's behaviour. Notice that you can adjust the values while the spring is still in motion. + +Consult the [API reference](/docs#run-time-svelte-motion-spring) for more information.