svelte - 5. 动画

动画函数

函数	作用	使用场景示例	引入的模块	使用示例
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 — 用于频繁变化的值

官方提供了一个跟