如何從下面的原型創建一個動畫工具

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

您需要構建一個隊列系統，然後根據第一個值調用每個動畫幀。因此，像這樣......

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%' }] 
    ]); 
}); 

很明顯，你將有HTML ...

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

和CSS ...

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

工作的jsfiddle例如... https://jsfiddle.net/kprxcos4/ 顯然你可能想要加強它，但這是一個可以處理參數和自定義字段的動畫隊列系統的開始。