缓动函数指定了随时间变化的速率,并且在使用 Svelte 的内置过渡和动画以及 tweened 和 spring 实用程序时非常有用。svelte/easing 包含了 31 个命名导出,一个 linear 缓动和 10 种不同缓动函数的 3 个变体:inoutinOut

    你可以在 examples sectionease visualiser 中探索各种缓动效果。

    缓动类型 in out inOut
    back backIn backOut backInOut
    bounce bounceIn bounceOut bounceInOut
    circ circIn circOut circInOut
    cubic cubicIn cubicOut cubicInOut
    elastic elasticIn elasticOut elasticInOut
    expo expoIn expoOut expoInOut
    quad quadIn quadOut quadInOut
    quart quartIn quartOut quartInOut
    quint quintIn quintOut quintInOut
    sine sineIn sineOut sineInOut

    缓动函数通常用于定义动画的速度曲线,使动画看起来更自然或符合特定的设计美学。例如,ease-in 函数通常在动画开始时慢,然后加快;ease-out 函数则在动画结束时慢;而 ease-in-out 函数在动画开始和结束时慢,中间加快。

    Svelte 允许你通过导入相应的函数来使用这些缓动函数,例如:

    1. import { cubicIn } from 'svelte/easing';

    然后,你可以将这些函数作为参数传递给 Svelte 的动画和过渡,以控制它们的动画效果。