Verwenden Sie Paper.js, um interaktive HTML5-Vektoranimationen zu erstellen

Angesichts der Tatsache, dass täglich neue JavaScript-Frameworks erscheinen, die HTML5 nutzen, ist es schwierig zu bestimmen, welches für das jeweilige Projekt geeignet ist. In diesem Tutorial haben wir (das ist Dr. Woohoo , Claus Wahlers und Rasmus Blaesbjerg aus HAUS ) werden unter die Haube schauen und sehen was Paper.js (entwickelt von dem Unglaublichen Jrg Lehni und Jonathan Puckey ) muss uns vektorbasierte Animation und Interaktivität bieten, die plattformübergreifend funktionieren. Wir werden auch untersuchen, wie solide ein Fundament ist, auf dem es aufgebaut ist, und abschließend, wie einfach es ist, es für Anfänger bis Fortgeschrittene zu erlernen und zu verstehen.

Bevor wir uns mit dem Code dieses Tutorials von unten nach oben befassen, werden wir uns kurz mit der Geschichte von Paper.js und seinem Vorgänger Scriptographer befassen sowie mit der Organisation der Objekte innerhalb des Frameworks von oben nach oben. Untersicht.



Geschichte

Paper.js - Ende Juni 2011 öffentlich gestartet - entstand aus den Bemühungen von Drehbuchautor Dies ist ein unglaubliches Skript-Plug-In für Adobe Illustrator. Dies ist wichtig zu beachten, da Scriptographer im Jahr 2001 eingeführt wurde und 10 Jahre lang eine robuste iterative Entwicklung und Verbesserung gegenüber einigen anderen, neueren vektorbasierten JavaScript-Frameworks bietet, die heute existieren.

Ein Skript-Plug-In für Illustrator? Wenn Sie Scriptographer noch nicht verwendet haben, verpassen Sie eine enorme Menge an Spaß, aber was noch wichtiger ist, es ist ein Konzept, das für den modernen Designer wohl ein grundlegender Vorteil ist - und das die Fähigkeit ist, Code und Design zu kombinieren um den Designprozess zu automatisieren und das zu erweitern, was durch generatives Design kreativ möglich ist.

'' Generatives Design ist eine Entwurfsmethode, bei der die Ausgabe - Bild, Ton, Architekturmodelle, Animation - durch eine Reihe von Regeln oder eine generiert wird Algorithmus , normalerweise mit einem Computerprogramm. “ - - Wikipedia

Das Dokumentobjektmodell

Paper.js verwendet ein gut durchdachtes Document Object Model (DOM) - mit einer Abstammung zu seinem übergeordneten Scriptographer -, um seine Objekte auf eine leicht verständliche Weise zu strukturieren. Wenn Sie mit dem ExtendScript DOM von Adobe Illustrator vertraut sind, sind Sie mit Paper.js vertraut. Wenn Sie Paper.js noch nicht kennen, aber Illustrator als Designer verwendet haben und Ihre JavaScript-Grundlagen kennen, ist die Hierarchie des DOM für Sie selbstverständlich.

Adobe Illustrator Dokument-, Ebenen- und zusammengesetzter Pfad

High Definition Base Game Texturen für alle
Adobe Illustrator Dokument-, Ebenen- und zusammengesetzter Pfad

Um die Hierarchie des DOM von Paper.js zu verstehen, ist es möglicherweise einfacher, Illustrator als Metapher zu verwenden.

Im obigen Bild haben wir: 1) Ein in Illustrator geöffnetes Dokument mit mehreren Ebenen 2) Auf der ausgewählten (aktiven) Ebene „HAUS-Logo“ 3) befindet sich ein zusammengesetzter Pfad.

Die Struktur ist im DOM für Paper.js dieselbe, außer dass ein Dokument als Projekt bezeichnet wird. Daher würde der Code jedes Objekt wie folgt durchlaufen: Project.Layer.CompoundPath.

Projekt: ActiveLayer

Normalerweise beginne ich mit der Erstellung von Variablen, die Verweise auf die aktuellen Elemente (Ebenen, Symbole, Ansichten usw.) der Projekt . In diesem Fall interessieren wir uns nur für den Strom activeLayer des Projekts, das wir später verwenden werden, wenn es darum geht, den auf der Ebene enthaltenen Inhalt zu zentrieren.

var layer = project.activeLayer;

Projekt: CurrentStyle

Der currentStyle definiert den aktuellen Stil. Alle Elemente, die nach dem Definieren des Stils ausgewählt oder erstellt werden, verwenden diesen Stil.

project.currentStyle.fillColor = new RGBColor(1.0, 1.0, 1.0);

Erstellen von Rechteck- und Kreispfaden

Wenn Sie sich an Bild 1 erinnern, gibt es ein Rechteck und einen Kreis, die zusammen den zusammengesetzten Pfad bilden. Neu geformte Pfadelemente (Linie, Rechteck, Rundrechteck, Oval, Kreis, Bogen, RegularPolygon und Stern) können mit einer Vielzahl von Techniken erstellt werden, einschließlich der Definition von Punkt und Größe:

// Path.Rectangle(point, size)var rect = new Path.Rectangle([200, 200], [300, 300]);

Hinweis: Der Ursprungspunkt eines Rechtecks ​​befindet sich in der oberen linken Ecke.

Um dem HAUS-Logo zu entsprechen, müssen wir das drehen Rechteck 45º:

rect.rotate(45);

Als Nächstes erstellen wir den Mittelpunkt im Logo und definieren den Mittelpunkt und den Radius:

// Path.Circle(center, radius)var circ = new Path.Circle(rect.position, 29);

Beachten Sie, dass wir zwar eine neue erstellt haben Kreis ist es nicht sichtbar. Es ist tatsächlich da, aber es hat die gleiche Farbe wie das Rechteck. Wenn Sie sich Bild 1 genauer ansehen, stellen Sie fest, dass der Kreis ein Loch in der Mitte des Rechtecks ​​erzeugt. Dies ist eine Funktion von CompoundPath.

Kombinieren Sie sie zu einem CompoundPath

So erstellen Sie die CompoundPath Wir erstellen eine Instanz davon und fügen die zuvor erstellten PathItems hinzu.

var shape = new CompoundPath(rect, circ); shape.fillColor = new RGBColor(0.95, 0.95, 0.95);

Der Zirkel erzeugt jetzt ein Loch in der Mitte des Rechtecks. Jetzt ist es Zeit, einige der magischen Glanzlichter und Schatten von Claus hinzuzufügen. Woohoo!

Schatten und Lichter

Es gibt zwei Ansätze, um dem CompoundPath Schatten und Lichter hinzuzufügen: Verwenden der HTML5-API für Canvas-Schatten oder Fälschen. Claus erster Versuch war die Verwendung der Shadows-API. Leider runden sowohl Safari als auch Chrome die Parameterwerte shadowOffsetX und shadowOffsetY auf ganze Ganzzahlen ab, was zu holprigen Animationen in diesen Browsern führt.

Um den Schatten und die Hervorhebung zu fälschen, verwenden wir die Eigenschaften clone (), position und fillColor. Nach dem Erstellen des CompoundPath übergeben wir diese Instanz an die Methode makeShadow (), die die Form annimmt, sie zweimal für Schatten und zweimal für Glanzlichter klont und Position und Füllfarbe für jede der geklonten Formen festlegt. Anschließend werden die vier geklonten Formen zusammen mit der ursprünglichen Form verwendet und als Gruppenelement zurückgegeben.

function makeShadow(path){ var shadow1 = path.clone(); shadow1.fillColor = new RGBColor(0.92, 0.92, 0.92); var shadow2 = path.clone(); shadow2.fillColor = new RGBColor(0.84, 0.84, 0.84); var highlight1 = path.clone(); highlight1.fillColor = new RGBColor(1, 1, 1); var highlight2 = path.clone(); highlight2.fillColor = new RGBColor(0.97, 0.97, 0.97); return new Group([highlight2, highlight1, shadow1, shadow2, path]);}

Wenn Sie es jetzt angesehen haben, ist die neue Schatten und markieren Sie CompoundPaths wäre da; Sie würden sich jedoch unter dem ursprünglichen CompoundPath verstecken.

Um sie aus dem Versteck zu bringen, müssen wir noch einen weiteren Trick ausführen: Versetzen Sie die Schatten und Lichter des ursprünglichen CompoundPath.

Schatten und Lichter ausgleichen

Wir müssen die Methode adjustShadow () aufrufen, um die Shadow- und Highlight-CompoundPaths zu versetzen, die sich derzeit unter dem ursprünglichen CompoundPath verstecken.

Unten:

Welche der folgenden Bewegungen verherrlichte den Krieg?
var group = makeShadow(shape);

Hinzufügen:

adjustShadow(group, new Point(1, 1));

Nachdem die CompoundPaths Shadow und Highlight erstellt wurden, werden ihre Positionen versetzt Sie sind jetzt sichtbar dank folgender Methode:

function adjustShadow(group, vector){ var position = group.lastChild.position; group.children[0].position = position + vector * 3; group.children[1].position = position + vector * 1.5; group.children[2].position = position + vector * -3; group.children[3].position = position + vector * -1.5;}

Tool: Maus-Ereignishandler

Das letzte bisschen Magie, das wir hinzufügen möchten, ist die Möglichkeit, die Richtung der Lichtquelle basierend auf der Position der Maus anzupassen.

Durch Hinzufügen einer Methode für onMouseMove möchten wir den Abstand zwischen dem Zentrum der Gruppe CompoundPaths und der Position der Maus ermitteln. Danach klemmen wir die Länge des Vektors mit einem Minimum und Maximum. Dies schafft wiederum die Illusion, dass wir die Richtung des Lichts kontrollieren .

Besonderer Dank geht an Jonathan, der sich die Zeit genommen hat, hervorragende Vorschläge zur Verschärfung dieses Artikels zu machen.

Zusätzliche Ressourcen

Paper.js

paperjs.org/tutorials/

Drehbuchautor
scriptographer.org/tutorials/

wird bearbeitet

Einige Beispiele für Paper.js wurden von hier abgeleitet: process.org/learning/topics/follow3.html

HTML5 Canvas
www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html