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

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

Codepen：https://codepen.io/aitormendez/pen/ymyzoq

Answer 1

动漫插件具有：

此外，由于没有循环，因此每次都需要重新启动。

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

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>

Answer 2

我尝试过的代码是

import static org.apache.spark.sql.functions.*;

Answer 3

我注意到以下逻辑

第一次使用animeSquare.play();播放时，但从第二次开始，您需要使用animeSquare.reverse();反转动画，然后在使用animeSquare.play();反转之后播放动画。

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

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

  /** Animation settings */
  duration: 500,
  autoplay: false,
});
var c=0;
$('.btn').click(function() {
  if(c==0){
    animeSquare.play();
    c++;
  }else{
    
    animeSquare.reverse();
    animeSquare.play();
    
  }
  
  console.log(animeSquare);
});

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

<button class="btn">PLAY</button>
<div class="square"></div>
<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>

简单的动画播放/后退按钮

3 个答案: