HTML5 und Animation - Tutorial für Anfänger

Ohne Plug-in animieren - HTML5 statt Flash

• Der Vorteil von Animationen in HTML5 besteht darin, dass diese ohne zusätzlich Browser-Plug-ins oder Erweiterungen auskommen. Die einzige Voraussetzung, um in den Genuss einer solcherart animierten Website zu kommen, ist ein aktueller Browser, der HTML5 interpretieren kann. Mit Ausnahme des Internetexplorers 8 sind sowohl neue Chrome- als auch Firefox- oder Safaribrowser in der Lage, diese Animationen darzustellen.
• In der nachfolgenden Anleitung wird eine einfache, lineare Animation erläutert, die das "canvas"-Tag verwendet sowie mit Javascript arbeitet. Animation mithilfe des Canvas-Tags erfolgt in 3 Schritten. Zunächst wird per Javascript ein zu animierendes Objekt erzeugt und auf der "Canvas"-Fläche (Canvas heißt übersetzt "Leinwand") platziert. Darauf folgen ein sofortiges Löschen des Objekts und die erneute Zeichnung eines Objekts an einer neuen Position.

Bewegung im Browser - Tutorial einer einfachen Animation

1. Öffnen Sie Ihre Webeditor Software, beispielsweise "Dreamweaver", in der Skriptansicht. Eine Testversion des WYSIWYG-Editors von Adobe ist per Download erhältlich.
2. Erstellen Sie zunächst das Grundgerüst einer herkömmlichen HTML-Datei mit dem umfassenden HTML-Tag, dem Head- und dem Bodybereich sowie einem Scriptelement für das benötigte Javascript sowie einem Style-Element, mit dem Sie Stylesheet-Angaben einbinden.
3. Im Body notieren Sie den "canvas"-Tag mit den Attributen "id" sowie Höhe und Breite. Er sähe dann wie folgt aus, beispielsweise "<canvas id="canvas" width="360" width="240"></canvas>".
4. Um den Canvas-Bereich deutlich im Browser ausfindig zu machen, weisen Sie ihm eine umlaufende Linie zu. Für alle Canvas-Elemente gültig notieren Sie diese in den Stylesheet-Angaben wie folgt: " canvas {border:#000 1px solid;<style>". Diese Linie wäre 1 Pixel dick, durchgehend und hätte eine schwarze Farbe.
5. Das Erstellen bzw. Zeichnen des canvas-Elements muss nun ausgelöst werden. Dies realisieren Sie entweder über einen Button, dem Sie ein "onclick"-Event zuordnen, Sie können diese Routine aber auch mit anderen Events verbinden, etwa dem Laden der Webseite. Im Fall eines Buttons sähe dies folgerndermaßen aus: "<button onclick="draw (0,0)" >Start</button>".
6. Damit überhaupt etwas im Browser geschieht, müssen Sie im "script"-Tag die Funktion "draw" notieren, die ein Quadrat zeichnet (hier ein blaues Quadrat der Seitenlänge 30 px):"function draw (x,y){ var canvas = document.getElementById(`canvas`); var ctx = canvas.getContext(`2d`); ctx.clearRect(0,0,360,240); ctx.fillStyle = "rgba(0,0,200,1)"; ctx.fillRect (x,10,30,30); x + = 3; var loopTimer = setTimeout(`draw(`+x+,+y+`)`,140);}".
7. In den letzten beiden Codezeilen werden die Millisekunden (140) Ihres Animationstimings festgelegt sowie der Pixelabstand ("x + = 3"), um den das Quadrat jeweils verschoben wird. Durch Verändern dieser beiden Parameter können Sie Feineinstellungen Ihrer Animation vornehmen.