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

Question

我正在使用 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', '.shadow'],
         translateY: ["0px", "100vh"],
         easing: 'easeInBack',
         duration: 2000,
         loop: false,
         autoplay: false,
         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();
}

有趣的是，我第一次单击该按钮时，它完全按预期工作。从那里开始，除了骰子在返回时不会滚动之外，它可以正常工作...... 我不明白为什么...

Answer 1

最后，经过大量搜索，我在这里找到了解决方案：https://github.com/juliangarnier/anime/issues/380

问题是第一次动画是运行，它从0转到1转。第二次元素已经在 1turn 中，所以它不会改变任何东西。解决方案是强制始终从 0turn 转到 1turn：

rotate: ['0turn', '1turn']

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

Do sequencial animations in html using anime.js

javascript

html

css

animation

anime.js