![](https://img.haomeiwen.com/i21032798/97a1c9fd3bf644e6.png)
Now that we've covered the basics, it's time to learn some advanced Svelte techniques, starting with motion.
The svelte/motion
module exports two functions, tweened
and spring
, for creating writable stores whose values change over time after set
and update
, rather than immediately.
Tweens
Setting values and watching the DOM update automatically is cool. Know what's even cooler? Tweening those values. Svelte includes tools to help you build slick user interfaces that use animation to communicate changes.
<script>
import { tweened } from 'svelte/motion';
import { cubicOut } from 'svelte/easing';
const progress = tweened(0, {
duration: 400,
easing: cubicOut
});
</script>
<progress value={$progress} />
<button on:click={() => progress.set(0)}>
0%
</button>
<button on:click={() => progress.set(0.25)}>
25%
</button>
<button on:click={() => progress.set(0.5)}>
50%
</button>
<button on:click={() => progress.set(0.75)}>
75%
</button>
<button on:click={() => progress.set(1)}>
100%
</button>
<style>
progress {
display: block;
width: 100%;
}
</style>
The full set of options available to tweened
:
-
delay
— milliseconds before the tween starts -
duration
— either the duration of the tween in milliseconds, or a(from, to) => milliseconds
function allowing you to (e.g.) specify longer tweens for larger changes in value -
easing
— ap => t
function -
interpolate
— a custom(from, to) => t => value
function for interpolating between arbitrary values. By default, Svelte will interpolate between numbers, dates, and identically-shaped arrays and objects (as long as they only contain numbers and dates or other valid arrays and objects). If you want to interpolate (for example) colour strings or transformation matrices, supply a custom interpolator
You can also pass these options to progress.set
and progress.update
as a second argument, in which case they will override the defaults. The set
and update
methods both return a promise that resolves when the tween completes.
Spring
The spring
function is an alternative to tweened
that often works better for values that are frequently changing.
<script>
import { spring } from 'svelte/motion';
let coords = spring({ x: 50, y: 50 }, {
stiffness: 0.1,
damping: 0.25
});
let size = spring(10);
</script>
<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>
<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>
网友评论