Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden. Du solltest ein Upgrade durchführen oder einen alternativen Browser verwenden.
ich frage mich gerade wie man eigentlich solche Animationen (falls man das so nennt) erstellt.
Wie müsste ich vorgehen wenn ich zb gerne ein Icon hätte das zuerst ein Smiley mit Brille ist,
und bei mouseover habt er die Brille und zwinkert.
Ich vermute mal das das Irgendwie mit Cavans gemacht wird, aber das einzige was ich da meist finde sind irgendwelche boxen die sich bewegen oder der gleichen. Vielleicht macht man das auch mit svg (dachte eigentlich immer das das nur Vektorgrafiken sind)
Freue mich über jeden Tipp, Stichwörter, Tutorials, .. in die richtige Richtung!
Keine Ahnung ob das Zielführend ist, würde ich sagen das ist ein animiertes PNG (apng)
Wie man das erstellt weiß ich nicht aber es gibt im Netz einen Gif zu apng Konverter
Dann kann man doch gleich das Gif nehmen (für mich Oldi sicher der einfachste Weg)
Welche Möglichkeiten heute Html5 bietet weiß ich auch nicht ( früher hätte ich das mit Flash gemacht )
MfG
Du braust für jeden Zustand ein Bild. In PS kannst du über die Zeitleiste eine Frame-Animation erstellen. Dann hast du ein animiertes gif.
Wenn du die Animation bei mouseover oder klick auslösen willst, dann musst du die Zustände einzeln als Bild speichern.
Dann wird es in eine html-Datei eingebunden. Aber den Code habe ich nicht im Kopf.
Viel Erfolg.
Ja es ist eine Animation und man nennt es auch so.
Das ist ein apng, wie die anderen Benutzer bereits sagten. Und nein mit apng alleine kannst du deine Hover-Geschichte nicht realisieren.
Wenn du wirklich nur, Smilie mit Brille und bei :hover Smilie mit zwinkern und hochgestecker Brille haben magst (zwei Zustände ohne Zwischenbilder).
Zwischending:
statisches gif/png, bei hover animated gif(Wiederholungen:1)/mov abspielen.
Kannst sogar via javascript nen gif/Video ansteuern.
Animation Hover + Zurück:
Brille, Brille hochgeklappt, wieder runterklappen. Kannst du via Javascript(onmouseover, onmouseout, onclick, etc...) realisieren. Nur über CSS funktioniert dass dann nicht mehr außer du magst bei dem Smilie eine Anfangsanimation haben, dann würde es auch nur mit CSS funktionieren.
Wichtig wäre zu klären wofür du es benötigst, welchen Anspruch du stellst und wie es eingesetzt werden soll.
Es gibt unendlich viele Varianten/Wege wie man es angehen/lösen könnte. Es kommt auf den Einsatzzweck und deine Anforderungen an. Und der/die ist/sind mir/uns nicht bekannt.
Desweiteren: kommt es auch darauf an welche Programme du zur Verfügung hast, wie dein apng/gif/png (deine Animation/Bilder) vorliegt oder wieviel Aufwand du betreiben möchtest, wieviel Vorkentnisse du in bestimmten Programmen + HTML/CSS + div Scriptsprachen/Auszeichnungssprachen hast, bzw. wie leicht es dir fällt dich in neue Herausforderungen einzuarbeiten.
Stichworte die ich mit deinem Thema assoziiere: CSS Pseudoklassen, CSS 3, CSS Animation, CSS Hover Animation, CSS Sprites, Web Animation, Codepen, dribble, Greensock (GSAP), Web Animation alternative, web animation tools, html5 animation tools, javascript animation, javascript play gif, javascript play png sequences, animated svg, SMIL, svg javascript animation etc ... tausend weitere Variationen und Varianten.
Canvas funktioniert sicherlich (wobei ich noch nie wirklich mit Canvas in Berührung gekommen bin und denke dass es auch nicht für einen solchen Zweck konzipiert wurde?).
Varianten wie ich vorgehen würde bzw. wie man die Animation allgemein erzeugen kann:
After Effects in Verbindung mit Illustrator oder direkt in After Effects.
In Illustrator die Vektoren aufbauen die ich animieren möchte:
Brille, Gesichtform, Mund, Auge - zwei Zustände, Augenbrauen. Alles auf separate Ebenen.
In After Effects die ai importieren, und in Pfade wandeln, animieren.
Dann als mov exportieren und in apng wandeln, oder PNG Sequenz exportieren und in apng wandeln.
Photoshop Zeitleisten Animation.
Da man mit Photoshop allerdings keine Pfade animieren kann? (war zumi mein letzter Kenntnisstand?) müsste man ein wenig tricksen. Sollte aber in einer etwas reduzierteren Variante trotzdem animiert werden können. (opacity, transform)
Dann als mov exportieren und in apng wandeln, oder PNG Sequenz exportieren und in apng wandeln.
Flash, falls du es irgendwo noch liegen hast. Workflow wie Photoshop/After Effects + Actionscript.
animated svg/SMIL in Verbindung mit Illustrator oder du kannst Vektoren selber schreiben (Vektorgrafiken), wäre aber ne Ecke aufwändiger. Und du müsstest wahrscheinlich ebenfalls reduzieren. Da bin ich mir gerade unsicher, hab nicht sehr viel mit SMIL animiert, aber rein von meinen Erfahrungen würde ich vorerst davon abraten, da es viel Zeit in Anspruch nimmt und Chrome auch den Support von SMIL einstellen möchte. Wäre dann übrigens animated svg. Würde aber alles abdecken.
Animate CC, damit kenn ich mich nicht aus und hab es noch nie benutzt, aber würde ich mir bei Gelegenheit mal anschauen um zu wissen ob es wirklich dafür gemacht wurde. Ich glaube es enthält eine javascript-biblio um svg zu animieren... unsicher
Google Web Designer, der hat glaube ich Greensock(GSAP) implementiert und damit kann man glaube ich auch Pfade animieren(Kommt auf die Biblio an die dort verlinkt ist - Lizenz und so). Aber das kommt bei mir auch erst wenn ich die Gelegenheit finde, die Projekte stimmen um mich gänzlich damit auseinander zu setzen.
Egal wie, aber bei all diesem Kram solltest du dich etwas damit auseinandersetzen und belesen.
Gehört für mich in Webdesign, erst wenn die Anforderungen klar sind und es wirklich ein High-End-Kommerz-Produkt sein soll dann würde ich es in diesem Bereich lassen.
Alle Angaben ohne Gewähr und frei aus dem Kopf geschrieben ohne alles zu überprüfen. Kann also auch Fehler enthalten. Bitte diesen Umstand zu berücksichtigen. Danke.
ohh nice, vielen dank für die Antworten,
apng ist an mir irgendwie total spurlos vorübergegangen
Spritesheets ja so einfach kann es gehen,
und mit keyframes in Bewegung versetzten, genial
aber an das hab ich dabei irgendwie absolut nicht gedacht
eigentlich habe ich vor kurzem mal die Webseite gesehen https://clarity.io/ und dachte mir ohh wow,
und dann hmm wie könnte man so was angehen,
daher dachte ich mal klein beginnen und Icons irgendwie in Anhängigkeit zur Mouse zu animieren
bin dann auf das gestoßen, https://codereview.stackexchange.com/questions/93107/follow-the-cursor-eye-animation
aber dachte mir das sind wieder einfache geometrische Formen, da muss es noch was andres geben.
und jetzt denke ich das https://clarity.io/ wohl mit webgl oder so umgesetzt wurde
mit spritesheets ist das auf jeden fall nix mehr zu machen
(läuft nicht aber theoretisch sollte das ein Beispiel dazu sein https://github.com/dataarts/webgl-globe)
und der link zu den html5-animation-tools wird mich wohl noch etwas beschäftigen, da sehen manche teile sehr interessant aus.
konkreten Bedarf gibt es im Moment zum Glück nicht,
aber wenn einmal ein Icon animiert werden soll, wird das wohl mit einem Spritesheet geschehen , und das ist dann eher ein grafisches Problem wie schon gesagt wurde.
apng hat auch nie wirklich Aufmerksamkeit erhalten, ging auch ne ganze Ecke an mir vorbei, weil kein großes Programm nen Update dazu gegeben hat, bzw. ich auch keinerlei Verwendung für einen solchen Workflow gesehen habe.
Gibt eben gif, früher swf, flv, oder eben mov, avi, mp4. Und diese Formate benötigen keine Zusatzprogramme.
SVG kann man auch animieren. apng schließt keine wirkliche Lücke. Es ist nur Zusatz und beim kurzen überfliegen hat es gegenüber dem gif nur den Vorteil der 8bit-16bit anstatt der 256 Farben gehabt?
clarity.io könntest du durchaus via javascript und Videodatei (wo du eben den Erdball via After Effects oder 3DProgramm animierst) animieren, wurde aber wahrscheinlich über webgl erstellt. Damit kenne ich mich überhaupt nicht aus, aber es müsste eine Schnittstelle zur Programmierung für 3D Inhalte sein. Damit kann man nochmal ne Ecke krasseren Sc.... machen.
Wobei dir auch einige javascript-biblios helfen würden um Pseudo-3D zu erstellen: parallax als Beispiel. Da kommt es immer ein wenig drauf an wieviel Aufwand-Nutzen und Eigenmotivation in ein Projekt gesteckt werden.
Du befindest dich bei deinem Vorhaben mit canvas schon auf dem richtigen Weg. Es fehlen dir nur die letzten Bausteine und dann natürlich, selber schreiben, Tutorials durcharbeiten, und auch API's durchlesen, die richtigen Suchworte finden. Das dauert alles ne Ecke, aber wenn du dran bleibst, safe.
Dein Beispiel mit dem webgl-globe ist mit hoher Wahrscheinlichkeit sogar die Vorlage zu clarity.io oder eben daraus entstanden.
HTML5 Animation Tools:
Wenn du mal animierte Google Adwords Anzeigen aufsetzen darfst, wirst du dich damit auch auseinandersetzen.
Wie gesagt, es gibt unzählige Möglichkeiten wie man an gewisse Probleme herangehen sollte/könnte und dann kommt es immer ein wenig darauf an welche Anforderungen an das Projekt gestellt werden, aber das scheinst ja auch selber zu kennen.
PNG8 hat auch nur 256 Farben (1Bit Transparenz wie ein Gif) nur bei PNG24 hast Du voll Power mit 8Bit Transparenz (weshalb die immer so groß sind. 3x8bit+8bit Transparenz =4 Kanäle)
MfG
In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die
Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem
schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die
PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz.
Hier erfährst du mehr über uns.
früher hätte ich das mit Flash gemacht 
