检测动画对象是否触摸了DOM中的另一个对象 [英] Detect if animated object touched another object in DOM

问题描述

我在dom中以圆形固定了多个div，并且另一个div围绕它们旋转

I have a number of divs fixed in the dom in a circular shape, and another div orbiting around them

我想知道轨道div是否碰到其中任何一个，以使用javascript采取特定操作

I want to know if the orbiting div touched any one of them to take specific action using javascript

使用关键帧负责使 #token div围绕 .stations div旋转的css代码

the css code responsible for making the #token div orbit around .stations divs using keyframes

javascript代码使 .stations div呈圆形

the javascript code makes the .stations divs in a circular shape

$("document").ready(function() {
  //arrange stations in a circle
  var block = $("#rotator .station").get(),
    increase = Math.PI * 2 / block.length,
    x = 0,
    y = 0,
    angle = 0;

  for (var i = 0; i < block.length; i++) {
    var elem = block[i];
    x = 240 * Math.cos(angle) + 150;
    y = 140 * Math.sin(angle) + 150;
    elem.style.position = 'absolute';
    elem.style.left = x + 'px';
    elem.style.top = y + 'px';
    var rot = 90 + (i * (360 / block.length));
    angle += increase;
  }

});

#rotator {
  width: 350px;
  height: 350px;
  margin: 20px auto;
  font-size: 10px;
  line-height: 1;
  transform-origin: 50% 50%;
}

@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}

#token {
  animation: orbit 10s linear infinite;
  background-color: red;
  position: relative;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
}

.station {
  background-color: #e1e1e1;
  width: 50px;
  height: 50px;
  position: relative;
  left: 200px;
  margin-left: 456px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rotator">
  <div id="token">Token</div>
     <div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
</div>

推荐答案

您可以通过对该答案进行一些编辑来实现此目标

You can achieve this by a little bit edit on this answer by gfullam.

此处 detectOverlap 使用两个元素的位置来检查是否存在冲突.

Here detectOverlap uses two elements position to check if there is a collision.

在 checkCollision()中，它将 token 元素和 stations 一对一发送到 detectOverlap()每10毫秒.

in checkCollision(), it sends token element and stations one by one to detectOverlap() for every 10 miliseconds.

此代码上的关键功能是 getBoundingClientRect().您可以检查

the key function on this code is getBoundingClientRect() You can check this link for more information.

var detectOverlap = (function () {
    function getPositions(elem) {
        var pos = elem.getBoundingClientRect();
        return [[pos.left, pos.right], [pos.top, pos.bottom]];
    }

    function comparePositions(p1, p2) {
        var r1, r2;
        r1 = p1[0] < p2[0] ? p1 : p2;
        r2 = p1[0] < p2[0] ? p2 : p1;
        return r1[1] > r2[0] || r1[0] === r2[0];
    }

    return function (a, b) {
        var pos1 = getPositions(a),
            pos2 = getPositions(b);
        return comparePositions(pos1[0], pos2[0]) && comparePositions(pos1[1], pos2[1]);
    };
})();


function checkCollision() {
    var stations = [];
    stations = $(".station");
    var elem = document.getElementById("token"); 
    var elemList = Array.prototype.slice.call(stations);
    for(var i = 0; i< stations.length; i++)
    {
      if (detectOverlap(elem, elemList[i])) {
          window.alert("CollisionNow");
          
      } else 
      {
          
      }
    }
     setTimeout("checkCollision();", 10);
}


$("document").ready(function() {
  //arrange stations in a circle
  var block = $("#rotator .station").get(),
    increase = Math.PI * 2 / block.length,
    x = 0,
    y = 0,
    angle = 0;

  for (var i = 0; i < block.length; i++) {
    var elem = block[i];
    x = 240 * Math.cos(angle) + 150;
    y = 140 * Math.sin(angle) + 150;
    elem.style.position = 'absolute';
    elem.style.left = x + 'px';
    elem.style.top = y + 'px';
    var rot = 90 + (i * (360 / block.length));
    angle += increase;
  }
  
  checkCollision();

});

#rotator {
  width: 350px;
  height: 350px;
  margin: 20px auto;
  font-size: 10px;
  line-height: 1;
  transform-origin: 50% 50%;
}

@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}


#token {
  animation: orbit 10s linear infinite;
  background-color: red;
  position: relative;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
}

.station {
  background-color: #e1e1e1;
  width: 50px;
  height: 50px;
  position: relative;
  left: 200px;
  margin-left: 456px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rotator">
  <div id="token">Token</div>
     <div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
<div class="station">station</div>
</div>

这篇关于检测动画对象是否触摸了DOM中的另一个对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！