taralino

Animationen

Die taralino-Bibliothek bietet auch die Möglichkeit, auf einfache Art und Weise kleine Animationen zu erstellen. Dazu müssen wir jedoch zunächst folgende Konzepte verstehen:

Die Funktion setup

Sofern eine Funktion mit dem Namen setup definiert ist, so wird diese genau dann (einmalig) automatisch aufgerufen, wenn die aktuelle Seite vollständig geladen ist.

Zur Referenz

Und direkt als Ergänzung dazu:

Die Funktion loop

Sofern eine Funktion mit dem Namen loop definiert ist, so wird diese automatisch und sich ständig wiederholend aufgerufen.

Zur Referenz

Dank der Funktionen setup und loop lassen sich nun Animationen definieren: Beispielsweise kann eine Canvas-Zeichenfläche innerhalb der setup-Funktion spezifiziert werden und die loop-Funktion dient zum Zeichnen von Formen in Abhängigkeit der Zeit. Dies führt uns schließlich zu folgender globalen taralino-Funktion:

time()

Die Funktion time() gibt die Zeit bzw. die Verweildauer auf der aktuellen Seite als rationale Zahl in Sekunden zurück.

Zur Referenz

Damit haben wir alle Grundlagen geschaffen, um das folgende Beispiel verstehen zu können:

Beispiel

Eine erste Animationen unter Verwendung der Konzepte zuvor. Zu beachten ist dabei der Befehl Canvas.clear, um die Zeichenfläche bei jedem Aufruf der Funktion loop zunächst zu bereinigen.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

function setup() {
  Canvas.init([-2,2], [-2,2], {width:300, background:"black"});
};

function loop() {
  var t = time();
  Canvas.clear();
  Canvas.circle(0, 0, 1.2, {fill:"red"});
  Canvas.circle(0, 0, 0.8, {fill:"black"});
  Canvas.rect(0, 0, 3, 0.3, {fill:"black", angle:t});
};

</script>
</body>
</html>

Vorschau Download Kopie speichern

Frames per Second

Es kann auch beeinflusst werden, wie häufig die loop-Funktion pro Sekunde aufgerufen werden soll:

Animation.init()

Dem Befehl Animation.init kann die Option fps (frames per second) übergeben werden, um die Anzahl der loop-Funktionsaufrufe pro Sekunde zu definieren.

Zur Referenz

Damit sollte der Befehl Animation.init innerhalb der setup-Funktion definiert werden. Falls der Befehl (wie im Beispiel oben) gar nicht verwendet wird, dann wird die loop-Funktion so häufig wir möglich aufgerufen (maximal etwa 80 Aufrufe pro Sekunde).

Beispiel

Animation mit vier loop-Funktionsaufrufen pro Sekunde.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

function setup() {
  Canvas.init([-2,2], [-2,2], {width:300, background:"black"});
  Animation.init({fps:4});
};

function loop() {
  var t = time();
  Canvas.clear();
  Canvas.circle(0, 0, 1.2, {fill:"red"});
  Canvas.circle(0, 0, 0.8, {fill:"black"});
  Canvas.rect(0, 0, 3, 0.3, {fill:"black", angle:t});
};

</script>
</body>
</html>

Vorschau Download Kopie speichern