Javascript SVG动画在帧之间出现小故障

您好，我已经制作了一个jquery/svg/js动画，可以在多个平台上运行：

但是，在转弯和行走之间的动画中存在一个小故障，即跳跃。我是不是翻译错了什么

该流由jquery滑块控制，如果滑块位于当前位置值的左侧，则应该向左移动。向右移动，如果它位于当前位置值的右侧，则向后移动

--对-> 看到上面的小提琴了吗

逻辑是：

//States at startup:
var walkIndex = 0;
var position = 500;
var turnIndex = 0;
var scaleX=1;
var translationCompensationWalkX = 0;
var translationCompensationTurnX = 0;

//Init called by slider:
Element.prototype.walk=function (){
    walk();
    setTimeout(hideAll,100);
    clearInterval(walkTimeout);
    walkTimeout = setInterval(walk, 100);
}
function setTranslationCompensation(){
    if(directionToWalkLeft){
        translationCompensationWalkX = 0;
        translationCompensationTurnX = 0;
    }else{
        translationCompensationWalkX = 600;
        translationCompensationTurnX = 600;
    };

}

function translateImages(){
    //Move all images visible and hidden:
    $('#walkGroup').stop().animate({
        svgTransform: 'translate('+(translationCompensationWalkX+position)+',0) scale('+scaleX+',1)'
    },0);
    $('#soundWave').stop().animate({
        svgTransform: 'translate('+500/position+',0) scale('+(position)/500+',1)'
    },0);
}

function step(){
    //Increase step:
    if(directionToWalkLeft){
        position -= 20;
    }else{
        position+= 20;
    };
    //Switch to next image;
    $('#walk'+walkIndex).hide();
    walkIndex = (walkIndex+1)%25+1;
    $('#walk'+walkIndex).show();
}

function walk(){
    setTranslationCompensation();
    //Check if end position has been reached in left or right direction.
    if((position > endPoint && directionToWalkLeft) || (position < endPoint && !directionToWalkLeft) ){
        step();
        translateImages();


        //End position reached prepare for rotation if facing the right direction:
    }else{

        //translateImages();
        $('#turnGroup').stop().animate({
            svgTransform: 'translate('+(translationCompensationTurnX+position)+',0) scale('+scaleX+',1)'
        },0);

        turnIndex = 1;
        $('#turn'+turnIndex).show();

        $('#walk'+walkIndex).hide();


        if(!currentDirectionLeft && !directionToWalkLeft){
            console.log('finished walking and should turn');
           Element.prototype.turn();
        }else if (!animationCompleted){
            //completed and facing in the right direction:
            clearInterval(walkTimeout);
            directionToWalkLeft = true;
            console.log('Should show static position: '+translationCompensationTurnX+position+ '. '+ scaleX );
            animationCompleted= true;
            $('#slider').slider('enable');
        }

    }


}
//Init turn
Element.prototype.turn= function(){
    turnIndex=1;
    $('#turn'+turnIndex).show();
    clearInterval(walkTimeout);
    walkTimeout = setInterval(turn, 100);
}

function turn(){

    if(turnIndex<40){
        $('#turn'+turnIndex).hide();
        turnIndex = (turnIndex+1)%41+1;
        $('#turn'+turnIndex).show();

    }else{
        currentDirectionLeft =! currentDirectionLeft;
        clearInterval(walkTimeout);
        scaleX=scaleX*(-1);
        walk();
        walkTimeout = setInterval(walk, 100);

    }
}

function hideAll(){
    for(var i =1; i<41; i++){
        $('#walk'+i).hide();
        $('#turn'+i).hide();
    }
}

---

你的小提琴不是用Chrome或FF为我画的。是的，它画的是一个盒子而不是导入的图像。然而，仍然可以看到故障。这是原来的小提琴应该画得更好了。。。