使用anime.js在html中进行顺序动画

如何解决使用anime.js在html中进行顺序动画

我正在使用anime.js来创建几个简单的动画，但是我正努力使其工作。 目的是使用户能够掷出两个骰子。骰子从屏幕中间开始，单击按钮时，它应在屏幕上向下移动，直到消失。然后，它应该从屏幕顶部再次出现（已经有新面孔），但是这一次它应该滚动了。 我正在尝试使用两个顺序动画。在中间应绘制新值。

这是html：

       <div class="outerDice" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 15;">
      <div class="dice" style="position: absolute; overflow: visible; z-index: 15; top:325px; left: 171px; width: 133px; height: 133px;">
        <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 4;">
          <div id="dice1" style="position: absolute;  background-image: url(images/plain_dice.png); background-size: 100% 100%; opacity: 1; background-repeat: no-repeat; display: inline; border-style: none; overflow: visible; z-index: 4; width: 133px; height: 133px;">
            <img src="images/story_dice33.png " height="125" width="125">
          </div>
        </div>
      </div>

      <div style="position: absolute; top: 310px; left: 119px; width: 100%; height: 100%; z-index: 2;">
        <img class="shadow" src="images/shadow.png" height="240px" width="240px" style="z-index: 4; display: inline; opacity: 0.5; position: absolute; overflow: visible;">
      </div>
    </div>

<button onclick="move();" style="z-index: 9999; position: absolute;  top: 0; left: 0px;" >CLICK ME</button>

这里是javascript：

function move(obj){
       
      var rollDice = anime({
              targets: ['.dice','.shadow'],translateY: ["-500px","0px"],duration: 1000,loop: false,autoplay: false,rotate: '1turn',easing: 'linear'
            });
      var dcount = 0,scount = 0;
      var drop = anime({
         targets: ['.dice',translateY: ["0px","100vh"],easing: 'easeInBack',duration: 2000,delay: function(el,i,l) {
          if(el.classList.contains("dice"))
            return ++dcount*100;
          if(el.classList.contains("shadow"))
            return ++scount*100;

            return i * 100;
          },complete: function(anim) {
            roll(document);
            rollDice.restart();
          }
       });
       drop.restart();
}

有趣的是，我第一次单击该按钮时，它的工作原理完全符合预期。 从那里开始，除了返回时骰子不滚动外，它的工作原理是…… 我不明白为什么...

解决方法

最后，经过更多搜索，我在这里找到了解决方案：Adding validation to an Entry widget

问题是动画第一次运行时，它从0turn变为1turn。 第二次元素已经转1圈，因此它不会更改任何内容。 解决方案是始终强制从0turn转到1turn：

{{1}}