animation 怎么让两个动画交替播放

在创建动画时，如果你想让两个动画交替播放，通常有几种方法可以实现这取决于所使用的动画技术或库。以下是基于JavaScript和CSS的一个基本示例：

1. **CSS** (CSS3) 动画：
如果是纯CSS动画，你可以利用`animation-play-state`属性。先设置第一个动画启动，然后在完成回调函数中切换到第二个动画，如：

#anim1 {
  animation: anim1 5s infinite;
}

@keyframes anim1 {
  /* 第一个动画 */
}

/* JavaScript (假设有个按钮控制切换）*/
document.getElementById('switchBtn').addEventListener('click', function() {
  document.getElementById('anim1').style.animationPlayState = 'paused';
  setTimeout(() => {
    document.getElementById('anim1').style.animationPlayState = 'running'; // 开启第二个动画
  }, 5000); // 等待前一个动画结束后再开始下一个
});

2. **JavaScript/jQuery** 或其他库：
对于JavaScript，可以使用定时器和事件链来切换动画，例如使用jQuery的`stop()`和`delay()`方法：

let currentAnim = 'anim1';

function playAnimation(animId) {
  $('#'+animId).stop().delay(5000).queue(function(next) {
    $(this).animate({/* 第二个动画的样式 */}, 5000);
    next();
  });
}

// 初始播放
playAnimation('anim1');

// 按钮点击事件
$('#switchBtn').on('click', function() {
  if (currentAnim === 'anim1') {
    currentAnim = 'anim2';
  } else {
    currentAnim = 'anim1';
  }
  playAnimation(currentAnim);
});

以上代码示例都假设你有两个名为`anim1`和`anim2`的动画。记得替换实际的动画名称、样式和时间。