介绍

设置值并且查看DOM自动更新这个过程非常酷，渐变这些值，在svelte中有一些工具，可以帮助您构建使用动画来传达流畅的用户界面

svelte/motion模块导出两个函数： tweened 和 spring。用于创建writable（可写）store，其值会在set 和 update之后更新，而不是立即更新。

1. 渐变动画效果 Tweened

1.1 示例

当我们在进度条发生变化的时候，可以设置对应的进度值，展示当前的完成度，代码如下：

	
	0%
	25%
	50%
	75%
	100%


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

从实现效果中我们可以发现，当点击对应进度的时候这个效果非常生硬，值直接变成了对应的值，我们想要一个平滑的动画效果，还需要对内容进行完善。此时我们可以从svelte/motion中引入一个动画效果tweened。

此时我们可以修改一下进度定义progress方式：

	import { tweened } from 'svelte/motion'
	const progress = tweened(0, {
		duration: 400
	})
1
2
3
4

这时我们会发现进度条到对应位置时，是平滑过去的，此时我们可以对实现的动画效果类型进行定义

	import { tweened } from 'svelte/motion'
	import { cubicOut } from 'svelte/easing'
	const progress = tweened(0, {
		duration: 400,
		easing: cubicOut
	})
1
2
3
4
5
6

1.2 参数含义tweened(value: any, options)

const progress = tweened(0, {
	duration: 400,
	easing: cubicOut
})
0表示进度初始值，后面的对象内容表示动画相关的配置信息
1
2
3
4
5

• delay: 在渐变动画开始时有多少延迟等待时间
• duration: 动画持续时间
• easing: 函数，缓动样式，多种样式可在svelte/easing'包中选择
• interpolate： 函数

import { interpolateLab } from 'd3-interpolate';  	
const color = tweened(colors[0], {
	duration: 800,
	interpolate: interpolateLab
});
1
2
3
4
5

2. 弹簧动画效果 Spring

弹簧函数是补间动画的另一种选择，它通常对频繁变化的值更有效。

2.1 示例

以下动画效果为：有一个红色的圆点，在鼠标在对应区域移动时，红点会跟随鼠标一起动

	

		
			
stiffness ({coords.stiffness})
			
		

		
			
damping ({ coords.damping })
			
		
	
	


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

上述动画效果我们在执行时会发现，右侧的两个功能栏没有用上，修改一下代码让功能栏可以进行配置

	import { spring } from 'svelte/motion';
	let coords = spring({x: 50, y: 50}, {
		stiffness: 0.1, // 控制弹簧速度，值越大，弹簧效果越明显
		damping: 0.25 // 控制弹簧摇摆幅度，值越小，摇摆效果越明显
	})
	let size = spring(10)
1
2
3
4
5
6

2.2 参数含义 spring(value: any, options)

• value: 初始默认位置
• options：动画效果配置

spring（弹性） store通过stiffness和 damping参数逐步变更到目标值，而tweenedstore在改变一个固定时间变更其值。store在由它们现有速度决定的持续时间长短，从而实现更自然的运动效果。

• stifness(number, 默认值 0.15) - 取值范围0~1，数值越大效果越生硬(例：灵敏度，数值越大，灵敏性越强)
• damping(number, 默认值 0.8) - 取值范围0~1，数值越小阻尼越小(例：惯性，数值越小惯性越大)
• precision(numer, 默认值 0.001) - 粒度。用于控制上面两个参数的运动幅度大小

官方文档
如果有用，点个赞呗~

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~