Javascript 如何从以下原型创建动画工具

最近有人问我一个问题：如何解决这个问题？创建允许设计师配置动画的工具。为了促进这一点，可以在JavaScript中实现一个动画序列来渲染这些动画

例如，如果设计师想要配置条形元素的填充，则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属性的对象

---

如何实现动画序列？

您需要构建一个队列系统，然后根据第一个值调用每个动画帧。所以像这样的事情

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

正在使用JSFIDLE示例。。。

---

显然，您可能希望对其进行一些增强，但这是可以处理参数和自定义字段的动画队列系统的开始。

如果您想要jQuery，我认为实现类似

barSequence=$（selection.AnimationSequence（{/*…*/}），原型将需要以任何方式插入jQuery，您应该看看。如果您想在某个事件上触发动画，请从init函数中删除“this.deQueue（）”调用，并在事件上调用该函数，如$（“.click”）.click（函数（）{barSequence.deQueue（）；}）；非常感谢！：）我很乐意，把它作为答案，否则投赞成票就好了；）它不允许我：（我想，一旦回购利率提高，我就会这么做
<div id="bar-holder">
    <div class="bar"></div>
</div>

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