Question

您好我已经在多个平台上运行了jquery / svg / js动画：

然而，在“转身”之后动画之间出现了一个小故障并且步行有一个跳跃。我错误地翻译了什么吗？

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

＆LT; ----左

转＆GT; ----右 - ＆GT;

见上面的小提琴

逻辑：

//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();
    }
}

Javascript SVG动画帧之间的故障

0 个答案: