检测动画对象是否触摸了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屋!