변수를 .animate 단계 함수에 전달하십시오.

Question

변수를 내 단계 함수에 전달하면서 벽으로 뛰어 들어 최종 크로스 브라우저 대체 애니메이션을 처리하십시오. 여기에 일반적인 용도의 애니메이션 메서드를 만들었습니다.

Animator:function(obj,aniArgs,duration,aniEasArgs,delay,stepFunction,completeFunction){ 
    obj.stop(true,true).animate(aniArgs, 
     {duration:parseInt(duration,10),queue:false,specialEasing:aniEasArgs, 
     step:function(now,fx){  
     if($.isFunction(stepFunction)){ 
        stepFunction.apply(this,arguments); 
     };  
    },complete:function(){ 
     if($.isFunction(completeFunction)){ 
        completeFunction.apply(this,arguments); };}}); 
     }; 
} 

이것은 필요한 모든 것을 작동시키고 애니메이션으로 만듭니다. 그러나 Animator 함수를 호출하고 속성을 애니메이션하려면 step 함수를 사용하여 시도하고 있어요. 다음은 호출입니다.

var angle=0,    
    stepFunction=function(now,fx,angle){ 
    angle+=1; 
     $(this).css({"-ms-transform":"rotate("+angle+"deg)"}); 
    }; 

Animator(obj,aniArgs,speed,easing,0,stepFunction,null); 

전달되는 다른 모든 인수는 훌륭하고 체크 아웃됩니다. obj는 움직이는 객체이고 aniArgs는 모든 CSS 이름/값이 포함 된 객체 리터럴이며 속도는 속도이며 easing은 모든 CSS 이름/easing 값을 포함하는 객체 리터럴이고 stepFunction은 위에 선언 된 함수 변수이며 null입니다 실행할 완전한 기능이 없음을 나타냅니다.

모든 것이 잘 작동하지만 단계 기능으로 인해 다양한 문제가 발생합니다. 나는 실제 스텝 기능 안에서 각도의 가치를 얻는 것처럼 보이지 않는다. 단계 내에서 지금은 로그 할 수 있고 FX는 잘 작동하지만 초기 0 값으로 각도를 전달할 수 없기 때문에 증가시킬 수 있습니다.

내가 잘못 가고있는 아이디어가 있습니까? 감사!

Answer 1

. . @ Beetroot-Beetroot는 내 의견을 입력하기 전에 초를 말했기 때문에 progress function에 대한 각 호출 사이의 시간은 항상 일정하지 않으며 angle 변수에 상수 값을 추가하면 애니메이션이 잘못 보이게됩니다.

. . step 이벤트는 jQuery documentation에 따라 속성 당 틱당 두 번 이상 호출되며이 경우에는 유용하지 않은 매개 변수 집합을 사용합니다. 항상 progress 콜백에 대해 댓글을 달았지만 잘못된 이름을 사용했습니다. jQuery가 구현을 변경했는지 확신 할 수 없다. (progress 함수가 v1.8에 추가 된 것 같다.) 그러나 어떤 이유로 든이 "단계"이름이 내 마음 속에 있었다. 나는 믿을 수없는 GreenSock's tweening library가 "단계"이름을 또한 사용한다 것을 나는 생각한다.어쨌든, jQuery를에 step 및 progress 대한 서명은 다음과 같다 :

가

단계 : 함수 (번호 이제 트윈 트윈) 첫번째 파라미터는 하나 개의 특성은 애니메이션되는 값이고 두 번째는 인 jQuery의 tween 객체 (prop 속성을 포함하므로 now 값이 참조하는 속성을 알 수 있음).

진행 : 함수 (약속 애니메이션, 수 진행 번호 remainingMs) 첫번째 파라미터 애니메이션을 나타내는 a jQuery promise object이다는 제 2 파라미터는 애니메이션의 진행의 백분율과 세번째 파라미터를 나타내는 0 내지 1의 수이고 애니메이션이 끝날 때까지의 시간 (밀리 초)입니다.

. . 귀하의 목적을 위해 progress 이벤트가 분명히 필요한 것입니다. Animator 함수에서 jQuery.animate으로 전달하는 개체에서 step 속성을 progress으로 변경해야합니다.

. . 당신은 (는 애니메이션 발전의 비율을 나타내는 0과 1 사이의 값입니다으로) 각각의 호출에 progress function 내부의 현재 각도를 계산하는 요소로 progress 값을 사용해야합니다

progressFunction = function(animation, progress, lastingms) { 
    var startAngle = 0, endAngle = 180; 
    var angleRange = endAngle -startAngle; 
    var curAngle = startAngle +(angleRange *progress); 
    $(this).css({"-ms-transform":"rotate("+ curAngle +"deg)"}); 
}; 

. . 애니메이션에 더 많은 값이 필요할 때마다 동일한 로직을 사용하십시오.

progressFunction = function(animation, progress, lastingms) { 
    var startA = 0, endA = 180, rangeA = (endA -startA); 
    var startX = 254, endX = 894, rangeX = (endX -startX); 

    var curA = startA + rangeA *progress; 
    var curX = startX + rangeX *progress; 
    $(this).css({ 
    "-ms-transform":"rotate("+ curAngle +"deg)", 
    'left': curX +'px' 
    }); 
}; 

. 코드의 여러 부분에서 lib로 사용하려는 경우 자동으로이 논리를 작성하여이 동일한 논리를 계속 작성하지 않아도되도록하는 것이 좋습니다.

Answer 2

단계 기능에 대한 인수는 애니메이션 인프라에 의해 고정되어 있습니다. 고정 인수 집합과 함께 인프라에서 호출 할 때 인수를 추가 할 수 없습니다. 스텁 함수 (일종의)를 만들고 인수를 추가 한 다음 자신의 함수를 호출 할 수 있습니다.

Animator:function(obj,aniArgs,duration,aniEasArgs,delay,stepFunction,completeFunction){ 
    // initialize angle 
    var angle = 0; 
    obj.stop(true,true).animate(aniArgs, 
     {duration:parseInt(duration,10),queue:false,specialEasing:aniEasArgs, 
     step:function(now,fx){  
     if($.isFunction(stepFunction)){ 
        // convert these args into an array 
        var args = Array.prototype.slice.call(arguments, 0); 
        // add angle onto existing arguments 
        args.push(angle); 
        // call the stepFunction with new arg added on to the end 
        stepFunction.apply(this,args); 
     };  
    },complete:function(){ 
     if($.isFunction(completeFunction)){ 
        completeFunction.apply(this,arguments); };}}); 
     }; 
} 

또는, 당신은 애니메이션의 기간 동안 어떤 변수를 저장하는 애니메이션 시작 개체에 .data()를 사용할 수 있습니다. 애니메이션을 시작하기 전에 객체에 각도를 설정하고 $(this).data()을 참조하여 단계 함수 내에서 해당 객체에 액세스하고 업데이트 할 수 있어야합니다.

이렇게하면 전역 변수를 사용하지 않아도되고 동시에 여러 객체에 애니메이션을 적용 할 수 있습니다.

다른 사람들도 지적했듯이 좋은 애니메이션은 계단 함수가 호출 된 횟수가 아니라 경과 시간에 따라 매번 다음 위치를 계산합니다. 이렇게하면 브라우저에서 진행되는 다른 작업으로 인해 애니메이션이 약간 뒤로 떨어지는 경우에도 정시에 머무를 수 있습니다.