taralino

Das Animation-Paket

Das Animation-Paket bietet eine Möglichkeit, Bewegungen ins Spiel zu bringen. Insbesondere werden Befehle innerhalb einer loop-Funktion in regelmäßigen Abständen wiederholt aufgerufen, sodass Animationen erstellt werden können.

Die vollständige Dokumentation findest du hier:

Zur Referenz

Wichtig im Zusammenhang mit Animationen sind die speziellen Funktionen setup() und loop(), die in der Konzept-Referenz dokumentiert sind:

Zur Referenz

Beispiel

Das Beispiel simuliert einen sich drehenden Kreis.

<!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:320, 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

Beispiel

Ein weiteres Beispiel mit simulierter Bewegungsunschärfe.

<!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:320, background:[20,20,20]});
};

function loop() {
  var t = time();
  Canvas.rect(0, 0, 4, 4, {fill:[0,0,0,40]});
  Canvas.circle(Math.sin(t), Math.cos(3*t), 0.4, {fill:"yellow"});
  Canvas.circle(Math.cos(2*t), Math.cos(-2*t), 0.4, {fill:"green"});
  Canvas.circle(Math.sin(-4*t), Math.sin(t), 0.4, {fill:"red"});
  Canvas.circle(Math.cos(-3*t), Math.sin(-2*t), 0.4, {fill:"blue"});
};

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

Vorschau Download Kopie speichern