CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ali Al-Naimi
Ali Al-Naimi

Reputation: 738

jQuery Circles animation on circle path

I'm trying to make big circle and move divs along the circle's circumference.

Each div must change the content inside the big circle.

The number of div(s) must be dependent on how many are fetched from database (from table category).

I tried to do this and modified the code by putting .eq() but the problem with .eq is that next circle will appear after that circle, all put in the same place. I want them all to appear at the same time like this without repeating functions

Upvotes: 2

Views: 3014

Answers (1)

noel
noel

Reputation: 2145

Updated your fiddle:

http://jsfiddle.net/wyW2D/1/

Used:

var t = -1.6;
var t2 = -1.6;
var x = 0;
var t = [-1.6, -1.6, -1.6], // starting angle in radians for each circle

    delta = [0.05, 0.03, 0.02], // change in radians for each circle
                                // e.g the first moves fastest, the last 
                                // slowest. if this gets too big, the 
                                // movement won't look circular, since the
                                // animation is really a bunch of straight lines

    finish = [1.4, 1.0, 0.6];   // the stopping point in radians for each
                                // circle. if the circle size changes, this
                                // may need to change

function moveit(i) {
    t[i] += delta[i];    // move the angle forward by delta
    var r = 300;         // radius (the .inner div is 600 x 600)
    var xcenter = -30;   // center X position: this reproduces the .inner horizontal
                                // center but from the body element
    var ycenter = 420;   // center Y position: same here but vertical

    // Basic trig, these use sin/cos to find the vert and horiz offset for a given
    // angle from the center (t[i]) and a given radius (r)
    var newLeft = Math.floor(xcenter + (r * Math.cos(t[i])));
    var newTop = Math.floor(ycenter + (r * Math.sin(t[i])));

    // Now animate to the new top and left, over 1ms, and when complete call
    // the move function again if t[i] hasn't reached the finish.
    $('div.circle'+(i+1)).animate({
        top: newTop,
        left: newLeft,
    },1, function() {
      if (t[i] < finish[i]) moveit(i);
    });
    // You can slow down the animation by increasing the 1, but that will eventually
    // make it choppy. This plays opposite the delta.
}

// Start the ball rolling
$("document").ready(function(e) {
  moveit(0);
  moveit(1);
  moveit(2);
});

This was a quick change to reduce the code to one function that used arrays (t, delta, finish) to keep track of the three circles. It could be improved to accept arbitrary circles, of any size, at any starting / ending angle. Also, this kind of animation is much easier with CSS. It is simple to specify and has much better performance.

Upvotes: 1

Related Questions