SvelteTweened

Svelte Tweened

设置数值并观察DOM的自动更新是很酷的。知道更酷的是什么吗?变化这些值。Svelte包括一些工具,可以帮助你建立灵活的用户界面,使用动画来传达变化。让我们先把 ​progress​存储改成一个​Tweened​值。<script>

import { tweened } from 'svelte/motion';

const progress = tweened(0);

</script>单击这些按钮会使进度条以动画方式显示其新值。虽然它有点机械化并且不令人满意。我们需要添加一个easing(缓动)函数:<script>

import { tweened } from 'svelte/motion';

import { cubicOut } from 'svelte/easing';

const progress = tweened(0, {

duration: 400,

easing: cubicOut

});

</script>svelte/easing​ 模块包含 Penner 缓动方程,或者您可以提供自己的 ​p => t​ 函数,其中 ​p​ 和 ​t​ 都是介于 0 和 1 之间的值。可用于​tweened​的全部选项。​delay​ — tween 开始前的毫秒数​duration​ — 以毫秒为单位的 tween 持续时间,或者一个​(from,to)=> milliseconds​的函数,允许你(例如)为更大的值变化指定更长的 tweens。​easing​ — 一个 ​p => t​ 函数​interpolate​ — 一个自定义 ​(from, to) => t => value​ 用于在任意值之间进行插值的函数。默认情况下,Svelte 将在数字、日期和形状相同的数组和对象之间进行插值(只要它们只包含数字和日期或其他有效的数组和对象)。如果要插入(例如)颜色字符串或转换矩阵,请提供自定义插值器您还可以将这些选项作为第二个参数传递给 ​progress.set​ 和 ​progress.update​,在这种情况下它们将覆盖默认值。 ​set​ 和 ​update​ 方法都返回一个在 tween 完成时解析的 promise。示例代码App.svelte<script>

import { writable } from 'svelte/store';

const progress = writable(0);

</script>

<style>

progress {

display: block;

width: 100%;

}

</style>

<progress value={$progress}></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>