1

Tengo el siguiente javascript:

$( document ).ready(function() {
var pos = $('#center').position(),
  radiusSat = $('#sat1').width() * 0.5,
  radius = $('#center').width() * 0.5,
  cx = pos.left + radius,
  cy = pos.top + radius,
  x, y, angle = 0,
  angles = [],
  spc = 360 / 5,
  deg2rad = Math.PI / 180,
  i = 0;

for (; i < 5; i++) {
  angles.push(angle);
  angle += spc;
}

/// space out radius
radius += (radiusSat + 10);

loop();

function loop() {

  for (var i = 0; i < angles.length; i++) {

    angle = angles[i];

    x = cx + radius * Math.cos(angle * deg2rad);
    y = cy + radius * Math.sin(angle * deg2rad);

    $('#sat' + i).css({
      left: x - radiusSat,
      top: y - radiusSat
    });

    angles[i] = angles[i] + 1;
    if (angles[i] > 360) angles[i] = 0;
  }

  requestAnimationFrame(loop);
}
});

Lo que quiero es insertarle un evento que al hacer click en uno de los circulos pequeños, el movimiento continuo pare y me envie el circulo al medio.

Llevo cuatro dias con esto, y no doy con la solucion, Soy algo noob en javascript asi que agradeceria cualquier ayuda.

P.D:dejo el link del post original de deonde saque el codigo. jsfiddle

2 respuestas 2

1

Creo que algo así es lo que buscas:

var pos = $('#center').position(),
    radiusSat = $('#sat1').width() * 0.5,
    radius = $('#center').width() * 0.5,
    cx = pos.left + radius,
    cy = pos.top + radius,
    x, y, angle = 0, angles = [],
    spc = 360 / 5,
    deg2rad = Math.PI / 180,
    i = 0,
    animation;

for(;i < 5; i++) {
    angles.push(angle);
    angle += spc;
}

/// space out radius
radius += (radiusSat + 10);

loop();

$(".circle").on("click", function() {
    // Esto cancela la animación
    cancelAnimationFrame(animation);

    // Esto centra el círculo clicado
    $(this).css({
        top: '175px',
        left: '175px'
    });
});

function loop() {

    for(var i = 0; i < angles.length; i++) {

        angle = angles[i];

        x = cx + radius * Math.cos(angle * deg2rad);
        y = cy + radius * Math.sin(angle * deg2rad);

        $('#sat' + i).css({left:x - radiusSat, top:y - radiusSat});

       angles[i] = angles[i] + 1;
       if (angles[i] > 360) angles[i] = 0;
    }

    animation = requestAnimationFrame(loop);
}

La animación se puede cancelar con cancelAnimationFrame

1
  • Muchisiiimass gracias, no es completamente lo que estaba buscando pero desde aqui puedo partiry completarlo. Muchas gracias, de verdad, estaba que me tiraba de los pelos.
    – Dario B.
    Commented el 5 oct. 2017 a las 11:23
0

Modificando un poco lo que tienes, se puede hacer así (el mover elegantemente hasta el centro te lo dejo pendiente):

var pos = $('#center').position(),
    radiusSat = $('#sat1').width() * 0.5,
    radius = $('#center').width() * 0.5,
    cx = pos.left + radius,
    cy = pos.top + radius,
    x, y, angle = 0, angles = [],
    spc = 360 / 5,
    deg2rad = Math.PI / 180;
    
let clicked=0;
console.log(pos);
for(let i = 0; i < 5; i++) { //let por var, importante!
    angles.push(angle);
    angle += spc;
    $(`#sat${i+1}`).click(function () {
    	clicked=i+1;
    });
}

/// space out radius
radius += (radiusSat + 10);


loop();

function loop() {

  for(var i = 0; i < angles.length; i++) {

    angle = angles[i];

    x = cx + radius * Math.cos(angle * deg2rad);
    y = cy + radius * Math.sin(angle * deg2rad);

    $('#sat' + i).css({left:x - radiusSat, top:y - radiusSat});

    angles[i] = angles[i] + 1;
    if (angles[i] > 360) angles[i] = 0;
  }
  if (!clicked) {
    requestAnimationFrame(loop);
  } else {
    requestAnimationFrame(moveToCenter);
  }
}

function moveToCenter() {
  let clickedDiv=$(`#sat${clicked}`);
	let position=clickedDiv.position();
  let centerX=position.left+25;
  let centerY=position.top+25;
  if (centerX > cx) {
  	centerX-=1;
  } else if (centerX<cx) {
  	centerX+=1;
  }
  if (centerY > cy) {
  	centerY-=1;
  } else if (centerY<cy) {
  	centerY+=1;
  }
  
  if (Math.abs(centerY-cy) > 1 || Math.abs(centerX-cx)>1) {
  	clickedDiv.css({left:centerX-25, top:centerY-25})
  	requestAnimationFrame(moveToCenter);
  }
  
}
div {
    border-radius:50%;
    border:2px solid #000;
    position:fixed;
}
#center {
    width:200px;
    height:200px;
    left:100px;
    top:100px;
    
}
#sat0, #sat1, #sat2, #sat3, #sat4 {
    width:50px;
    height:50px;
    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="center"></div>
<div id="sat0"></div>
<div id="sat1"></div>
<div id="sat2"></div>
<div id="sat3"></div>
<div id="sat4"></div>

1
  • Esta esta muy terminado eh, ahora solo me tengo que poner a resetear el movimiento con otro click y modificar un poco la funcion para que esta sea compatible con imagenes.Mes estoy volviendo loco, no tenia mucha idea de jscript, ahora con vuestros ejemplos y despues de 4 dias de lectura lo veo algo mas claro....xDD. Gracias
    – Dario B.
    Commented el 5 oct. 2017 a las 12:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.