如何使用Konva Tweens实现弹跳、光速类自定义动画？

结合你已有的基础动画代码，下面分别给出两种效果的具体实现方案：

1. 弹跳（Bounce）动画 #

弹跳效果的核心是利用弹性缓动函数配合位置偏移，模拟物体落地回弹的物理效果：

方案1：使用Konva内置缓动 #

Konva自带现成的弹跳缓动函数，搭配初始位置偏移就能快速实现：

// 先把元素移到目标位置上方（比如200px处），模拟从高处落下
kvNode.y(y - 200);

const bounceTween = createTween({
  node: kvNode,
  y: y, // 最终落到目标Y坐标
  duration: config.enter_duration / 1000,
  easing: Konva.Easings.BounceOut, // 落地时回弹的缓动，BounceIn是进入前弹跳
  onFinish: function () {
    if (!config.enter_direction) {
      bounceTween.reset();
    }
  },
});
bounceTween.play();

方案2：自定义弹跳逻辑（更灵活） #

如果需要调整弹跳次数、幅度，可以自己编写缓动函数：

// 自定义缓动：控制弹跳次数（bounceTimes）和衰减程度（decay）
const customBounce = (t) => {
  const bounceTimes = 3; // 弹跳次数
  const decay = 0.15; // 弹跳衰减系数，值越大衰减越快
  return 1 - Math.pow(Math.cos(t * Math.PI * bounceTimes), 2) * Math.exp(-t * decay);
};

// 应用自定义缓动
kvNode.y(y - 200);
const bounceTween = createTween({
  node: kvNode,
  y: y,
  duration: config.enter_duration / 1000,
  easing: customBounce,
  onFinish: function () {
    if (!config.enter_direction) {
      bounceTween.reset();
    }
  },
});
bounceTween.play();

2. 光速（Lightspeed）动画 #

光速效果是快速位置移动 + 透明度/缩放变化的组合，模拟高速切入的视觉感：

// 初始状态：元素在目标位置右侧300px处，透明且略微缩小
kvNode.x(x + 300);
kvNode.opacity(0);
kvNode.scaleX(0.8);
kvNode.scaleY(0.8);

const lightspeedTween = createTween({
  node: kvNode,
  x: x, // 移动到目标X坐标
  opacity: 1, // 渐显
  scaleX: 1, // 恢复原尺寸
  scaleY: 1,
  duration: config.enter_duration / 1000,
  easing: Konva.Easings.EaseOutExpo, // 先快后慢的缓动，模拟光速切入后的减速
  onFinish: function () {
    if (!config.enter_direction) {
      lightspeedTween.reset();
    }
  },
});
lightspeedTween.play();

关键技巧说明 #

• 多属性同时动画：Konva Tween支持同时修改节点的多个属性（位置、透明度、缩放等），这是实现复杂动画的核心。
• 缓动函数选择：不同的缓动函数直接影响动画节奏，比如EaseOutExpo适合光速这种快速切入的效果，BounceOut适合弹跳的弹性感。
• 链式动画扩展：如果需要多阶段动画（比如弹跳后再做光速移动），可以在一个tween的onFinish回调里启动另一个tween。

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