javascript – 切换对象之间的旋转

2023年5月20日 228次阅读

我已经找到了一个围绕主要物体旋转物体的功能,比如太阳周围的行星.

我希望能够通过单击按钮更改其他对象旋转的对象.例如,我有对象A,B和C.B和C围绕A旋转.但是我希望C能够围绕B旋转,而B保持围绕A旋转.我试图在此处解决这个问题.码：

var objectX = "black";
function switchObject(){
  objectX = "blue";
}

function rotation(coorX, coorY, object) {
    object.side +=  (1.0 / object.speed); 
    var ang = object.side * 2.0 * Math.PI / 180.0; 
    var r = object.spin;

    return {
        x: Math.cos(ang) * r - Math.sin(ang) * r + coorX, 
        y: Math.sin(ang) * r + Math.cos(ang) * r + coorY 
    };
  }  

  function rotationball ( circle ) {
    var x, y, x_black, y_black, e, newpos;
    e = document.getElementById ( circle );
    x_black = parseFloat ( document.getElementById ( objectX ).getAttribute ( "cx" ) );
    y_black = parseFloat ( document.getElementById ( objectX ).getAttribute ( "cy" ) );
    newpos = rotation( x_black, y_black, ball[circle] );

    e.setAttribute ( "cx", newpos.x );
    e.setAttribute ( "cy", newpos.y );
    }

我已经知道如何通过您在代码中看到的objectX变量轻松切换哪个对象是其他对象旋转的对象.但这种情况会立即发生,我需要逐渐进行,这就是我认为更难以解决的数学代码.

我的问题是：

我的代码应该看起来像红色物体开始围绕蓝色物体旋转,而蓝色物体围绕黑色物体旋转.这需要在许多轮换中逐步完成.我感谢任何帮助,无论是我需要的一些代码还是指向正确的方向！提前致谢.

这是我的JsFiddle

PS：我还计划将每个添加的行星定位在比中心点(太阳)更远的位置,而不是之前添加的行星.

最佳答案 我写了相对移动球.只需设置第二个“行星”的相对坐标,数学保持不变,只需改变

frame of reference.请参见
JsFiddle

rotationball("red"); 
relativeRotationBall("blue", "red");

var ball = { 
  blue: {speed: 1.2,    spin: 100,  side: 0.0} , 
  red:  {speed: 2.2,    spin: 200,  side: 0.0} // speed up
};

更新：
  单击切换按钮更改参考框架.

function preSetObjectRotation(dedfaultObject, frameReference) {    
    var self = this;
      this.defaultObject = dedfaultObject;
      this.defaultFrameReference = frameReference;
      this.setFrameReference = function (frameReference) {
          self.defaultFrameReference = frameReference;
      };
      this.relativeRotationBall = function relativeRotationBall () {
        var e, newpos;
        e = document.getElementById ( self.defaultObject );
        newpos = relativeRotation( self.defaultFrameReference, ball[self.defaultObject] );
        e.setAttribute ( "cx", newpos.x );
        e.setAttribute ( "cy", newpos.y );
      }  
 }

JsFiddle

更新2
isEclipse函数中的点在一行上时自动切换(JsFiddle )

点赞