Javascript 简单动画播放/反转按钮

尝试使用animate.js framework在播放和反向播放之间切换播放动画

HTML

问题是我必须按两次按钮才能播放动画。为什么?

Codepen:

动画插件具有：

此外，因为没有循环，所以每次都需要重新启动

因此，您的代码可以简化为：

let animeSquare=anime({
目标：'.square'，
方向：'正常'，//正常还是反向？？？？
/**要设置动画的属性*/
translateX:'100px'，
/**动画设置*/
持续时间：500，
自动播放：错误，
开始：功能（动画）{
},
完成：功能（动画）{
//改变方向…所以下次你玩的时候。。。。
动画方向=（动画方向='normal'）？'reverse'：'normal'；
}
});
$（'.btn'）。单击（函数（）{
animeSquare.restart（）；
});
.square{
宽度：100px；
高度：100px；
背景色：红色；
}

玩
我尝试的代码是

let animeSquare = anime({
  targets: '.square',

  /** Properties to animate */
  translateX: '100px',

  /** Animation settings */
  duration: 500,
  autoplay: false,
});

$('.btn').click(function() {
  if ($(this).hasClass('is-active')) {
    animeSquare.direction = "reverse"
    animeSquare.play();
    $(this).removeClass('is-active');
  } else {
    animeSquare.direction = "normal"
    animeSquare.play();
    $(this).addClass('is-active');
  }
});

我注意到以下逻辑

第一次玩游戏时，使用
animeSquare.play（）但从第二次计数开始，您需要使用
animeSquare.reverse（）反转动画然后使用
animeSquare.play（）反向播放动画


let animeSquare=anime({
目标：'.square'，
/**要设置动画的属性*/
translateX:'100px'，
/**动画设置*/
持续时间：500，
自动播放：错误，
});
var c=0；
$（'.btn'）。单击（函数（）{
如果（c==0）{
动物广场。游戏（）；
C++；
}否则{
动物广场。反面（）；
动物广场。游戏（）；
}
控制台日志（animeSquare）；
});
.square{
宽度：100px；
高度：100px；
背景色：红色；
}
播放

/** animation */
let animeSquare = anime({
  targets: '.square',
  translateX: '100px',
  duration: 500,
  autoplay: false,
});


/** button */
$('.btn').click(function() {
  if ($(this).hasClass('is-active')) {
    animeSquare.reverse();
    $(this).removeClass('is-active');
  } else {
    animeSquare.play();
    $(this).addClass('is-active');
  }
});

let animeSquare = anime({
  targets: '.square',

  /** Properties to animate */
  translateX: '100px',

  /** Animation settings */
  duration: 500,
  autoplay: false,
});

$('.btn').click(function() {
  if ($(this).hasClass('is-active')) {
    animeSquare.direction = "reverse"
    animeSquare.play();
    $(this).removeClass('is-active');
  } else {
    animeSquare.direction = "normal"
    animeSquare.play();
    $(this).addClass('is-active');
  }
});