javascript - 简单的动画播放/倒退按钮

Question

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

HTML

<button class="btn">PLAY</button>
<div class="square"></div>

JS

/** 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');
  }
});

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

代码笔:https://codepen.io/aitormendez/pen/ymyzoq

Answer 1

动漫插件有:

• direction property
• begin / complete callbacks

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

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

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

    direction: 'normal',  // normal or reverse????

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

    /** Animation settings */
    duration: 500,
    autoplay: false,

    begin: function (anim) {

    },
    complete: function (anim) {
        // change direction..... so the next time you play....
        anim.direction = (anim.direction == 'normal') ? 'reverse' : 'normal';
    }
});

$('.btn').click(function () {
    animeSquare.restart();
});

.square {
    width: 100px;
    height: 100px;
    background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>


<button class="btn">PLAY</button>
<div class="square"></div>