Alle Kategorien
Suche

HTML5 und Animation - Tutorial für Anfänger

Autor: Karl M. Lund
HTML5 bietet neue Anwendungsmöglichkeiten der Animation.
HTML5 bietet neue Anwendungsmöglichkeiten der Animation.
Sowohl animierte Infografiken als auch Navigationselemente stellen für viele User einen Mehrwert dar. Mit der aktuellen Version HTML5 sind solche Anwendungen ohne besondere Plug-ins möglich. Aufschlussreich sind Tutorials, die sich mit den neuen Animationsmöglichkeiten auf Code-Ebene befassen.

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.
Weiterlesen:
Teilen: