动画函数
函数 | 作用 | 使用场景示例 | 引入的模块 | 使用示例 |
---|---|---|---|---|
tweened | 运动动画,做到渐变的效果 | 控制进度条速度 | svelte/motion | 函数:tweened(0, { duration: 400 }) |
spring | 运动动画,用于频繁变化的值 | 控制鼠标红点顺滑度 | svelte/motion | 函数:spring({ x: 50, y: 50 }, { stiffness: 0.1, damping: 0.25 }) |
fade | 过渡动画 | 文字缓慢消失 | svelte/transition | 元素中使用:transition:fade |
transition: fly | 飞出飞入动画(可逆) | 文字从上到下消失,从下到上出现 | svelte/transition | 元素中使用:transition:fly="{
{ y: 200, duration: 2000 }}" |
transition: fly | 飞出飞入动画(可逆) | 文字从上到下消失,从下到上出现 | svelte/transition | 元素中使用:in:fly="{
{ y: 200, duration: 2000 }}" |
1、tweened — 渐变动画效果
参数
tweened(value: any, options)
delay
: 在渐变动画开始时有多少延迟等待时间,单位毫秒duration
: 动画持续时间easing
: 函数,缓动样式,多种样式可在svelte/easing’包中选择interpolate
: 函数。用于在任意值之间插值的自定义(from,to)=>t=>值函数。默认情况下,Svelte将在数字、日期和形状相同的数组和对象之间进行插值(只要它们只包含数字和日期或其他有效数组和对象)。如果你想插值(例如)颜色串或变换矩阵,请提供一个自定义插值器
示例
- 匀速地滑
import {
tweened } from 'svelte/motion'
const progress = tweened(0, {
duration: 400
})
- 自定义速度地滑
import {
tweened } from 'svelte/motion'
import {
cubicOut } from 'svelte/easing'
const progress = tweened(0, {
duration: 400,
easing: cubicOut
})
2、spring — 用于频繁变化的值
官方提供了一个跟