Alles Gute zum Geburtstag, Mac. Wie erreicht man eine Leinwand-Logo-Animation wie diese?

Geben Sie hier die Bildbeschreibung ein

Wie wurde diese Animation erstellt? Kann jemand ein Beispiel geben, wie man eine Animation wie diese erstellt? Ist es möglich, eine solche Animation mit einer Leinwand und einem Logo im .svg-Format zu erstellen? Ist das eine Art Maskierungseffekt auf der Leinwand oder was ...?

Vorschau der Logoanimation beim Besuch der offiziellen Apple-Website.

Hallo und willkommen bei GD. Die Animation wird einfach mit Leinwand gemacht. Eine Suche nach "Leinwandanimationen" sollte Ihnen eine große Anzahl von Tutorials und Beispielen liefern.
@boblet Danke! Ich habe Google durchsucht, bevor ich diese Frage hier gestellt habe, aber ich konnte kein spezifisches Beispiel für eine so komplexe Animation mit Leinwand finden.

Antworten (2)

Die Animation scheint mit dem Canvas-Element auszukommen .

<canvas height="496" width="688" style="width: 317.4284274193549px;"></canvas>

Aber ich kann den Javascript-Code auf apple.com nicht finden

Hier ist ein Link zum Code auf der Seite, von der ich glaube, dass sie ihn steuert. images.apple.com/v/home/ap/scripts/home.js Es ist alles minimiert, daher ist es schwierig zu sagen, wo genau, aber eine Suche in diesem Code zeigt zahlreiche Verweise auf "Leinwand".
@ckpepper02 jsbeautifier oder jspretty sind gute Tools, um .jsDateien zu entminifizieren.
@Gramps, das war großartig! Lief wie am Schnürchen
Einige der Referenzen in den oben verlinkten js sehen aus, als kämen sie aus dem Open-Source-Actionscript-3-Ersatzprojekt "nanosome" ( assembla.com/code/nanosome/subversion/nodes/278/trunk/as3/flow/… ). Alternativ beziehen sich die Verweise auf Adobe ActionScript selbst. In beiden Fällen handelt es sich wahrscheinlich um eine Art Flash-Animation.
Hallo Leute, danke für den Versuch, diese Frage zu beantworten, danke auch @horatio für den Hinweis, dass es sich um eine Art Flash-Animation handeln könnte. Ich habe heutzutage sogar Flash vergessen, wo sich alles um HTML5 und Canvas dreht. Also habe ich nach dem Exportieren von Flash-Animationen in eine HTML5-Leinwand gesucht und komme zu diesen Links unten. Es könnte sein, dass sie Animationen mit Flash gemacht und in Canvas-Animationen exportiert haben. Schau dir das an: link1 und link2

Um auf den „How to“-/methodischen Teil dieser Animation zu antworten: Es sieht so aus, als hätten die „3“ und das Apfellogo beide eine Maske, die damit beginnt, das Bild fast vollständig zu bedecken und sich dann in einer geraden Linie davon wegbewegt.

Es ist schwer zu erkennen, ob die Masken aus einfachen Formen (wie einem Kreis oder Rechteck) oder etwas komplexer bestehen, aber für mich sieht es so aus, als wären sie formmäßig nicht allzu besonders.

Danke für die Antwort. Sehen Sie sich dieses Video an, es ist fast derselbe Maskeneffekt: youtube.com/watch?v=fM_svH50fmM Sie könnten also eine Logomaskenanimation wie diese mit Adobe Flash Pro CC oder Adobe Flash Pro CS5 und höher erstellen und nach HTML5 exportieren Segeltuch. Beim Exportieren in eine HTML5-Leinwand werden die erforderlichen HTML- und Javascript-Dateien zur Handhabung von Animationen erstellt.
Ja, das ist die Technik, die ich im Sinn hatte. Und danke für den Tipp, mir war nicht bewusst, dass Flash es in html5 konvertieren kann! :D
Alles Gute zum Geburtstag, Mac. Wie erreicht man eine Leinwand-Logo-Animation wie diese?
AntwortenHierDatenschutz-Bestimmungen1y, 0v