Wie kann ich interaktive Animationen ohne Flash erstellen? [geschlossen]

Ich habe einen Kunden, der sich nach dem folgenden Bild erkundigt, in dem sich die Zahnräder ständig drehen, und auch die Maus über die Interaktion gezeigt wird, indem das eine Zahnrad und der Text dunkler sind.

https://www.dropbox.com/s/n84yizriltx1rj7/RotatingGears.jpg

Wie würde man das ohne Flash machen?

Sie müssten sich HTML5-Canvas und mögliche Bibliotheken wie Rapheal.js ansehen. Andernfalls müssten Sie GIF-Bild-Slices erstellen und Dinge zusammensetzen.
Ich würde mir mehr Sorgen darüber machen, dass Zahnräder, die in dieser Angelegenheit verbunden sind, physikalisch nicht in der Lage wären, sich zu drehen.
Diese Frage scheint nicht zum Thema zu gehören, da es eher um die Codeimplementierung als um das Grafikdesign geht. Ich würde vorschlagen, zu StackOverflow zu migrieren
@Scott Kann einfach mit js gemacht werden. Keine Notwendigkeit für Leinwand, die von den Browsern vieler Leute nicht unterstützt wird.
Kannst du bitte zur Verdeutlichung posten, welche Browser das Ding unterstützen muss?

Antworten (4)

Ich glaube, das könnte alles mit SVG SMIL-Animation gemacht werden. Der unmittelbare Nachteil dabei ist, dass es derzeit von keiner Version des Internet Explorers unterstützt wird, also ist es eine ziemlich unpraktische Lösung. [1]

Hier ist ein einfaches Beispiel für ein rotierendes SVG-Bild (aus Wikipedia geliehen ):

rotierendes SVG-Beispiel

Mousover-Effekte können mit JavaScript hinzugefügt werden

FYI, dies wird in Firefox unter Linux unterstützt, aber es wird 100% CPU verwenden, um die Animation mit maximaler fps auszuführen.

Abhängig davon, welche Browser Sie unterstützen müssen, können Sie mit css3 davonkommen. Kleines Beispiel http://jsfiddle.net/4Vz63/1/ Ich habe gerade 'css3 Continuous Rotation' gegoogelt. Vielleicht können Sie 2 verschiedene animierte GIFs für jedes Zahnrad verwenden und sie für Hintergründe von kleinen Divs verwenden? Auf diese Weise können Sie das Moseover- und Mouseout-Ereignis steuern (verwenden Sie heller für das eine, dunkler für das andere). Möglicherweise müssen Sie js verwenden, um den Rest der Elemente zu steuern - Linien und Textelemente.

CSS3-Animationen sind nur mit ie10+ kompatibel und erfordern den Webkit-Code in Safari und Chrome. Wenn Sie nicht etwas entwickeln, das ausschließlich auf Mobiltelefonen oder Tablets verwendet werden soll, ist es keine gute Idee, sich mit den fortgeschritteneren CSS3-Funktionen zu ärgern. Vorausgesetzt, es handelt sich um ein professionelles Projekt. caniuse.com/css-animation
... hast du diesen Teil meiner Antwort verpasst? : 'Je nachdem, welche Browser Sie unterstützen müssen'
Ich füge nur hinzu, dass es derzeit unwahrscheinlich ist, dass es in professionellen Projekten machbar ist. Es ist kein einfacher Fall von "das funktioniert nicht in irgendetwas früher als ie9, na ja", es ist eher so, dass die Seite für mindestens ein Drittel des Verkehrs nicht funktioniert.

Klingt nach etwas, das Sie zwischen mehreren Bildern, Gifs für eines der rotierenden Zahnräder und CSS tun könnten. Wie in nicht CSS3-Animationen, sondern älterer Code, der browserübergreifend funktioniert.

Der einfachste Weg ist mit Javascript oder jquery, aber dafür müssen Sie javascript verstehen.

Versuchen Sie in Bezug auf Ihre andere Frage mit dem jfiddle-Beispiel Folgendes hinzuzufügen:

onmouseover="this.style.opacity=1.0;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.2;this.filters.alpha.opacity=20"

zum div-Tag.

Wenn diese Raphael-Bibliothek nicht verfügbar ist, können Sie diese Methode dennoch mit z. B. einem animierten GIF verwenden:

Platzieren Sie das GIF auf der Seite und überlagern Sie dann Divs mit einem großen Eckradius, um kreisförmige halbtransparente Bereiche zu erstellen, die über dem GIF angeordnet sind, und dann den Popup-Text als separates verstecktes Div-Element, möglicherweise mit negativen absoluten Koordinaten. Wenn Sie mit der Maus über ein bestimmtes Div fahren, reduzieren Sie die Deckkraft und positionieren dann das richtige Textfeld neu und stellen die Sichtbarkeit des Text-Div auf „sichtbar“ ein.

Während es die Dinge vereinfachen kann, wenn das GIF ein einzelnes Element ist, ist es wahrscheinlich konservativer für die Bandbreite, jedes Zahnrad einzeln zu platzieren. In diesem Fall platzieren Sie jedes GIF in einem Div und passen die Deckkraft mit dem Mauszeiger an.

Beachten Sie auch, dass Sie für ein isoliertes einzelnes Zahnrad keine vollständige Drehung um 360 % animieren müssen: Für eine Drehung im Uhrzeigersinn müssen Sie nur so animieren, dass der Zahn links von dem bei 12 Uhr auf die 12 gelangt Uhr Position.

Persönlich mag ich das Gefühl der animierten Client-Seite, aber achten Sie auf Probleme mit der Browserunterstützung und insbesondere auf die CPU-Verarbeitungszeit. Dies ist die Hauptnavigation oder zumindest das Landealter, also testen Sie es auf einem älteren Computer.

Wie kann ich interaktive Animationen ohne Flash erstellen? [geschlossen]
AntwortenHierDatenschutz-Bestimmungen1y, 0v