如何基于anime.js复现remote.com站点的逐词逐字文本动画效果

问题核心 #

当前代码所有动画同时触发播放，没有建立顺序执行的逻辑，所以无法实现多个文本块按顺序逐个完成切入、切出的效果。

具体修改步骤 #

• 第一步：调整DOM结构与基础样式
  把需要轮播的所有文本放入同一个父容器，设置为绝对定位重叠摆放，默认透明度为0：

  .animation-container {
    position: relative;
  }
  .text-block {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
  

  <div class="animation-container">
    <div class="text-block slide-in tricks">测试文本1</div>
    <div class="text-block slide-up tricks">测试文本2</div>
    <div class="text-block fade-up tricks">测试文本3</div>
  </div>
  

• 第二步：修改动画配置
  把所有动画时间线的loop属性统一改为false，否则动画会无限循环，无法触发完成回调。
• 第三步：新增顺序播放逻辑
  删除原代码中直接调用所有动画play()的语句，新增动画队列轮播逻辑：

  // 按预期播放顺序存入所有动画时间线
  const animationList = [slideIn, slideUp, fadeUp, rotateIn, popIn]
  let playIndex = 0
  
  function runAnimationQueue() {
    // 超出队列长度则重置索引，实现循环播放
    if(playIndex >= animationList.length) playIndex = 0
    const currentAnimation = animationList[playIndex]
    // 重置动画到初始状态
    currentAnimation.restart()
    // 当前动画播放完成后触发下一个
    currentAnimation.complete = () => {
      playIndex++
      runAnimationQueue()
    }
  }
  
  // 初始延迟后启动队列
  setTimeout(() => {  
    runAnimationQueue()
  }, 800);
  

单词级逐个切入的扩展方案 #

如果需要实现同一段文本内的单词逐个切入，只需要修改动画的delay计算逻辑，按单词索引叠加偏移量即可：

delay: (el, i) => {
  // 获取当前字母所属的单词索引
  const wordEl = el.closest('.tricksword')
  const wordIndex = Array.from(wordEl.parentNode.children).indexOf(wordEl)
  // 单词间偏移300ms，单词内字母偏移30ms，可根据需求调整
  return wordIndex * 300 + i * 30
}

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