面试题：Svelte动画最佳实践：自定义动画与交互性设计

Question

要求在Svelte中创建一个高度交互的动画组件，该组件需要实现以下功能：用户可以通过鼠标拖拽来改变动画的某个参数（如动画的速度或幅度），并且在不同的状态下（如鼠标悬停、按下等），动画呈现出不同的视觉效果。请阐述实现思路，包括如何设计组件结构、处理交互事件以及编写动画逻辑，同时给出关键代码片段。

Answer 1

实现思路

1. 组件结构设计：
   • 外层包裹一个容器元素，用于承载动画展示区域。
   • 在组件内定义用于存储动画参数（如速度、幅度）的变量。
2. 处理交互事件：
   • 鼠标拖拽：利用mousedown、mousemove和mouseup事件。mousedown记录初始位置和动画参数初始值，mousemove根据鼠标移动距离更新动画参数，mouseup停止参数更新。
   • 鼠标悬停：使用mouseenter和mouseleave事件，在悬停时修改动画的视觉效果参数（如颜色、透明度等）。
   • 鼠标按下：通过mousedown和mouseup事件，按下时改变动画的另一组视觉效果参数。
3. 编写动画逻辑：
   • 使用Svelte的transition或animate功能来实现动画效果。根据不同的状态和参数值，调整动画的过渡效果。

关键代码片段

<script>
    let speed = 1; // 动画速度初始值
    let amplitude = 50; // 动画幅度初始值
    let isDragging = false;
    let initialX;
    let initialSpeed;

    const handleMouseDown = (e) => {
        isDragging = true;
        initialX = e.clientX;
        initialSpeed = speed;
    };

    const handleMouseMove = (e) => {
        if (isDragging) {
            const dx = e.clientX - initialX;
            speed = initialSpeed + dx * 0.1; // 根据鼠标移动调整速度
        }
    };

    const handleMouseUp = () => {
        isDragging = false;
    };

    let hovered = false;
    let pressed = false;
</script>

<div
    on:mousedown={handleMouseDown}
    on:mousemove={handleMouseMove}
    on:mouseup={handleMouseUp}
    on:mouseenter={() => hovered = true}
    on:mouseleave={() => hovered = false}
    on:mousedown={() => pressed = true}
    on:mouseup={() => pressed = false}
    style="width: 200px; height: 200px; background-color: {hovered? 'lightblue' : 'gray'};
           transform: translateX({pressed? '50px' : '0px'}) scale({amplitude / 50});
           animation: move {1 / speed}s linear infinite;"
>
    <!-- 动画展示区域 -->
</div>

<style>
    @keyframes move {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(100px);
        }
    }
</style>