面试题：Svelte 中如何创建一个简单的自定义动画并应用到元素上

Question

在 Svelte 项目中，假设你有一个按钮元素，要求通过自定义动画，在按钮被点击时，使其从初始位置平滑移动到页面的另一个位置。请描述实现这一效果的主要步骤，并给出关键代码片段。

Answer 1

主要步骤

1. 定义按钮及目标位置：在 Svelte 组件中定义按钮元素，并确定按钮点击后要移动到的目标位置。可以通过 CSS 的 top 和 left 等属性来确定位置，也可以使用更现代的 transform 属性的 translate 方法。
2. 创建动画状态变量：在组件脚本部分，创建一个变量来跟踪按钮是否被点击，从而决定是否触发动画。
3. 编写动画逻辑：使用 Svelte 的 transition 功能来定义动画效果。可以使用内置的 tweened 过渡（需要从 svelte/motion 导入）来实现平滑过渡。
4. 应用动画到按钮：将动画逻辑应用到按钮元素上，当按钮点击时，触发动画。

关键代码片段

<script>
    import { tweened } from'svelte/motion';

    // 定义按钮是否被点击的状态
    let isClicked = false; 

    // 定义目标位置，这里假设是 (200, 200)
    const targetX = tweened(0, { duration: 500 }); 
    const targetY = tweened(0, { duration: 500 }); 

    function handleClick() {
        isClicked = true;
        targetX.set(200);
        targetY.set(200);
    }
</script>

<button
    on:click={handleClick}
    style:transform={`translate(${$targetX}px, ${$targetY}px)`}
>
    Click me
</button>

在上述代码中：

• 从 svelte/motion 导入 tweened 用于创建平滑过渡的动画。
• isClicked 变量用于跟踪按钮点击状态。
• targetX 和 targetY 是 tweened 变量，初始值为 0，设置了 500 毫秒的过渡时间。
• handleClick 函数在按钮点击时被调用，设置 isClicked 为 true，并将 targetX 和 targetY 设置为目标位置。
• 按钮的 style 属性使用 transform 来根据 targetX 和 targetY 的值移动按钮，$targetX 和 $targetY 是访问 tweened 变量当前值的语法。