Блог

Я в основном анимирую объект по волне sin. Однако он пересекает сегмент только один раз, тогда как мне нужно, чтобы он постоянно проходил.

Я повторяю анимацию рекурсивно, чтобы она следовала по пути, а не так, как обычно перезапускается в начале.

Однако каждое повторение цикла опускает элемент немного ниже в начале следующего цикла.

Как я могу заставить это плавно следовать кривой?

Посмотреть демонстрацию: http://jsfiddle.net/nfeZF/121/

 function float(dir){
    var x_current = $("div").offset().left;
    var y_current = $("div").offset().top;
    var SineWave = function() {
        // this is called every step in the animation over 6000 miliseconds, updating the x/y coordinates
        // with sin rules applied to follow the curve
        // repeating this cycle (each timeout callback) drops the 
        // object about 50-100 pixels down from where it left off
        this.css = function(p) {
            var s = Math.sin(p*10);
            if (!dir){
                // swap the direction to continue on the path
                s = -s;   
            }
            var x =  300-p * 300;
            var y = s * 100   100;
            var o = ((s 2)/4 0.1);
            // add the current x-position to continue the path, rather than restarting
            return {top: y   "px", left: x_current   x   "px"};
        } 
    };

    $("div").animate({
        path: new SineWave
    }, 6000, 'linear', function(){
        // avoid exceeding stack
        setTimeout(float(!dir), 0);
    });

}