0251 / 590 837 15
info@a-coding-project.de

Animationen mit jQuery

jQuery ist ein recht umfangreiches Framework für JavaScript. Es bietet unter anderen die Möglichkeit mit einfachen Mitteln Animationen zu erstellen. Die wichtigste Funktion hier ist animate, mit welcher man bestimmte Eigenschaften in einem zeitlichen Verlauf verändern kann. Zum Beispiel: Die Eigenschaft left soll in 4 Sekunden um 100 erhöht werden -> Das Element bewegt sich nach rechts.

Erste Animation

Wer will kann sich jQuery einfach über Google beziehen, so muss man es nicht extra herunterladen und bei den Benutzern ist es evtl. schon im Cache vorhanden und erspart somit Traffic. Ein Beispieldokument könnte so aussehen:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js">
    </script>
    <script type="text/javascript">
        function move_right(){
            $('#box').animate({
                left: '+=500'
            }, 5000);
        }
    </script>
  </head>
  <body>
    <div id="box" style="position:absolute;width:100px;height:100px;background-color:#f00">
    </div>
    <script type="text/javascript">
      move_right();
    </script>
  </body>
</html>

So sieht’s aus

Man sucht sich als erstes das #box-div über jQuery heraus. dann kann man einfach die Funktion animate aufrufen und als ersten Parameter die Änderung eingeben und beim zweiten, in welcher Zeit diese ausgeführt werden soll.

Callbacks

Es gibt neben den zwei bisherigen Parametern auch noch weitere. Sagen wir mal wir wollen die Box wenn sie rechts platziert ist noch nach unten verschieben. So können wir als dritten Parameter eine Funktion übergeben, die dies erledigt:

var move_down = function(){
  $('#box').animate({
    top: '+=500'
  }, 5000);
}
function move_right(){
  $('#box').animate({
    left: '+=500'
  }, 5000,move_down);
}

So sieht’s aus

Die Variable move_down ist eine Referenz auf die Funktion, die das Element nach unten bewegt. Diese Referenz kann nun im dritten Parameter eingegeben werden.

Man kann auch zwei Eigenschaften auf einmal ändern. So können wir das Element zum Beispiel während des Verschiebens einfach vergrößern:

var move_down = function(){
  $('#box').animate({
    top: '+=500',
    height: '+=100',
    width: '+=100'
  }, 5000);
}
function move_right(){
  $('#box').animate({
    left: '+=500',
    height: '+=100',
    width: '+=100'
  }, 5000,move_down);
}

So sieht’s aus

Beispiel – Kleines Spiel

Um das Ganze mal etwas in die Praxis zu bringen, möchte ich jetzt mit euch in wenigen Zeilen Code ein kleines Spiel bauen. Dabei fliegen rote Quadrate von links nach rechts, welche man Abschießen muss.

Also machen wir erst mal alles wieder etwas sauber. Das Rechteck wird wieder etwas kleiner und geht nur noch nach rechts:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js">
    </script>
    <script type="text/javascript">
        function move_right(){
          $('.box').animate({
            left: '+=' + (window.screen.availWidth - 50),
          }, 30000,'linear');
        }
    </script>
	<style type="text/css">
		.box{
			position:absolute;
			width:50px;
			height:50px;
			background-color:#f00;
			top:0;
			left:0;
		}
	</style>
  </head>
  <body>
    <div class="box">
    </div>
    <script type="text/javascript">
      move_right();
    </script>
  </body>
</html>

So sieht’s aus
Das Rechteck ist nun die Klasse .box und wandert über die ganze Weite von links nach rechts. Doch nun wollen wir es abschießen. Deswegen wird mit beim Klick nun die Animation gestoppt und die Box entfernt:

<body>
  <div class="box">
  </div>
  <script type="text/javascript">
    move_right();
    $('.box').click(function(){
      $(this).stop();
      $(this).hide();
    });
  </script>
</body>

So sieht’s aus
In der click-Funktion wird zuerst mit Stop die Animation unterbrochen. Danach wird mit hide die box versteckt.

Das Spiel ist verloren, wenn die Box den rechten Rand erreicht hat. Dann soll der Punktestand ausgegeben werden:

var start = new Date().getTime();
function move_right(){
  $('.box').animate({
    left: '+=' + (window.screen.availWidth - 50),
  }, 30000,'linear',loose);
}
var loose = function(){
  var points = Math.round((new Date().getTime() - start) / 5000);
  alert('Leider verloren. Punktestand: ' + points);
}

So sieht’s aus
Um jetzt ein noch eine zeitliche Komponente mitreinzubringen, wird die Box nach dem Klick nun Links platziert und leicht schneller verschoben:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js">
    </script>
    <script type="text/javascript">
        var start = new Date().getTime();
        function move_right(){
          $('.box').animate({
            left: '+=' + (window.screen.availWidth - 50),
          }, 30000 - (Math.round((new Date().getTime() - start))) / 1.7,'linear',loose);
        }
        var loose = function(){
            var points = Math.round((new Date().getTime() - start) / 5000);
            alert('Leider verloren. Punktestand: ' + points);
        }
    </script>
    <style type="text/css">
      .box{
        position:absolute;
        width:50px;
        height:50px;
        background-color:#f00;
        top:0;
        left:0;
      }
    </style>
  </head>
  <body>
    <div class="box">
    </div>
    <script type="text/javascript">
      move_right();
      $('.box').click(function(){
        $(this).stop();
        $(this).hide();
		this.style.left = 0;
        $(this).show();
		move_right();
      });
    </script>
  </body>
</html>

So sieht’s aus
Damit es noch etwas interessanter wird kann man noch die Y-Position des Rechtecks per Zufall verändern.

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js">
    </script>
    <script type="text/javascript">
        var start = new Date().getTime();
        function move_right(){
          $('.box').animate({
            left: '+=' + (window.screen.availWidth - 50),
          }, 30000 - (Math.round((new Date().getTime() - start))) / 1.7,'linear',loose);
        }
        var loose = function(){
            var points = Math.round((new Date().getTime() - start) / 5000);
            alert('Leider verloren. Punktestand: ' + points);
        }
    </script>
    <style type="text/css">
      .box{
        position:absolute;
        width:50px;
        height:50px;
        background-color:#f00;
        top:0;
        left:0;
      }
    </style>
  </head>
  <body>
    <div class="box">
    </div>
    <script type="text/javascript">
      move_right();
      $('.box').click(function(){
        $(this).stop();
        $(this).hide();
        this.style.left = 0;
        this.style.top = Math.round(Math.random() * 
                         (screen.availHeight - 50 - window.screenTop)) + 'px';
        $(this).show();
        move_right();
      });
    </script>
  </body>
</html>

So sieht’s aus

Fazit

jQuery bietet gute Möglichkeiten mit Animationen zu arbeiten. Animate ist dabei nur eine Funktion, weitere gibt es hier: http://api.jquery.com/category/effects/

Weiterführende Links

  1. .animate() (api.jquery.com)
  2. jQuery Animationen und Effekte (mediaevent.de)
  3. jQuery: Das neue JavaScript-Framework für interaktives Design (amazon.de)
  4. Glimmer – der Editor für jQuery Animationen (guido-muehlwitz.de)

Kommentare

Dark-CMS schrieb am 22.09.2011:

kleine verbesserung window.screen.availWidth gegen $(window).height() und (screen.availHeight - 50 - window.screenTop) gegen $(window).height() - 50 austauschen, dann hast du die richtigen Browser-Daten, bei deinem Code hab ich in Chrome zb eine differenz von 5 px. Dann hast du einen denkfehler in deinem Code, der das Spiel am ende echt schwer macht. Bei einer Browserhöhe von 950px und einem Math.random()-Wert von 0,95 bewegt sich das Kästle außerhalb des Sichtbereichs. Fehler ist folgender: Math.randonm() ist ein wert zwischen 0 und 1. Bei einer Browserhöhe von 950 minus Kastenhöhe (50) bist du bei 900px. Wenn Math.random() nun zb 0,97 ist würdest du einen Top-Wert von 873 vergeben. dies wird auf die obere linke Ecke des Kastens gerechnet, ergo verschiebt sich ein Teil in einen Scrollbaren Bereich. ich habs mal angepasst und dies hier this.style.top = Math.round(Math.random() * (screen.availHeight - 50 - window.screenTop)) + 'px'; gegen var w = $(window).height()-50; this.style.top = Math.round(Math.random(0,(w / (w+50))) * w) + 'px'; ausgetauscht. Dabei wird random auf die maximale differenze beschränkt.

axel schrieb am 29.12.2011:

genial, danke! genau so etwas habe ich gesucht, um eine html-basierte website für jemanden zu erstellen, der "fahrende" jpgs haben wollte. funktioniert bestens!