So erstellen Sie ein Animationstool aus dem folgenden Prototyp

Question

Ich wurde vor kurzem diese Frage gestellt: Wie dieses Problem anzugehen? Erstellen Sie ein Werkzeug, mit dem Designer Animationen konfigurieren können. Um dies zu ermöglichen, implementieren Sie eine AnimationSequence in JavaScript, die diese Animationen rendern kann.

Zum Beispiel, wenn ein Designer die Füllung eines Stabelements, die Verwendung von AnimationSequence würde in etwa so aussehen

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(); 

, wo das erste Element jeder Schritt in der Folge konfigurieren wollte, ist die Zahl der Millisekunden, bis der Schritt auftritt und das zweite Element ein Objekt ist, das eine beliebige Anzahl von CSS-Eigenschaften enthält.

Wie würden Sie eine AnimationSequence implementieren?

Answer 1

Sie müssen ein Warteschlangensystem erstellen und dann jeden Animationsrahmen basierend auf dem ersten Wert aufrufen. So etwas wie dieses ...

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

Offensichtlich würden Sie die html haben ...

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

Und Css ...

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

Arbeiten jsfiddle Beispiel ... https://jsfiddle.net/kprxcos4/ Offensichtlich möchten Sie es vielleicht ein wenig aufpeppen, aber das ist der Anfang eines Animationswarteschlangensystems, das mit Argumenten und benutzerdefinierten Feldern umgehen kann.