面试题：Svelte自定义动画的时间函数应用

Question

在Svelte应用中，有一组列表项，每个列表项都有一个自定义的滑入动画。要求使用不同的时间函数（如ease - in、ease - out、ease - in - out）来控制不同列表项的动画速度曲线，阐述实现思路并给出核心代码示例。

Answer 1

实现思路

1. 在Svelte组件中定义列表数据。
2. 为每个列表项分配不同的时间函数。这可以通过在数据中为每个项添加一个表示时间函数的属性来实现。
3. 使用Svelte的transition功能来应用动画，在transition中指定每个列表项对应的时间函数。

核心代码示例

<script>
    const items = [
        { name: 'Item 1', timingFunction: 'ease - in' },
        { name: 'Item 2', timingFunction: 'ease - out' },
        { name: 'Item 3', timingFunction: 'ease - in - out' }
    ];

    function slideIn(node, { delay = 0, duration = 400, timingFunction }) {
        const style = getComputedStyle(node);
        const opacity = +style.opacity;
        const x = +style.transform.slice(12, -1);

        return {
            delay,
            duration,
            css: t => `
                opacity: ${t * opacity};
                transform: translateX(${t * x}px);
                transition - timing - function: ${timingFunction};
            `
        };
    }
</script>

{#each items as item}
    <div transition:slideIn={{ delay: 100, duration: 500, timingFunction: item.timingFunction }}>{item.name}</div>
{/each}

上述代码首先定义了包含列表项数据的数组items，每个项都有一个名称和对应的时间函数。然后定义了slideIn函数，用于创建自定义过渡动画。在each块中，每个div元素都应用了slideIn过渡动画，并传入了对应项的时间函数。