tiny-fx.js - a tiny JS Effect Framework

Download

tiny-fx.js [5533b] - tiny-fx-min.js.gz [1394b]

Hinweis

Die Funktion t.fx benötigt lediglich tiny.js und tiny-classname.js. Andere Scripte sind nicht erforderlich.

Verwendung

Die Funktion nimmt als Parameter ein Options-Objekt an und gibt das FX-Objekt zurück, welches verschiedene Methoden hat, etwa so:

var myanim = t.fx({
    selector: '#outer[step] .activate, #outer[-step] .deactivate',
    animate: { 
        color: {start: '#000', end: '#foo', easing: 'linear'}
    },
    steps: 25, ms: 60
});

CSS-Animationen kann man auch bereits im CSS statisch berechnet haben, dann kann auf den Parameter animate verzichtet werden.

Bezeichnung	Default	Bedeutung
selector		CSS-Selektor für das animierte Objekt, darin kann [step] oder [-step] als Platzhalter für die Schritt-CSS-Klasse zum Hoch- bzw. Herunterzählen verwendet werden.
parent	[1]	Ein CSS-Selektor für das Parent-Objekt, welches die Schritt-CSS-Klasse vergeben bekommt.
animate	[2]	Ein Objekt mit den CSS-Eigenschaften, die animiert werden sollen. Jede Eigenschaft hat den Namen eines CSS-Attributs, wobei in CamelCase geschriebene Attribute automatisch in CSS-Notation übersetzt werden. Statische Attribute {position: 'absolute'} Attribute in CamelCase vs. Attribute in CSS-Notierung {marginLeft: {start: '10px', end: '20px'}, 'margin-right': {start: '10px', end: '10px'}} Easing als Bezeichner oder Funktion {color: {start: '#000', end: '#fff', easing: 'sinus'}, backgroundColor: {start: '#fff', end: '#fff', easing: function(start, delta, s) { ... }} Die Werte bei `start` und `end` müssen in der gleichen Einheit sein. Die Zahlengenauigkeit von Start wird bei allen Werten übernommen, d.h. wenn man "10.0em" als Startwert hat, werden die Zwischenschritte genau eine Nachkommastelle haben (Kurze #rgb-Farben werden in jedem Fall erweitert).
steps	5	Anzahl der Schritte
ms	30	Schrittdauer in Millisekunden
repeat	null	Animation dauerhaft wiederholen (auf true setzen)
multiple	null	Nur zu Testzwecken - ermöglicht das parallele Laufen mehrerer Animationen mit dem gleichen Objekt, kann zu Darstellungsfehlern führen!
before	null	Callback, welches vor der Animation ausgeführt wird.
each	null	Callback, welches bei jedem Animationsschritt ausgeführt wird.
after	null	Callback, welches nach der Animation ausgeführt wird.

Optional; wird ansonsten aus dem selector bestimmt.
Optional, falls nicht angegeben, wird von einem vorberechneten CSS ausgegangen.

Methoden

Jedes mit der Funktion erstellte Animation-Objekt kennt die folgenden Methoden:

.run() - Starte die Animation
.stop() - Stoppt die Animation komplett
.pause() - Pausiert die Animation
.resume() - Setzt die Animation fort
.destroy() (nur wenn animate-Option gesetzt) - entfernt das CSS

Instanzen

In t.fx.instances befindet sich ein Array, in dem alle Effekte gespeichert sind, um externen Zugriff zu ermöglichen.

Easing

Beim Easing handelt es sich um die Fähigkeit, betreffende Werte auch anders als linear zu interpolieren. Vordefinierte Funktionen sind

linear
easein
easeout
easeboth
halfcos
sinus

Diese Funktionen befinden sich in t.fx.fn.easing und können auch angepaßt oder ergänzt werden. Alternativ kann man bei einem Parameter statt des Namens der easing-Funktion auch eine Funktion übergeben.

Demo

Dies ist eine kleine Demonstration des Effekt-Frameworks tiny-fx

Stop | Pause | Resume

Mit tiny-fx kann man auch mehrere Effekte nebeneinander laufen lassen.

Stop | Pause | Resume

Quelltext

var demo=t.fx({
    selector: '#demo[step] #sel',
    animate: { 
        background: { start: '#fff', end: '#dcc', easing: 'sinus' },
        color: { start: '#000', end: '#00f', easing: 'halfcos' },
        paddingLeft: { start: '0.00em', end: '12.00em', easing: 'sinus' }
    },
    steps: 25,
    ms: 60,
    repeat: true
});
var demo2=t.fx({ 
    selector: '#demo2[step] #sel2', 
    animate: { 
        background: { start: '#fff', end: '#cdc', easing: 'halfcos' }, 
        color: {start: '#000', end: '#0d0', easing: 'sinus' }, 
        paddingRight: { start: '0.00em', end: '12.00em', easing: 'sinus' } 
    }, 
    steps: 25, 
    ms: 90, 
    repeat: true 
});
demo.run();
demo2.run();