如何获取Svelte中tweened动画的运行状态以动态修改样式？

当然可以实现这个需求，不需要手动检测值变化或定时，核心是利用tweened的set方法返回的Promise来跟踪动画状态，结合动态类名就能切换样式。

完整示例代码 #

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

  // 标记动画是否正在运行
  let isTweening = false;
  // 初始化进度条tweened store
  const progress = tweened(0, {
    duration: 400,
    easing: cubicOut
  });

  // 触发动画的函数（示例：点击按钮触发）
  async function startProgressAnimation() {
    isTweening = true;
    // set方法返回Promise，动画结束时会resolve
    await progress.set(100);
    isTweening = false;
  }

  // 如果需要组件挂载时自动触发动画
  onMount(async () => {
    isTweening = true;
    await progress.set(100);
    isTweening = false;
  });
</script>

<!-- 进度条元素，用动态类名切换颜色 -->
<div 
  class="progress-bar" 
  class:animating={isTweening}
  style="width: {$progress}%"
></div>

<style>
  .progress-bar {
    height: 24px;
    background-color: blue;
    border-radius: 4px;
    /* 禁用默认过渡，避免和tweened动画冲突 */
    transition: none;
  }

  .animating {
    background-color: red;
  }
</style>

关键逻辑说明 #

1. 跟踪动画状态：progress.set()方法会返回一个Promise，当动画完全结束时这个Promise才会resolve。我们通过await这个Promise，就能精准控制isTweening的切换时机，完全不需要手动设置定时器。
2. 动态类名：利用Svelte的class:类名={条件}语法，当isTweening为true时，自动给进度条加上animating类，切换为红色；动画结束后isTweening变为false，类名移除，恢复蓝色。

这种方式完全依赖tweened自身的动画生命周期，不会出现定时误差，是最可靠的实现方式。

内容的提问来源于stack exchange，提问作者Timbolt