svelte中的动画

动画是交互设计中重要的视觉元素，页面如果缺少了动画，会显得俨乎其然而变得生硬无趣，少了许多生机

页面上的动画并非越是花俏夺目就越好，主要都是一些偏线性的过渡效果，在操作与操作之间缓和过渡，避免生硬

svelte为我们内置了常见动画的简单实现

运动（motion）：元素的某个属性不同值的补间
过渡（transition）：元素离开和进入

运动效果

运动效果由svelte/motion模块支持，该模块导出两个函数tweened和spring

这两个函数都是创建一个writable（可写）的store

其中tweened函数主要用于补间动画，spring主要用于弹性动画

tweened补间动画

import { tweened } from "svelte/motion";
store = tweened(value, options)

value表示初始值
options为一个object，该对象可包含的属性
    delay：   number, 默认值：0，运动开始时的延时时间（单位毫秒）
    duration：number, 默认值：400，运动持续时间（单位毫秒）
    easing ：function，补间动画的缓动效果
        svelte为我们内置了多种效果函数
        由 svelte/easing 模块导出

svelte将自动在数字、日期以及仅包含数字和日期的数组和对象之间进行插值

创建的store在使用set或update时也可以传入options对象(作为第二个参数)来覆盖动画的设置

set 和 update 方法都返回一个Promise，当补间效果完成时，Promise将被resolve，如果补间中断，则promise将永远不会resolve

缓动效果

svelte内置了10种缓动效果，每种缓动效果又分为in，out和inout，分别表示缓动效果应用在动画开始、结束和开始以及结束

如cubic效果表示减速，则对应的有circIn、circOut和circInOut分别表示开始减速、结束减速、开始和结束都减速三种缓动效果

svelte/easing模块支持的缓动效果有：

back、   bounce、circ、cubic、
elastic、expo、  quad、quart、
quint、  sine

还有一个没有in、out和inout的特殊效果：linear
表示匀速变换

spring弹性动画

import { spring } from "svelte/motion";
store = spring(value, options)

value表示初始值
options为一个object，该对象可包含的属性
    stiffness ：number，默认0.15，0到1之间的值，数值越大刚度越大，类似于“更紧”的弹簧
    damping ：number，默认0.8，0到1之间的值，数值越小惯性越小
    precision ：number，默认0.01，确定弹簧被视为已“稳定”的阈值，越低意味着越精确

spring基于其参数改变值，动画时间无法控制，动画效果会更加自然

tweened则是将动画时间固定后在固定的时间内改变值

过渡效果

过渡效果是表示在元素进入或离开时的一个渐变效果

svelte中通过 svelte/transition 模块导入已经设置好的过渡效果

svelte内置了7中过渡效果：

fade（淡入淡出）
blur（模糊）
fly（移动）
slide（滑动）
scale（伸缩）
draw（绘制）
crossfade

过渡效果分为进入时的过渡和离开时的过渡，通过属性指令来控制

transition:效果  表示进入和离开时均应用
in:效果          表示仅进入时应用
out:效果         表示仅离开时应用

每个过渡效果可以通过传入一个object对象来控制过渡动画，不传入对象表示使用默认值

{#if condition}
<p transition:fade>使用默认值设置过渡动画</p>
<p transition:fade={object}>使用指定属性设置过渡动画</p>
{/if}

fade（淡入淡出）可用属性

delay：number，默认0，动画启动延时的毫秒数
duration：number，默认400，动画持续的毫秒数
easing：function，默认linear，缓动效果

blur（模糊）可用属性

delay、duration、easing(默认cubicInOut)
opacity：number，默认0，不透明度（取值0-1）
amount：number|string, 默认5，模糊范围，支持CSS单元，为数字时单位为px

fly（移动）可用属性

delay、duration、easing(默认cubicInOut)、opacity
x ：number, 默认0，x轴方向偏移量
y ：number, 默认0，y轴方向偏移量

slide（滑动）可用属性

delay、duration、easing(默认cubicInOut)
axis：x|y，默认y，滑动的轴

scale（伸缩）可用属性

delay、duration、easing(默认cubicInOut)、opacity
start：number, 默认0，伸缩比例（取值0-1）

draw（绘制）可用属性

对SVG标签进行路径绘制动画，就像贪吃蛇一样
delay、duration(默认800)、easing(默认cubicInOut)
speed：number, 默认undefined，动画速度的倍率，相对于duration