如何用Anime.js实现动画反转？点击按钮恢复元素初始状态

嘿，我懂你卡在哪了！你现在的代码只能让div执行一次放大动画，但想要点击切换放大和还原状态对吧？其实只需要给点击事件加个状态判断，让动画能在正向（放大）和反向（还原）之间切换就好啦～

原代码的问题 #

你当前定义的boxGetsLarger动画只有放大的逻辑，点击按钮只会触发play()方法，没有处理还原的反向动画逻辑，所以没法回到初始状态。

解决方案：添加状态切换逻辑 #

我给你两种简单的实现方式，选你觉得顺手的就行：

方法1：利用Anime.js的reverse()方法

这种方法可以直接复用你原有的动画定义，只需要跟踪当前的展开状态，点击时切换动画方向：

// 保留你原有的动画定义，添加direction属性
var boxGetsLarger = anime({
  targets: '.agent-button',
  width: { value: '+=300', duration: 200, easing: 'linear' },
  borderRadius: { value: 83 },
  duration: 200,
  height: { value: '+=20' },
  easing: 'linear',
  autoplay: false,
  direction: 'normal' // 默认正向播放（放大）
});

// 用变量跟踪当前是否已展开
let isExpanded = false;

document.querySelector('.agent-button').onclick = function() {
  if (isExpanded) {
    // 如果已经展开，切换到反向动画（还原）
    boxGetsLarger.reverse();
    boxGetsLarger.play();
  } else {
    // 未展开，播放正向动画（放大）
    boxGetsLarger.play();
  }
  // 切换状态
  isExpanded = !isExpanded;
};

方法2：定义完整的双向动画片段

这种方法更直观，把放大和还原的动画都定义在一个动画实例里，通过播放不同片段来切换状态：

// 明确初始值和目标值，定义双向动画
const boxAnimation = anime({
  targets: '.agent-button',
  // 宽度：91px → 391px → 91px
  width: [
    { value: 391, duration: 200, easing: 'linear' },
    { value: 91, duration: 200, easing: 'linear' }
  ],
  // 高度：91px → 111px → 91px
  height: [
    { value: 111, duration: 200, easing: 'linear' },
    { value: 91, duration: 200, easing: 'linear' }
  ],
  // 圆角：100px → 83px → 100px
  borderRadius: [
    { value: 83, duration: 200 },
    { value: 100, duration: 200 }
  ],
  autoplay: false
});

let isExpanded = false;

document.querySelector('.agent-button').onclick = function() {
  if (!isExpanded) {
    // 播放第一段（放大）
    boxAnimation.playSegments([0, 1], true);
  } else {
    // 播放第二段（还原）
    boxAnimation.playSegments([1, 2], true);
  }
  isExpanded = !isExpanded;
};

完整代码示例 #

你的CSS和HTML可以保持不变，只替换JS部分就行：

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<div class="agent-button close">
  <img src="img/audio-bars.svg">
</div>

.agent-button {
  display: flex;
  justify-content: space-between;
  border-radius: 100px;
  background: #ffffff;
  box-shadow: 0pt 2pt 10pt #0000001f;
  height: 91px;
  width: 91px;
}

这样点击按钮的时候，div就会在放大和初始状态之间来回切换啦～

内容的提问来源于stack exchange，提问作者maria di cesare