如何仅使用Web Animations API实现多元素组合序列动画

实现结论 #

完全可以使用原生 Web Animations API 实现和这段 anime.js 代码完全一致的动画效果，无需引入任何第三方依赖。
你提到的多元素统一动画序列可以通过手动计算每个动画的起始延迟，配合全局统一的循环配置实现，逻辑和 anime.js 的时间线底层逻辑一致。

实现代码 #

// 先选中所有目标元素
const scrollIcon = document.querySelector('.button-scroll-icon')
const scrollWheel = document.querySelector('.button-scroll-wheel')
const scrollBtn = document.querySelector('.button-scroll')
const scrollText = document.querySelector('.button-scroll-text')

// 全局基础配置：和原anime配置对齐，线性缓动、无限循环
const baseAnimOptions = {
  easing: 'linear',
  iterations: Infinity
}

// 按时间线时序逐个定义动画，手动计算delay对齐原时间线的偏移规则
// 原序列总时长为1020ms，所有动画按循环周期对齐延迟即可
const animations = [
  // 1. 图标高度从100%变为0%，0~500ms执行
  scrollIcon.animate(
    [{ height: '100%' }, { height: '0%' }],
    { ...baseAnimOptions, duration: 500, delay: 0 }
  ),
  // 2. 图标透明度从1变为0，500~510ms执行
  scrollIcon.animate(
    [{ opacity: 1 }, { opacity: 0 }],
    { ...baseAnimOptions, duration: 10, delay: 500 }
  ),
  // 3. 图标高度从0%恢复为100%，510~520ms执行
  scrollIcon.animate(
    [{ height: '0%' }, { height: '100%' }],
    { ...baseAnimOptions, duration: 10, delay: 510 }
  ),
  // 4. 滚轮图标下移15px同时透明度降为0，0~500ms执行（对应原-=520偏移）
  scrollWheel.animate(
    [{ transform: 'translateY(0)', opacity: 1 }, { transform: 'translateY(15px)', opacity: 0 }],
    { ...baseAnimOptions, duration: 500, delay: 0 }
  ),
  // 5. 按钮整体下移10px，0~500ms执行（对应原-=520偏移）
  scrollBtn.animate(
    [{ transform: 'translateY(0)' }, { transform: 'translateY(10px)' }],
    { ...baseAnimOptions, duration: 500, delay: 0 }
  ),
  // 6. 文字透明度从1降为0.5，0~500ms执行（对应原-=520偏移）
  scrollText.animate(
    [{ opacity: 1 }, { opacity: 0.5 }],
    { ...baseAnimOptions, duration: 500, delay: 0 }
  ),
  // 7. 按钮整体上移回原位，520~1020ms执行
  scrollBtn.animate(
    [{ transform: 'translateY(10px)' }, { transform: 'translateY(0)' }],
    { ...baseAnimOptions, duration: 500, delay: 520 }
  ),
  // 8. 图标透明度从0恢复为1，520~1020ms执行（对应原-=500偏移）
  scrollIcon.animate(
    [{ opacity: 0 }, { opacity: 1 }],
    { ...baseAnimOptions, duration: 500, delay: 520 }
  ),
  // 9. 文字透明度从0.5恢复为1，520~1020ms执行（对应原-=500偏移）
  scrollText.animate(
    [{ opacity: 0.5 }, { opacity: 1 }],
    { ...baseAnimOptions, duration: 500, delay: 520 }
  )
]

补充说明 #

如果需要控制动画的播放、暂停、重启，直接操作上面数组里的动画实例即可，比如批量暂停：

animations.forEach(ani => ani.pause())

如果不想手动计算延迟，也可以自己封装一个简单的时间线工具类，维护当前总时长，处理-=这类偏移语法，本质就是自动计算每个动画的delay值，实现起来也非常简单。

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