javascript - 如何防止使用 CSS 关键帧进行动画处理的 div 发生碰撞

Question

如何防止 top 位置使用 CSS 关键帧进行动画处理的 div 与另一个也使用相同动画处理的 div 发生碰撞JavaScript 中的关键帧？我想“暂停”关键帧，稍等一下(1s？)，然后重新启动。
我编写了一个代码来检测碰撞，但是如何暂停关键帧(跨浏览器)？然后，我怎样才能重新开始呢？

关键帧:

@keyframes moveItUp {
    10% {
        top: 18%;
    }
    20% {
        top: 16%;
    }
    30% {
        top: 14%;
    }
    40% {
        top: 12%;
    }
    50% {
        top: 10%;
    }
    60% {
        top: 8%;
    }
    70% {
        top: 6%;
    }
    80% {
        top: 4%;
    }
    90% {
        top: 2%;
    }
    100% {
        top: -20px;
    }
}

检查两个 div 的碰撞:

jQuery.fn.collision = function($div2) {
    $div1  = $(this);
    var x1 = $div1.offset().left;
    var y1 = $div1.offset().top;
    var h1 = $div1.outerHeight(true);
    var w1 = $div1.outerWidth(true);
    var b1 = y1 + h1;
    var r1 = x1 + w1;
    var x2 = $div2.offset().left;
    var y2 = $div2.offset().top;
    var h2 = $div2.outerHeight(true);
    var w2 = $div2.outerWidth(true);
    var b2 = y2 + h2;
    var r2 = x2 + w2;

    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
    return true;
};

这是带有关键帧的碰撞代码的演示:http://codepen.io/anon/pen/YqVVqV

Answer 1

关键是设置animation-play-state如paused当检测到碰撞时，然后再次将其设置回 running在所需的时间后(使用 setTimeout )。

需要注意的另一件事是，碰撞检查必须在两个元素都添加动画之后进行，否则将没有动画可设置播放状态。或者，我们还可以检查检测到碰撞时元素上是否存在动画并设置 animation-play-state至paused如果有动画的话。

jQuery.fn.collision = function($div2) {
  $div1 = $(this);
  var x1 = $div1.offset().left;
  var y1 = $div1.offset().top;
  var h1 = $div1.outerHeight(true);
  var w1 = $div1.outerWidth(true);
  var b1 = y1 + h1;
  var r1 = x1 + w1;
  var x2 = $div2.offset().left;
  var y2 = $div2.offset().top;
  var h2 = $div2.outerHeight(true);
  var w2 = $div2.outerWidth(true);
  var b2 = y2 + h2;
  var r2 = x2 + w2;

  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
  return true;
};

function tryCollision() {
  $('.test123').css('animation', 'moveItUp 10s');
  setTimeout(function() {
    $('.test321').css('animation', 'moveItUp 10s');
    var int = setInterval(function() {
      var res = $('.test321').collision($('.test123'));
      if (res == true) {
        $('body').append('<p>KEYFRAME for .test321 needs to be stopped and then continue after 1s</p>');
        
        /* set the animation's state to paused */
        $('.test321').css('animation-play-state', 'paused');
        
        /* after the required amount of time set it back to running */
        setTimeout(function() {
          $('.test321').css('animation-play-state', 'running')
        }, 2500);
        
        clearInterval(int);
      }
    }, 1);
  }, 500);
}

@keyframes moveItUp {
  10% {
    top: 18%;
  }
  20% {
    top: 16%;
  }
  30% {
    top: 14%;
  }
  40% {
    top: 12%;
  }
  50% {
    top: 10%;
  }
  60% {
    top: 8%;
  }
  70% {
    top: 6%;
  }
  80% {
    top: 4%;
  }
  90% {
    top: 2%;
  }
  100% {
    top: -20px;
  }
}
.test123,
.test321 {
  position: absolute;
  top: 20%;
  width: 90%;
  left: 10px;
}
.test123 {
  background: #000;
}
.test321 {
  background: yellow;
}
button {
  position: absolute;
  top: 25%;
}
p {
  position: absolute;
  top: 30%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test123">a</div>
<div class="test321">a</div>

<button onclick="tryCollision()">Try the collision</button>