SveletJs学习——运动动画介绍1. 渐变动画效果 Tweened2. 弹簧动画效果 Spring

321 阅读 0 评论 212 点赞

我是靠谱客的博主现实睫毛膏，这篇文章主要介绍SveletJs学习——运动动画介绍1. 渐变动画效果 Tweened2. 弹簧动画效果 Spring，现在分享给大家，希望可以做个参考。

介绍

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

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

1. 渐变动画效果 Tweened

1.1 示例

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
import { writable } from "svelte/store";
const progress = writable(0)
</script>
<main>
<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>
</main>
<style>
progress {
display: block;
width: 100%;
}
</style>

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

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

复制代码

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

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

复制代码

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

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

复制代码

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

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

复制代码

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

2. 弹簧动画效果 Spring

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

2.1 示例

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

复制代码

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
<script>
import { writable } from 'svelte/store'
let coords = writable({ x: 50, y: 50}); // 红点坐标初始位置
let size = writable(10); // 红点初始尺寸
</script>
<main>
<div style="position: absolute; right: 1em;">
<label for="">
<h3>stiffness ({coords.stiffness})</h3>
<input type="range" bind:value={coords.stiffness} min="0" max="1" step="0.01">
</label>
<label for="">
<h3>damping ({ coords.damping })</h3>
<input type="range" min="0" max="1" step="0.01" bind:value={coords.damping}>
</label>
</div>
<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}></circle>
</svg>
</main>
<style>
svg { width: 100%; height: 500px; margin: -8px; }
circle { fill: #ff3e00 }
</style>

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

复制代码

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