如何用JavaScript实现Unity游戏开场文字垂直飞入动画？

嘿，很高兴看到你在为Unity游戏打造开场动画！针对你想要的文字垂直方向动画效果，我们可以结合CSS动画和你的现有JavaScript逻辑来实现，这里提供两个实用的方案：

方案一：CSS过渡（Transition）实现简洁垂直滑入 #

这种方式简单易维护，适合需要平滑、基础的垂直移动效果。

1. 调整CSS样式 #

首先修改你的样式，让文字初始处于垂直偏移且透明的状态，移除hidden类时触发过渡动画：

.fly-in-text {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fly-in-text li {
  display: inline-block;
  /* 初始状态：从下方50px位置开始，完全透明 */
  transform: translateY(50px);
  opacity: 0;
  /* 定义过渡动画的属性、时长和缓动曲线 */
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

/* 保持hidden状态下的文字初始位置 */
.fly-in-text.hidden li {
  transform: translateY(50px);
  opacity: 0;
}

如果想要文字从上方滑入，只需要把translateY(50px)改成translateY(-50px)即可。

2. 优化JavaScript触发逻辑 #

如果你想让每个字母依次动画（而非同时出现），可以把原来的统一移除hidden类改成逐个处理，增加层次感：

setTimeout(function() {
  const textLetters = document.querySelectorAll('.fly-in-text li');
  textLetters.forEach((letter, index) => {
    // 每个字母延迟100ms触发动画，可根据需求调整间隔
    setTimeout(() => {
      letter.classList.remove('hidden');
    }, index * 100);
  });
}, 1000);

对应的HTML需要给每个<li>添加hidden类，或者保持原有的<ul class="fly-in-text hidden"，再调整CSS逻辑（比如把.fly-in-text.hidden li的样式应用到所有li，移除ul的hidden后li自动过渡）。

方案二：CSS关键帧动画（@keyframes）实现复杂效果 #

如果想要更生动的动画（比如轻微弹跳、变速等），可以用关键帧动画来定义更精细的运动路径：

1. 定义关键帧动画 #

@keyframes slideInVerticalBounce {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  80% {
    transform: translateY(-5px); /* 滑到位置后轻微向上弹一下 */
    opacity: 1;
  }
  100% {
    transform: translateY(0); /* 最终回到正常位置 */
    opacity: 1;
  }
}

.fly-in-text {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fly-in-text li {
  display: inline-block;
  opacity: 0; /* 初始透明 */
}

/* 触发动画的类 */
.fly-in-text li.animate {
  animation: slideInVerticalBounce 0.8s ease-out forwards;
  /* forwards属性让动画结束后保持最后一帧的状态 */
}

2. JavaScript触发动画 #

setTimeout(function() {
  const textLetters = document.querySelectorAll('.fly-in-text li');
  textLetters.forEach((letter, index) => {
    setTimeout(() => {
      letter.classList.add('animate');
    }, index * 120); /* 调整间隔控制动画节奏 */
  });
}, 1000);

这种方案下HTML不需要hidden类，初始<li>默认透明，添加animate类后自动播放动画。

额外小提示 #

• 如果你想和Unity的加载状态同步（比如等游戏资源加载完成再播放动画），可以监听Unity WebGL的加载完成事件，替换固定的setTimeout(1000)，避免动画提前播放。
• 可以调整CSS中的transform值、动画时长（0.6s/0.8s）和缓动曲线（ease-out/ease-in-out等）来适配你的游戏风格。

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