面试题：Svelte的animate函数实现复杂动画过渡效果

Question

假设你要实现一个元素从页面左上角移动到右下角，同时大小逐渐缩小且透明度降低的动画效果，使用Svelte的animate函数来完成这个需求，写出完整的Svelte组件代码。

Answer 1

<script>
    import { animate } from'svelte/animate';
    let style = {
        transform: 'translate(0, 0) scale(1)',
        opacity: 1
    };
    const start = {
        transform: 'translate(0, 0) scale(1)',
        opacity: 1
    };
    const end = {
        transform: 'translate(100%, 100%) scale(0.5)',
        opacity: 0.5
    };
    const options = {
        duration: 2000,
        easing: 'ease-in-out'
    };
    function startAnimation() {
        animate(style, end, options).then(() => {
            // 动画结束后的操作
        });
    }
</script>

<button on:click={startAnimation}>开始动画</button>

<div style={style}>要移动和变化的元素</div>