자바 스크립트 타임 라인 애니메이션 (setTimeout 정확도 문제)

JS에서 간단한 애니메이션 클래스를 작성하기 시작했습니다.이 클래스는 Zepto.js 애니메이션 기능을 사용하지만 타임 라인과 유사한 기능을 추가합니다. 그래서자바 스크립트 타임 라인 애니메이션 (setTimeout 정확도 문제)

alpha : function(parameters, callback, delay){ 

    var target = parameters.target; 
    var duration = parameters.duration; 
    var easing = parameters.easing; 
    var value = parameters.value; 

    if(delay){ 
     setTimeout(function(){run();},delay*1000); 
    } else { 
     run(); 
    } 

    function run(){ 
     $(target).anim({opacity:value},duration,easing); 
     if(callback){ 
      callback(); 
     } 
    } 


}

가

play : function(callback){ 

     for(var i=0; i<Animator.timeline.buffer.length; i++){ 

      Animator.timeline.buffer[i].animation(); 

     } 

     if(callback){ 
      callback(); 
     } 

    }

의 setTimeout 애니메이션 직접 간다 :

타임 라인 자체가 재생() 함수가 호출 될 때 그 안에 포함 된 기능들을 실행하는 간단한 배열이며 기본적으로 타임 라인은 버퍼 배열에 배치 된 setTimeout-ed 함수를 실행합니다.

이 접근법은 거의 WebKit 애니메이션에서 의도 한대로 작동하지만 이미지 시퀀스 (이미지의 src를 변경하는 setInterval을 사용하는 애니메이션)를 수행 할 때 몇 가지 문제가 발생했습니다. JS 타이머는 지정된 시간에 실행을 보장하지 않으므로 애니메이션이 늦게 실행되는 경우가 있습니다. 그 중에는 setInterval이 포함되어 있기 때문일 수 있습니다.

해결 방법에 대한 아이디어가 있으십니까? 모든 애니메이션을 콜백으로 포함 시키면 많은 문제가 해결되지만 타임 라인 루프 내부에서이를 수행하는 방법을 알지 못한다는 것을 알고 있습니다. 또한 모든 기능을 직접적으로 (타임 라인을 사용하지 않고) 호출하면 콜백을 읽을 수 없게됩니다. 참고로

내 애니메이션 클래스의 시퀀스 기능 : 또한

sequence : function(parameters, callback, delay){ 

    var target = parameters.target; 
    var path = parameters.path; 
    var baseName = parameters.baseName; 
    var digits = parameters.digits; 
    var extension = parameters.extension; 
    var frames = parameters.frames; 
    var loop = parameters.loop; 

    if(parameters.interval){ 
     var _interval = parameters.interval 
    } else { 
     var _interval = 15; 
    } 


    var currentFrame = 0; 
    var imageUrl = ''; 

    var fileName = baseName; 

    for(var i=0; i<=digits; i++){ 
     fileName+='0'; 
    } 

    if(delay){ 
     setTimeout(function(){runSequence();},delay*1000); 
    } else { 
     runSequence(); 
    } 

    function runSequence(){ 

     var interval = setInterval(function(){ 

     if(currentFrame >= frames){ 
      currentFrame = 0; 
      if(!loop) { 
       clearInterval(interval); 
       if(callback){ 
        callback(); 
       } 
      } 
     } else { 
      imageUrl = path+fileName.substring(0, fileName.length-currentFrame.toString().length)+currentFrame+"."+extension; 
      $(target).attr('src',imageUrl); 
      currentFrame++; 
     } 

    },_interval); 

    } 

}

이 클래스를 사용하여 생성 된 애니메이션의 샘플 : 추가 참고로

Animator.timeline.append(function(){ 
       Animator.alpha({'target':'#logo', 'value':1, 'duration':1, 'easing':'ease-out' }); 
      }); 

      Animator.timeline.append(function(){ 
       Animator.sequence({'target':'#sequence', 'path':'images/sequences/index/', 'baseName':'nr1_', 'digits':3, 'extension':'png', 'frames':50},'',1.5); 
      }); 

      Animator.timeline.append(function(){ 
       Animator.scale({'target':'#text', 'width':.5, 'height':.15, 'duration':1, 'easing':'ease-in-out'},'',3.2); 
      }); 

      Animator.timeline.append(function(){ 
       Animator.alpha({'target':'#link', 'value':1, 'duration':1,'easing':'ease-out'},'',4.7); 
      }); 

      Animator.timeline.play();

를 I 조준 된 그게 도움이된다면 AS3에서 GreenSock과 비슷한 것을 만들 수 있습니다.

감사합니다.

출처

2011-08-19 dbozhinovski