Jquery finding the right easing function

Question

Hi all im trying to create a loading animation with html and JQuery that looks like the windows phone 7 loading animation. I have gotten this far

http://jsfiddle.net/b6L8M/5/

But the easing function does the opposite of what i want, i want it to go fast when its on the edges and then slow down when it comes to the center.

when looking at http://jqueryui.com/demos/effect/easing.html it does not seem that there is a built-in function for that, so how would i create that function?

Jasper · Answer 1 · 2012-01-27T00:52:24.737

2

If you split-up your animation into two parts you can ease-in to the center and ease-out of the center:

function moveDot(dotItem, delay) {
    var dotItem = $(dotItem);
    dotItem.delay(delay * 200).css('left', '0%').animate({left: '50%'}, 1000, 'easeOutCirc',  function() {
        dotItem.animate({left : '100%'}, 1000, 'easeInCirc', function () {
            moveDot(dotItem[0], 0);
        });
    });
}

I also cached the $(dotItem) selection so it doesn't create a hiccup mid-animation while creating another selection (not a big chance of this happening but hey :) ).

Here is a demo: http://jsfiddle.net/b6L8M/13/

edited Jan 27 '12 at 00:52

answered Jan 26 '12 at 23:35

Jasper

75,717
14
151
146

Doesn't the OP want something like [this](http://jsfiddle.net/cambraca/b6L8M/12/)? (I just switched In and Out in your code) – cambraca Jan 27 '12 at 00:35
Yeah I think you're right, the basic point is the same however. Use two animations, ease in for one and ease out for the other. Thanks for the comment. – Jasper Jan 27 '12 at 00:51
I was messing around with this, I like this animation (this is broken into four animations): http://jsfiddle.net/b6L8M/14/ – Jasper Jan 27 '12 at 00:55
This one looks like the boxes are bouncing across the page: http://jsfiddle.net/b6L8M/16/ (gotta be using a newer browser that supports transforms and transitions) – Jasper Jan 27 '12 at 01:07
Ok, last one, this one makes the dots bounce over the "Loading" text: http://jsfiddle.net/b6L8M/17/ – Jasper Jan 27 '12 at 01:09
Ok you guys are creative, but the main problem here is that we more or less get a total stop in the middle! i just want a slow down. But Jasper thanks a lot for perfomance tip modified the code a bit http://jsfiddle.net/b6L8M/21/ but the problem is still there i do want a slow down in the middle but not a total stop... the dots never collide on windows phone... – Peter Jan 27 '12 at 07:50
Here's an example of making them not collide: http://jsfiddle.net/b6L8M/22/. It's probably not exactly what you want but if you use three different easing types you can probably get what you want done. – Jasper Jan 27 '12 at 17:29

score 1 · Answer 2 · edited Jan 27 '12 at 07:31

Sometimes, you have to use more than one animate function to do what you want.

I don't know how the windows phone 7 animation looks but I tried this according on what you said :

$(dotItem).delay(delay * 200).css('left', '0%').animate({left: '50%'}, 1000, 'easeOutQuart',  function() {
    $(this).animate({left: '100%'}, 1000, 'easeInQuart', function() {
        moveDot(dotItem, 0);
    });
});

The first one, easeOutQuart, is fast then slow down. The second is slow then accelrate. I used the chaining system, but it makes the elements stop during some ms. You also can use a "delay" to do so without stop.

This causes a total stop of them, they should never collide. — Peter, Jan 27 '12 at 07:54

score 0 · Accepted Answer · edited May 23 '17 at 12:27

0

After fiddeling around in fiddler and using this post Help with custom jquery easing function i got it to work like i wanted http://jsfiddle.net/b6L8M/24/ it's more or less identical to the WP7 loading!

edited May 23 '17 at 12:27

Community

1
1

answered Jan 27 '12 at 23:42

Peter

37,042
39
142
198

Jquery finding the right easing function

3 Answers3