How to make a jQuery step animation?

Question

I have searched for anything on how to animate a color wheel using jquery to step through the defined colors in order and I can't seem to find anything.

What I'm looking to do is spiral an effect by "opening" slivers of the colors at 45 degrees and open them in order like a spiral and then close them in order. Starting from blank and ending with blank. By open I mean some kind of slide effect (hard to think of the correct term) but think of a loading gif spiral that looks like it's spiraling. (Like the mac rainbow wheel, only making the previous colors disappear after cycling through.)

I'm using jquery and would prefer a jquery solution so I don't have to worry about browser compatibility issues, but I could accept css transitions as a last resort.

I've attached some images to give a better visual idea. I have no code right now but my plan was just to have a div inside the body where the jquery would draw or do this animation. I really don't even know where to start so I don't have anything to build from nor do I really know the exact terminology I'm looking for. Hopefully my images will give a better understanding. Thanks.

Answer 1

I used moredemons's answer as a basis, using CSS triangles. It does the same thing, but it properly separates the CSS so you don't have to edit the JS to edit the colors. The JS is also simpler, doesn't rely on if/elses for all 16 states.

The main benefit of a programatic solution over a gif is that you can customize the colors, sizes, animation rate more easily.

• Small, green, blue, fast
• Big, red, blue, slow
• Big with a different arrangement

Initial HTML All triangles hidden

<div id ="ct" >
    <div class="triangle triangle-nw triangle-hide-tr triangle-hide-bl"></div>
    <div class="triangle triangle-ne triangle-hide-tl triangle-hide-br"></div>
    <br/>
    <div class="triangle triangle-sw triangle-hide-tl triangle-hide-br"></div>
    <div class="triangle triangle-se triangle-hide-tr triangle-hide-bl" ></div>
</div>

CSS

.triangle {
    font-size:0;
    border: 50px solid transparent;
    display: inline-block;    
    width: 0;
    height: 0;
    margin:0;
    padding: 0;
}

.triangle-se {
    border-color: red red blue blue;
}

.triangle-sw {
    border-color: red blue blue red;
}

.triangle-nw {
    border-color: blue blue red red;
}

.triangle-ne {
    border-color: blue red red blue;
}

.triangle-hide-tl {
    border-top-color: transparent;
    border-left-color: transparent;
}

.triangle-hide-tr {
    border-top-color: transparent;
    border-right-color: transparent;    
}

.triangle-hide-br {
    border-bottom-color: transparent;
    border-right-color: transparent;        
}

.triangle-hide-bl {
    border-bottom-color: transparent;
    border-left-color: transparent;        
}

JS

setInterval((function(){
    var index = 0;
    // Which square is going to be modified in each stage (16 stages)
    var map = [3,3,2,2,0,0,1,1,3,3,2,2,0,0,1,1];
    // The clases to add and remove
    var classesToChange = ['tr', 'bl', 'br', 'tl', 'bl', 'tr', 'tl', 'br'];           
    return function() {
        var el = $('#ct div.triangle').eq(map[index]);
        if (index < 8) {
            // Showing pieces
            el.removeClass('triangle-hide-' + classesToChange[index] );
        } else {
            // Hiding pieces
            el.addClass('triangle-hide-' + classesToChange[index - 8] );
        }
        index++;
        if (index >= 16) {
            index = 0;
        }
    };
})(), 200);

Answer 2

I know my solution is weird a lot, but there's no another solution as I see. I used borders to create 45° corners and jQuery animate with step on fake element.

So, look at this fiddle: http://jsfiddle.net/WYKmQ/1/

Answer 3

You're simply looking for an animated gif. Why overcomplicate things with javascript when it's not needed. A gif will show perfectly in any browser.

Here, it took me 3 minutes to do this. Less time than any code.

Answer 4

Update your example >> mi-creativity.com/test/color-wheel

You can achieve the same above effect by using what so called image-sprites, you include all of them in one image, queuing them vertically or horizontally and changing the background-position just like in this example (you can view the page source to know how to do it)

mi-creativity.com/test/fading-sprite-background

The above example uses a jquery plugin called jquery.bgpos.js as will as a .png image

---

Another way of doing it you can set each of above images as a back-ground image each for a different class wit ha numerical value and you change the div class by making use of toggleClass jquery property like in this example - check the page source -:

mi-creativity.com/test/fading-sprite-background

Which I prefer because it is easier to modify it and add more frames if you want.

P.S: you don;t need another blank frame at the beginning, just move the last frame to the beginning, because if you used two blank frames that would affect the smoothness of the motion