1

animiertes GIF (Mausverfolger) auf HTML-Seite dynamisch drehen - möglich?

Frage von MrTom MrTom

Ob mein Vorhaben "schön" oder "nervig" ist, soll hier mal nicht zur Debatte stehen, denn ich weiß selbst, dass Mausverfolger nicht jedermans Sache sind.

Habe folgendes vor: Der Mauszeiger soll von einem krabbelnden (animierten) Käfer verfolgt werden, so ähnlich, wie das auf folgender Seite mit dem Ufo gemacht wurde:

http://www.kostenlose-javascripts.de/javascripts/mausverfolger/alien.html

(Die Geschwindigkeitund Verzögerung des Ufos habe ich lokal schon so angepasst, dass es einem trägen Krabbelkäfer entspricht... dass es auf der Beispielseite übrigens immer so weit unterhalb des Mauszeigers ist, muss an der Seite selbst liegen, bei mir lokal landet das Ufo immer direkt neben dem Mauszeiger)

Allerdings nutzt das Skript mehere If-Abfragen, in welchem Winkelbereich der Mausverfolger zur aktuellen Mausposition steht - und sucht dann entsprechend eines von 8 Bildern aus.

Da mein Käfer aber animiert sein soll, und außerdem die Übergänge zwischen den Winkeln möglichst flüssig (und nicht in 45°-Schritten) erfolgen sollen, müsste ich sehr viele (z.B. 72 Stück, wenn ich 5°-Schritte wähle) animierte GIFs auf den Server legen, was wohl erheblichen Traffic und Ladezeiten verursachen dürfte, wenn die Animation selbst z.B. aus 8 Frames besteht...

Daher wäre eine Funktion TOLL, die den Winkel zwischen aktueller Mausposition und Mausverfolger berechnet (das würde ich zur Not wohl noch selbst hinkriegen) und das EINE animierte GIF, das ich auf dem Server habe, dann um den entsprechenden Winkel um sein Zentrum dreht...

...und für letzteren Zweck habe ich keinen Schimmer, wie/ob das geht mit HTML oder Javascript bzw. auch für die meisten Browser funktioniert.

Kann da jemand helfen?

Fragen zu gleichen Themen finden

Antworten (2)

  • 0
    Antwort von Flugmaus Flugmaus

    Hallo MrTom,

    sowas ist keine Aufgabe für den Server, denn selbst wenn der zur Laufzeit das richtige Bild erstellt, muss es doch vom Client geladen werden. Du sparst da rein gar nicht ein.

    JavaScript besitzt aber keine Funktion, die ein Objekt drehen kann, da eine solche Art der Bildmanipulation noch nicht vorgesehen ist (vielleicht ja ab html6).

    Was Sinn macht ist die Einzelbilder zusammenzufassen, je eine Zeile für die jeweils 8 Bilder für die Bewegung.

    Wenn das resultierende Bild dann noch mit einem geeigneten Tool entsprechend komprimiert (jpg) wird , sollte dann "klein" genug sein. Da nun für die Bewegung nichts geladen, sondern nur die Position das Hintergrundes per JS passend zur Position (Winkel) und dem aktuellen frame gesetzt werden muss, sollte auch diese flüssig genug sein.

    Ich schau mal ob ich ein Beispiel hinkriege.

    Das von Dir verlinkte Teil, werde ich allerdings nicht benutzen, da ich bei aller Begeisterung für Open Source, diese Zwangslinks auf dies Sammlungshomepage nicht mag.
    Die Homepage hat den Code nicht geschrieben, sondern ein Programmier und der wird dort weder auf der Homepage noch im Zwangslink erwähnt!

    Was ich damit sagen will, es kann auch etwas dauern.

    Kommentar von Flugmaus FlugmausFlugmaus

    Hi, ich habe nochmal nachgeschaut, das mit dem Drehen einer Grafik geht doch

    <div style="-moz-transform: rotate(70deg); -moz-transform-origin: bottom left;">  
    <img src="gal/images/avatar.png" >
 </div>

    Allerdings nur im Firefox
    https://developer.mozilla.org/en/CSS/transform

    An der Geschichte mit dem Sprite (alle Einzelbilder in eine Datei) bin ich noch dran, ich brauche sowas ähnliches nämlich auch für mein Browsergame, aber leider war das Wochenende mal wieder viel zu kurz und ich bin immer nach am Rendern der Figur.

  • 0
    RatgeberHelden Antwort von KiraBianca KiraBianca

    Hallo Mr. Tom,

    Mit HTML kannst Du rein gar nichts verändern oder manipulieren. HTML bekommt seinen Bauplan für die Seite vorgesetztund arbeitet diesen stur und ohne Ausnahmen von oben nach unten ab.

    Javascript stellt zwar ein paar Funktionen zum Zeichen zur Verfügung, aber die sind nur für einfache, geometrische Figuren oder für einzelne Pixel sinnvoll.

    Jedoch gibt es bei PHP sinnvolle Möglichkeiten des perspektivischen Darstellens. Ein Beispiel findest Du hier: http://valokuva.org/?p=112

    Für solche Arbeiten gibt es aber auch eine Freeware (unter Apache-Lizenz), mit der Du das hervorragend ohne große Mühe hinbekommst. Den Link schreibe ich in einem Kommentar zu dieser Antwort, weil 2 Links in einem Beitrag hier ja nicht möglich.

    Gruß Kira-Bianca

    Kommentar von KiraBianca KiraBiancaKiraBianca

    Hier der Link zur besagten Software. Sie heißt ImageMagick® und Du findest alles darüber inkl. Download hier: http://www.imagemagick.org/script/index.php

Diese Frage

Verwandte Fragen

Noch nicht den richtigen Rat gefunden?

Einfach und schnell viele hilfreiche Ratschläge von Deutschlands aktivster Ratgeber-Community erhalten!

Einfach und schnell einen Tipp erstellen und Ihren guten Rat mit anderen teilen!

Einfach und schnell ein Video hochladen und anschaulichen Rat an alle geben!

Die unter gutefrage.net angebotenen Dienste und Ratgeber Inhalte werden nicht geprüft. Die Richtigkeit der Inhalte wird nicht gewährleistet. Rechtliche Hinweise finden Sie hier.