如何用tween.js实现点击屏幕触发的文字动画效果？

参考你提到的交互效果，核心是通过Tween.js对文字的位置、缩放、透明度等属性进行平滑插值过渡，点击屏幕时触发动画。以下是可直接复用的实现方案：

核心实现步骤 #

1. 基础结构与样式 #

先定义文字元素和基础样式，确保元素可被定位和变换：

<div class="animated-text">点击屏幕触发动画</div>

.animated-text {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  font-weight: bold;
  opacity: 1;
  pointer-events: none; /* 避免文字阻挡点击事件 */
}

2. Tween.js动画逻辑 #

引入Tween.js库后，编写以下逻辑实现点击触发的动画：

// 获取目标文字元素
const textElement = document.querySelector('.animated-text');

// 存储文字的动态状态（Tween.js会自动插值更新这些值）
const textState = {
  x: 0,
  y: 0,
  scale: 1,
  opacity: 1,
  rotation: 0
};

// 同步状态到DOM的函数
function syncTextStyle() {
  textElement.style.transform = `translate(-50%, -50%) translate(${textState.x}px, ${textState.y}px) scale(${textState.scale}) rotate(${textState.rotation}deg)`;
  textElement.style.opacity = textState.opacity;
}

// 点击屏幕触发动画
document.addEventListener('click', () => {
  // 清除未完成的动画，避免冲突
  TWEEN.removeAll();

  // 生成随机目标状态（模拟示例的动态轨迹，可替换为固定预设值）
  const target = {
    x: Math.random() * 400 - 200,   // 左右偏移范围：-200~200px
    y: Math.random() * 300 - 150,   // 上下偏移范围：-150~150px
    scale: Math.random() * 1.8 + 0.4, // 缩放范围：0.4~2.2倍
    opacity: Math.random() * 0.6 + 0.4, // 透明度范围：0.4~1
    rotation: Math.random() * 120 - 60 // 旋转范围：-60~60度
  };

  // 创建向外扩散的动画
  new TWEEN.Tween(textState)
    .to(target, 1200)                // 动画时长1.2秒
    .easing(TWEEN.Easing.Exponential.InOut) // 平滑缓动曲线
    .onUpdate(syncTextStyle)         // 每帧更新DOM样式
    .onComplete(() => {
      // 动画结束后，让文字回到初始位置
      new TWEEN.Tween(textState)
        .to({ x:0, y:0, scale:1, opacity:1, rotation:0 }, 900)
        .easing(TWEEN.Easing.Cubic.Out)
        .onUpdate(syncTextStyle)
        .start();
    })
    .start();
});

// 启动Tween.js的动画循环
function animateLoop() {
  requestAnimationFrame(animateLoop);
  TWEEN.update();
}
animateLoop();

关键细节说明 #

• 状态驱动：用textState对象统一管理动态属性，避免频繁直接操作DOM，提升性能。
• 缓动函数：选择Exponential.InOut和Cubic.Out这类缓动函数，能实现类似示例的平滑弹性过渡效果；你也可以尝试TWEEN.Easing.Bounce.Out添加弹跳感，或TWEEN.Easing.Linear.None实现匀速动画。
• 动画控制：每次点击前调用TWEEN.removeAll()清除旧动画，防止多个动画叠加导致的混乱。
• 自定义扩展：如果需要多组文字动画，可给每个文字元素创建独立的状态对象，在点击事件中批量触发Tween实例。

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