Javascript 如何使用整数值(非向量)计算两条直线之间的度数
我正在研究小效果动画,它创建了5个不同的对象,从中心向5个不同的方向扩展。对象不应该相互堆叠,因此我考虑将它们分布在不同的圆角度中,但我不知道如何计算px中随机创建的两条线之间的角度(例如:100px线和50px线) 这是我的密码:Javascript 如何使用整数值(非向量)计算两条直线之间的度数,javascript,jquery,math,Javascript,Jquery,Math,我正在研究小效果动画,它创建了5个不同的对象,从中心向5个不同的方向扩展。对象不应该相互堆叠,因此我考虑将它们分布在不同的圆角度中,但我不知道如何计算px中随机创建的两条线之间的角度(例如:100px线和50px线) 这是我的密码: //Container of the objects var box = $('.nodebox') box.css({ height: box.width(), top: (($(window).height() - box.width())/2), }) //
//Container of the objects
var box = $('.nodebox')
box.css({
height: box.width(),
top: (($(window).height() - box.width())/2),
})
//Main object in the center, one click on this, it will disappear followed by the activation of 5 sub-objects animation.
var Ndd = $('.Node');
Ndd.css({
top: ((box.width()-Ndd.width())/2),
left:((box.height()-Ndd.height())/2)
})
//Randomly creating the sub-objects
function createNnodes(n){
var nodeArrays = [];
for (var i = 0; i< n ; i++){
var smNd = $('<div class="smallNodes"></div>');
if (!$('body').data('mobile')){ //check to see if the device is mobile or not
var widthn = (Math.random()*($(window).width()*0.04) + $(window).width()*0.01);
} else {
var widthn = (Math.random()*($(window).width()*0.1) + $(window).width()*0.04);
};
var heightn = widthn; //making sure the objects are square-shaped
smNd.css({width: widthn, height: heightn})
nodeArray.push(smNd);
}
return nodeArrays;
}
//Handling the animation
function animateNodes(){
var nodeArray = createNnodes(6);
//creating 2 random distances for each object so that it tralvels diagonally or horizontally or vertically
for (var i = 0; i < nodeArray.length; i++){
var distance1 = ((Math.random()*Ndd.width()) + Ndd.width()*0.5);
var distance2 = ((Math.random()*Ndd.width()) + Ndd.width()*0.5);
//Create random "+" or "-"
function Pornot() {
if(Math.floor(Math.random()*2)){
return '+=';
}else {
return '-=';
}
}
var plusornot1 = Pornot();
var plusornot2 = Pornot();
$(nodeArray[i]).css({
top:((box.height()-$(nodeArray[i]).width())/2),
left:((box.width()-$(nodeArray[i]).width())/2)
}).appendTo('.nodebox').animate({
left: plusornot1 + distance1,
top: plusornot2 + distance2,
opacity:0,
},2000,function(){
$(nodeArray[i]).remove();
})
}
//对象的容器
变量框=$('.nodebox')
box.css({
高度:box.width(),
顶部:($(window.height()-box.width())/2),
})
//主对象在中间,单击此按钮,它将消失,然后激活5个子对象动画。
变量Ndd=$('.Node');
Ndd.css({
顶部:((box.width()-Ndd.width())/2),
左:((box.height()-Ndd.height())/2)
})
//随机创建子对象
函数createNnodes(n){
变量noderrays=[];
对于(变量i=0;i
}
上面的代码工作得很好,我唯一关心的是,再一次,如何指定距离1和距离2之间的角度
要演示的图片:
单击屏幕后,主节点将消失。然后,在其后面创建5个较小的节点实例,它们以5个不同的角度从中心同步移动 中心点坐标:(xc,yc)第一点坐标:(x1,y1)
第二点坐标:(x2,y2)
线段(xc,yc)-(x1,y1)和(xc,yc)-(x2,y2)之间的角度:
你能提供一张照片吗?问题不清楚,你使用的是非琐碎的术语。好的,我看到了图片。什么是要测量的角度?在什么对象之间?可能重复的@MBo是第1行和第2行之间的角度例如(我不知道,它们之间的度数?),我希望子对象像烟花或其他东西一样从中心爆炸。。。。函数animateNodes()中的代码处理基于距离1和距离2的每个子对象的平移动画。因此,它们可以水平、垂直或双对数移动(同样,top:100px和left:-200px的值将使一个节点从右向左双对数向上移动,而困扰我的是该线与x轴之间的角度……)@user5542121是否有其他方法根据提供的两条直线及其长度计算角度?比如在100px和200px之间。我是根据你提供的答案来的,似乎不是我想要的答案。。。。哦,顺便说一句,谢谢你的推荐。哦。。。我想这几乎是涉及x、y、z和其他一些匿名变量的唯一选项,似乎不太合适,谢谢@MBo的帮助
dx1 = x1 - xc
dx2 = x2 - xc
dy1 = y1 - yc
dy2 = y2 - yc
len1 = Sqrt(dx1 * dx1 + dy1 * dy1)
len2 = Sqrt(dx2 * dx2 + dy2 * dy2)
Angle = ArcCos((dx1 * dx2 + dy1 * dy2) / (len1 * len2))