两种颜色之间如何游刃有余？

Question

svelte 是否内置支持两种颜色之间的 tweening/easing，还是我应该为此编写自己的插值函数？

我想要一个 div 来改变背景颜色，我可以提供任何方式的 CSS 颜色。

Answer 1

没有内置支持，您必须自己添加。然而，API docs 将此示例准确地显示为使用 d3-interpolate

的自定义补间

<script>
    import { interpolateLab } from 'd3-interpolate';
    import { tweened } from 'svelte/motion';

    const colors = [
        'rgb(255, 62, 0)',
        'rgb(64, 179, 255)',
        'rgb(103, 103, 120)'
    ];

    const color = tweened(colors[0], {
        duration: 800,
        interpolate: interpolateLab
    });
</script>

{#each colors as c}
    <button
        style="background-color: {c}; color: white; border: none;"
        on:click="{e => color.set(c)}"
    >{c}</button>
{/each}

<h1 style="color: {$color}">{$color}</h1>

两种颜色之间如何游刃有余？

How can svelte ease between two colors?

tween

svelte