Svelte Tweened

2023-02-21 17:02 更新

设置数值并观察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>


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号