Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

Jquery animaton jittery

  • 23-06-2009 04:22PM
    #1
    Placebo
    Registered Users, Registered Users 2 Posts: 8,070 ✭✭✭


    Came up with some code to rotate images, basically around a circles path
    seems jittery, can anyone improve?

    try for yourself, save to .html


    [PHP]
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"&gt;

    <html>

    <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js&quot; type="text/javascript"></script>
    <script type="text/javascript">

    $(document).ready(function(){

    var radius = 200;
    var centerX = 300;
    var centerY = 700;
    var steps= 20;

    var xValues = [0];
    var yValues = [0];

    for (var i = 1; i < steps; i++) {
    xValues = (centerX + radius * Math.cos(Math.PI * i / steps*2-Math.PI/2));
    yValues = (centerY + radius * Math.sin(Math.PI * i / steps*2-Math.PI/2));

    $('#block').animate({top: xValues, left:yValues },200);
    }

    });

    </script>

    <body bgcolor="#7dc242">
    <div style="position:absolute, width:100%, height:100%, margin:0px, padding:0px;">



    <div id ="block" style="position:absolute; top:300px; left:700px;">
    <img src="http://www.veryicon.com/icon/preview/System/Function/circle red Icon.jpg&quot;&gt;
    </div>


    </div>
    </body>
    </html>

    [/PHP]


Comments

  • #2
    Webmonkey
    Registered Users, Registered Users 2 Posts: 9,579 ✭✭✭Webmonkey


    Not too familiar with it myself but this line:
    $('#block').animate({top: xValues[i], left:yValues[i] },200);

    Is this a millisecond delay between each step I wonder, reduce this to 50, might look smoother.

    You can also account for the speed up that you may not want by incrementing the steps up to 50 or 75 from 20 or something. I'd say by tweaking these two, you'll get the desired effect.


  • #3
    ocallagh
    Registered Users, Registered Users 2 Posts: 3,141 ✭✭✭ocallagh 


    <script type="text/javascript">
$(document).ready(function(){
var radius = 200;
var centerX = 300;
var centerY = 700;
var steps= 100;
var xValues = [0];
var yValues = [0];
var mathpi = Math.PI;
var block = $('#block');
for (var i = 1; i < steps; i++) {
var c = mathpi  * i / steps*2-mathpi /2;
xValues[i] = (centerX + radius * Math.cos(c));
yValues[i] = (centerY + radius * Math.sin(c));
block.animate({top: xValues[i], left:yValues[i] },30);
}
});
</script>

    works a little quicker.


Advertisement