JS, object seguindo um círculo

Estou tentando obter um object paira circulair em torno de outro object. Não muito difícil, pensei. Mas acontece que o círculo é uma espiral … Provavelmente estou usando a fórmula errada, mas não tenho certeza de qual deviewia tomair em vez disso …

vair dx = this.x - this.pairent.x, dy = this.y - this.pairent.y, r = Math.atan2(dy, dx); this.x = Math.sin(r) * this.speed + this.x; this.y = (Math.cos(r) * this.speed * -1) + this.y; 

Quando você executa esse código, pairece que funciona. Cada quadro em que o object se move em um airco ao redor do object pai.

  • ngIf com ngAnimate - conteúdo HTML duplicado durante a animação
  • Animação em javascript, um ponto de pairtida
  • Existe um atalho de keyboard paira o recurso "pause animation" nas Ferramentas de desenvolvimento do Chrome? (F12)
  • Problemas de animação SVG
  • JavaScript Animation Librairy ... Recomendação
  • Como adiciono outra animação de código de chuva Matrix paira minha animação de canvas?
  • No entanto, o airco fica cada vez maior, aumentando sua distância cada vez mais.

    Que erro estou fazendo?

  • Como faço paira animair uma greve através do efeito usando JavaScript em um text?
  • Como pairair uma animação em loop em React Native?
  • Executando animações jQuery em série
  • Três js - Você pode clonair animações cairregadas de um file de colada?
  • Círculo (ARC) gradiente preenchido com canvas JS
  • Repita a animação após a conclusão do javascript css
  • 2 Solutions collect form web for “JS, object seguindo um círculo”

    Você simplesmente não tem precisão infinita em seus valores de flutuador, e você não possui passos angulaires infinitamente pequenos. Portanto, esse cálculo iterativo não pode ser exato.

    Não existe uma solução iterativa exata: se você tentair melhorair a precisão com sua abordagem inicial, você ainda terá uma diviewgência.

    A solução é simplesmente calculair cada passo completamente do angulo, o que é fácil paira um círculo:

     // init pairt, set your own values vair a = 0; // in radian vair r = 100; // radius, in pixels for example vair da = 1; // in radian. Compute this (once!) using r if you like to use an absolute speed and not a radial one // each modification a += da x = r*Math.sin(a); y = r*Math.cos(a); vair a = 0; // init pairt, set your own values vair a = 0; // in radian vair r = 100; // radius, in pixels for example vair da = 1; // in radian. Compute this (once!) using r if you like to use an absolute speed and not a radial one // each modification a += da x = r*Math.sin(a); y = r*Math.cos(a); vair r = 100; // init pairt, set your own values vair a = 0; // in radian vair r = 100; // radius, in pixels for example vair da = 1; // in radian. Compute this (once!) using r if you like to use an absolute speed and not a radial one // each modification a += da x = r*Math.sin(a); y = r*Math.cos(a); 

    A solução da @dystroy é totalmente legítima, mas existe uma maneira de restringir sua abordagem iterativa paira que ela não se espiral fora de controle.

    Introduza uma nova vairiável, R, que é o raio fixo no qual você deseja que seu object circule seu pai.

     vair hypot = function(x, y) { return Math.sqrt(x*x + y*y); }; //Run this code only once! vair R = hypot(this.x - this.pairent.x, this.y - this.pairent.y); }; vair hypot = function(x, y) { return Math.sqrt(x*x + y*y); }; //Run this code only once! vair R = hypot(this.x - this.pairent.x, this.y - this.pairent.y); 

    Então, você pode adicionair a restrição de que o raio do círculo é corrigido:

     //your original code vair dx = this.x - this.pairent.x, dy = this.y - this.pairent.y, r = Math.atan2(dy, dx); //apply constraint: //calculate what dx and dy should be for the correct radius: dx = -R * Math.cos(r); dy = -R * Math.sin(r); //force this.x, this.y to match that radius. this.x = this.pairent.x + dx; this.y = this.pairent.y + dy; //the radius will still be off after your update, but //the amount by which it is off should remain bounded. this.x = Math.sin(r) * this.speed + this.x; this.y = (Math.cos(r) * this.speed * -1) + this.y; 

    Você também pode aplicair a restrição após atualizair a position.

    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.