다음 프로토 타입에서 애니메이션 도구를 만드는 방법

Question

최근에이 질문에 대한 답을 얻었습니다.이 문제를 해결하는 방법은 무엇입니까? 디자이너가 애니메이션을 구성 할 수있는 도구를 만듭니다. 이를 용이하게하기 위해 이러한 애니메이션을 렌더링 할 수있는 JavaScript로 AnimationSequence를 구현하십시오. 디자이너가 막대 요소의 충만을 구성하기를 원한다면 순서의 각 단계의 첫 번째 요소의 수입니다

예를 들어, AnimationSequence의 사용이

var barSequence = new AnimationSequence(bar, [ 
    [100, { width: '10%' }], 
    [200, { width: '20%' }], 
    [200, { width: '50%' }], 
    [200, { width: '80%' }], 
    [300, { width: '90%' }], 
    [100, { width: '100%' }] 
]); 

barSequence.animate(); 

과 같을 것 단계가 발생할 때까지의 시간 (밀리 초)이며 두 번째 요소는 여러 CSS 속성을 포함하는 객체입니다.

어떻게 AnimationSequence를 구현하겠습니까?

Answer 1

큐 시스템을 작성한 다음 첫 번째 값을 기준으로 각 애니메이션 프레임을 호출해야합니다. 그래서 당신은 HTML을 것

분명히

var AnimationSequence = function(elem, opts) { 
    this.element = (typeof elem == "object") ? elem : $(elem); //jQuery 
    this.options = opts; 
    this.queue = []; 
    this.timer = 0; 
    this.init(opts); 
} 
AnimationSequence.prototype = { 
    init: function(opts) { 
     var that = this; 
     for(var i = 0, l = opts.length; i < l; i++) { 
      this.queue.push({delay: opts[i][0], command: opts[i][1]}); 
     } 
     this.deQueue(); 
    }, 
    deQueue: function() { 
     if(this.queue.length) { 
      var animation = this.queue.shift(), 
       that = this; 
      this.timer = setTimeout(function() { 
       that.element.animate(animation.command, function() { 
       that.deQueue(); 
       }); 
      }, animation.delay); 
     } 
    } 
}; 
$(function() { 
    var barSequence = new AnimationSequence(".bar", [ 
     [100, { width: '10%' }], 
     [200, { width: '20%' }], 
     [200, { width: '50%' }], 
     [200, { width: '80%' }], 
     [300, { width: '90%' }], 
     [100, { width: '100%' }] 
    ]); 
}); 

이 같은 ... ...

<div id="bar-holder"> 
    <div class="bar"></div> 
</div> 

과 CSS ...

#bar-holder { 
    width: 100%; 
    padding: 5px; 
    background: #ccc; 
} 
.bar { 
    height: 25px; 
    background: red; 
} 

은 ... https://jsfiddle.net/kprxcos4/ jsfiddle 예를 들어 작업 분명히 약간 쇠고기를 원할 수도 있지만, 그것은 인수와 사용자 정의 필드를 처리 할 수있는 애니메이션 대기열 시스템의 시작입니다.