Käytä Paper.js: ää luodaksesi interaktiivisia HTML5-animaatioita

Kun uudet JavaScript-kehykset näyttävät ilmeisesti ilmestyvän päivittäin, jotka hyödyntävät HTML5: tä, on haastavaa selvittää, mikä niistä on sopiva kyseessä olevalle projektille. Tässä opetusohjelmassa me (se on Tohtori Woohoo , Claus Wahlers ja Rasmus Blaesbjerg TALO ) aiomme katsoa konepellin alle ja nähdä mitä Paper.js (kehittänyt uskomaton Jrg Lehni ja Jonathan Puckey ) on tarjottava meille vektoripohjaisen animaation ja vuorovaikutteisuuden, joka toimii eri alustoilla. Tutkimme myös, kuinka vankalle pohjalle se on rakennettu ja lopullinen, kuinka helppoa on poimia ja ymmärtää aloittelijoille edistyneille kehittäjille.



Ennen kuin siirrymme tämän opetusohjelman koodin alhaalta ylhäältä käsittelemiseen, tarkastelemme lyhyesti Paper.js: n ja sen edeltäjän, Scriptographerin historiaa sekä sitä, miten objektit on järjestetty kehyksessä ylhäältä. alhaalta katsottuna.



Historia

Paper.js - julkisesti julkistettu kesäkuun lopussa 2011 - syntyi Käsikirjoittaja , joka on uskomaton komentosarjalaajennus Adobe Illustratorille. Tämä on tärkeää huomata, koska Scriptographer otettiin käyttöön vuonna 2001, mikä antoi sille 10 vuoden vankan iteratiivisen kehityksen ja parannukset verrattuna joihinkin muihin, uudempiin vektoripohjaisiin JavaScript-kehyksiin, jotka ovat nykyään olemassa.

Komentosarjan laajennus Illustratorille? Jos et ole käyttänyt Scriptographer-ohjelmaa, menetät valtavan määrän hauskaa, mutta mikä tärkeintä, se on käsite, joka on kiistatta olennainen voimavara nykyajan suunnittelijalle - ja se on kyky yhdistää koodi ja muotoilu automatisoimaan suunnitteluprosessi ja laajentamaan luovasti mahdollista generatiivisen suunnittelun avulla.

' Generatiivinen suunnittelu on suunnittelumenetelmä, jossa tulos - kuva, ääni, arkkitehtoniset mallit, animaatio - luodaan sääntöjoukolla tai Algoritmi , yleensä tietokoneohjelmalla. ' - Wikipedia



Asiakirjaobjektimalli

Paper.js käyttää hyvin harkittua Dokumenttiobjektimallia (DOM) - jonka linja on vanhempansa, käsikirjoittajan kanssa - jäsentääkseen objektinsa helposti ymmärrettävällä tavalla. Lisäksi, jos olet perehtynyt Adobe Illustratorin ExtendScript DOM -ohjelmaan, olet tyytyväinen Paper.js: ään. Jos olet uusi Paper.js-käyttäjä, mutta olet käyttänyt Illustratoria suunnittelijana ja tiedät JavaScript-perusteesi, olen valmis lyömään vetoa siitä, että DOM: n hierarkia on sinulle toinen luonne.

Adobe Illustrator -asiakirja, -kerros ja yhdistetty polku

miten tehdä lino tulostaa
Adobe Illustrator -asiakirja, -kerros ja yhdistetty polku

Illustratorin käyttäminen metaforana voi olla helpompaa ymmärtää Paper.js: n DOM-hierarkiaa.

Yllä olevassa kuvassa meillä on: 1) Illustratorissa avoin asiakirja, jolla on useita kerroksia 2) Valitulla (aktiivisella) kerroksella 'HAUS-logo' 3) on yhdistetty polku.

Rakenne on sama Paper.js: n DOM: ssä, paitsi että asiakirjaa kutsutaan projektiksi. Siksi koodi siirtyisi jokaisen objektin läpi näin: Project.Layer.CompoundPath.



Projekti: ActiveLayer

Aloitan tyypillisesti luomalla muuttujia, jotka viittaavat nykyisiin kohteisiin (tasot, symbolit, näkymät jne.) projekti . Tässä tapauksessa meitä kiinnostaa vain virta aktiivinen kerros projektista, jota käytämme myöhemmin, kun on aika keskittää kerroksessa oleva sisältö.

var layer = project.activeLayer;

Projekti: CurrentStyle

CurrentStyle määrittelee nykyisen tyylin. Kaikki tyylin määrittelyn jälkeen valitut tai luodut kohteet käyttävät tätä tyyliä.

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

Suorakulmion ja ympyrän polkujen luominen

Jos muistat kuvassa 1, on suorakulmio ja ympyrä, jotka yhdessä luovat yhdistetyn polun. Uudet muotoiset polkukohteet (viiva, suorakulmio, pyöreä suorakulmio, soikea, ympyrä, kaari, säännöllinen monikulmio ja tähti) voidaan luoda käyttämällä erilaisia ​​tekniikoita, mukaan lukien pisteen ja koon määrittäminen:

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

Huomaa: Suorakulmion alkupiste on vasemmassa yläkulmassa.

Jotta HAUS-logo sopisi yhteen, meidän on käännettävä suorakulmio 45º:

rect.rotate(45);

Seuraavaksi luomme keskelle ympyrän logoon, määrittelemällä keskipisteen ja säteen:

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

Huomaa, että vaikka loimme uuden ympyrä , se ei ole näkyvissä. Se on tosiasiassa siellä, mutta se on samaa väriä kuin suorakulmio. Tarkasteltaessa tarkemmin kuvaa 1 huomaa, että ympyrä luo reiän suorakulmion keskelle. Tämä on CompoundPath-ominaisuus.

Yhdistämällä ne CompoundPathiksi

Voit luoda Yhdistetty polku , luomme siitä instanssin ja sisällytämme aiemmin luomamme PathItems-kohteet.

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

Ympyrä luo nyt reiän suorakulmion keskelle. Nyt on aika lisätä joitain Clausin maagisia kohokohtia ja varjoja. Vau!

Varjot ja kohokohdat

Varjojen ja korostusten lisäämiseen CompoundPathiin on kaksi tapaa: HTML5 Canvas Shadows -sovellusliittymän käyttäminen tai sen väärentäminen. Clausin ensimmäinen yritys oli käyttää Shadows API: ta. Valitettavasti sekä Safari että Chrome pyöristävät shadowOffsetX- ja shadowOffsetY-parametriarvot kokonaislukuiksi, mikä johtaa kuoppaisiin animaatioihin näissä selaimissa tien varrella.

Varjon ja korostuksen väärentämiseksi käytämme clone () -toimintoa, sijaintia ja fillColor-ominaisuuksia. Kun olet luonut CompoundPath, siirrämme tämän ilmentymän makeShadow () -menetelmään, joka ottaa muodon, kloonaa sen kahdesti varjoille, kahdesti korostuksille ja asettaa sijainnin ja fillColorin jokaiselle kloonatulle muodolle. Sitten se ottaa neljä kloonattua muotoa alkuperäisen muodon kanssa ja palauttaa ne ryhmäkohteeksi.

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]);}

Jos katsot sitä nyt, uudet varjot ja korosta CompoundPaths olisi siellä; he kuitenkin piiloutuivat alkuperäisen CompoundPath-alle.

Jotta voimme tuoda heidät piilosta, meidän on tehtävä toinen temppu: korvata varjot ja korostukset alkuperäisestä CompoundPathista.

miten piilotat kuvasi Facebookissa

Varjojen ja korostusten tasoittaminen

Meidän on kutsuttava menetelmä adjustShadow () -ominaisuudeksi kompensoidaksemme alkuperäisen CompoundPath -alueen alla tällä hetkellä piilevät Shadow- ja Highlight-yhdistepolut.

Alla:

var group = makeShadow(shape);

Lisätä:

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

Joten kun Shadow- ja Highlight CompoundPath -polut on luotu, niiden sijainnit ovat tasattu, joten ne ovat nyt näkyvissä seuraavan menetelmän ansiosta:

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;}

Työkalu: hiiren tapahtumankäsittelijät

Viimeinen taikaa, jonka haluamme lisätä, on kyky säätää valonlähteen suunta hiiren sijainnin perusteella.

Lisäämällä menetelmä onMouseMove: lle haluamme selvittää ryhmän CompoundPaths keskipisteen ja hiiren sijainnin välisen etäisyyden. Sen jälkeen kiinnitämme vektorin pituuden pienimmällä ja suurimmalla. Tämä puolestaan ​​luo illuusio siitä, että hallitsemme valon suuntaa .

Erityinen kiitos Jonathanille siitä, että hän käytti aikaa tehdä erinomaisia ​​ehdotuksia tämän artikkelin tiukentamiseksi.

Lisäresurssit

Paper.js

paperjs.org/tutorials/

Käsikirjoittaja
scriptographer.org/tutorials/

Käsittely

Joitakin esimerkkejä Paper.js: stä saatiin täältä: processing.org/learning/topics/follow3.html

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