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?

Answer 1

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/

Answer 2

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.

Answer 3

在摆弄小提琴手并使用此帖子后，使用了自定义jquery缓动功能帮助，使它能够像我想要的一样工作http://jsfiddle.net/b6L8M/24/，它与WP7加载大致相同！