两种颜色之间的苗条如何轻松？

【问题标题】：How can svelte ease between two colors?两种颜色之间的苗条如何轻松？
【发布时间】：2020-12-07 11:54:19
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

对此没有内置支持，您必须自己添加。 API docs 使用 d3-interpolate 向您展示了这个示例作为自定义 tweener

<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>

【讨论】：