EventListener for this javascript

Question

EventListener for this javascript

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I have the following 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);
}
});

What I want is to insert an event that when clicking on one of the small circles, the continuous movement stops and sends me the circle to the middle.

I've been with this for four days, and I do not give with the solution, I'm something noob in javascript so I would appreciate any help.

P.D: I leave the link of the original post from where I take out the code. jsfiddle

javascript html5 css3

asked by Dario B. 05.10.2017 в 11:41

source

2 answers

0

Modifying a bit what you have, you can do it like this (the elegant move to the center I leave it pending):

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>

answered by 05.10.2017 в 14:05

Release memory from the node of a TRIE in C How to use implode with arrays obtained from Mariadb PHP columns?

score 1 · Accepted Answer

I think something like that is what you're looking for:

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);
}

The animation can be canceled with cancelAnimationFrame