Calculating transitions using array and setInterval

Question

i am trying to make a moving element which takes all the required info from the data fields of that element. Using javascript i create arrays and list through them to get the needed info. I managed to get it to work but now i face a problem of setInterval not accepting the changes in the interval using i variable. It must change the interval to be equal to difference in time array items, but it is always 1 second. Any ideas on how to make it to work correctly? Thanks in advance.

var xPos = $('.coord-dot').attr('data-x'); // get x coordinate of the point
var yPos = $('.coord-dot').attr('data-y'); // get y coordinate of the point
var time = $('.coord-dot').attr('data-time'); // timestamp input string
xArr = xPos.split(','); // split x coordinates into an array
yArr = yPos.split(','); // split y coordinates into an array
timeArr = time.split(','); // split time into an array

var i = 1;
var n = 0;

window.setInterval(function() {
  n = timeArr[i] - timeArr[i - 1]; // calculate the difference between next and current aray items
  i = i + 1;
  $('.coord-dot').css('transition', timeArr[n] + 's');
  $('.coord-dot').css('transform', 'translate(' + xArr[i - 1] + 'px,' + yArr[i - 1] + 'px)');
}, i * 1000);

.coord-dot {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="coord-dot" data-x="0,20,15,150,50" data-y="150,0,40,75,50" data-time="0,6,9,10,14">
</div>

score 0 · Accepted Answer · answered Dec 23 '15 at 19:01

Consider window.requestAnimationFrame()

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

Rather than telling JS to run a function in X seconds, this runs constantly and you check for when X seconds have passed. This gives you a lot of control over how to handle timing conflicts and is also much more performant.

https://dev.opera.com/articles/better-performance-with-requestanimationframe/

var $dot = $('.coord-dot'),
  xPos = $dot.attr('data-x'), // get x coordinate of the point
  yPos = $dot.attr('data-y'), // get y coordinate of the point
  time = $dot.attr('data-time'), // timestamp input string
  xArr = xPos.split(','), // split x coordinates into an array
  yArr = yPos.split(','), // split y coordinates into an array
  timeArr = time.split(','); // split time into an array


var n = 0; // current step (array index)
var start = null; // for checking duration



function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;

  if (n <= timeArr.length) {
    window.requestAnimationFrame(step);

    if (progress >= timeArr[n] * 1000) {
      console.log(n, timeArr[n], xArr[n], yArr[n]);

      $('.coord-dot').css('transition', timeArr[n] + 's');
      $('.coord-dot').css('transform', 'translate(' + xArr[n] + 'px,' + yArr[n] + 'px)');

      n++;
    }
  }

}

window.requestAnimationFrame(step);

.coord-dot {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="coord-dot" data-x="0,20,15,150,50" data-y="150,0,40,75,50" data-time="0,1,2,3,4">
</div>

That looks like a great solution, works like a charm, but the only thing that it is missing is that transition has to be a difference between time array items, not equal to current array item. Thanks anyway! — Vlad, Dec 23 '15 at 19:27

Calculating transitions using array and setInterval

1 Answers1