Databases
StackOverflow2013
Postsdbo
POStuttering orbit animation when updating css through javascript over small interval
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POStuttering orbit animation when updating css through javascript over small interval
    text
    copied!<p>I'm trying to make some DOM element rotate smoothly around a fixed point. I'm writing this from scratch using jQuery and no matter what update speed I choose for the setInterval or how small I go with the amount of degrees the orbit advances on each loop, I get this janky staircase animation effect. I've tried using jquery's .animate instead of the .css hoping it would smooth things out but I cant seem to get it to work. Any help is appreciated.</p> <p>In other words, it's not as smooth as rotating an image in HTML5 canvas. I want to make it smoother.</p> <p><a href="http://jsfiddle.net/4rLF5/1/" rel="nofollow">Here is a jsFiddle demonstrating the issue.</a></p> <p>Notice how the animation is not quite smooth?</p> <p>For reference, here is the code:</p> <p><strong>HTML</strong></p> <pre><code>&lt;div id="div"&gt;&lt;/div&gt; &lt;div class="dot"&gt;&lt;/div&gt; &lt;button class="stop"&gt;STOP&lt;/button&gt; &lt;button class="start"&gt;START&lt;/button&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>#div{ position:absolute; height: 20px; width: 20px; background-color: #000; } .dot{ position:absolute; width: 5px; height: 5px; background-color: #000; } button{ position:absolute; } .stop{ top:200px; } .start{ top:225px; } </code></pre> <p><strong>THE ALL IMPORTANT JAVASCRIPT</strong></p> <pre><code>$(document).ready(function(){ $('#div').data('angle', 90); var interval; $('.stop').on('click', function(){ if(interval){ clearInterval(interval); interval = undefined; } }); $('.start').on('click', function(){ if(!interval){ interval = setBoxInterval(); } }); interval = setBoxInterval(); }); function drawOrbitingBox(degrees){ var centerX = 100, centerY = 100, div = $('#div'), orbitRadius = 50; //dot might not be perfectly centered $('.dot').css({left:centerX, top:centerY}); //given degrees (in degrees, not radians), return the next x and y coords function coords(degrees){ return {left:centerX + (orbitRadius * Math.cos((degrees*Math.PI)/180)), top :centerY - (orbitRadius * Math.sin((degrees*Math.PI)/180))}; } //increment the angle of the object and return new coords through coords() function addDegrees(jqObj, degreeIncrement){ var newAngle = jqObj.data('angle') + degreeIncrement; jqObj.data('angle', newAngle); return coords(newAngle); } //change the left and top css property to simulate movement // I've tried changing this to .animate() and using the difference // between current and last position to no avail div.css(addDegrees(div, degrees), 1); } function setBoxInterval(){ var interval = window.setInterval(function(){ drawOrbitingBox(-0.2); //This is the degree increment }, 10); //This is the amount of time it takes to increment position by the degree increment return interval; } </code></pre> <p>I'd rather not resort to external libraries/plugins but I will if that's the accepted way of doing this kind of stuff. Thank you for your time.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload