Kehittäjämoduulin kehittäminen

Framer Studio on erinomainen prototyyppityökalu suunnittelijoille. Se ei vain mahdollista kehittää hienostuneita prototyyppejä, mutta sen ominaisuuksia voidaan laajentaa moduulien avulla. Löydät verkosta paljon hienoja moduuleja, mutta entä jos haluat rakentaa omat?

Valitettavasti Framer Studion ydinkielen, CoffeeScriptin, tuntemisen tarpeeksi, jotta voidaan luoda interaktiivisia animaatioita ja pystyä tuottamaan jopa yksinkertainen moduuli, on riittävän suuri ero. Yritämme korjata aukon täällä.

Aiomme luoda moduulin nimeltä “GhostLayer”, joka helpottaa kerrosten haalistumista vuorovaikutteisesti. Teemme tämän määrittelemällä luokan, joka laajentaa oletuskerrosta. Tämä tarkoittaa, että luokallamme on kaikki tason tavanomaiset ominaisuudet - voit sijoittaa sen x: llä ja y: llä, antaa sille varjon jne. - samalla kun sallit myös joitain mukautettuja toimintoja, joita tarjoamme.

Voit seurata haluamaasi tekstieditoriin tai itse Framer Studioon. *

Luo uusi tekstitiedosto ja tallenna se nimellä GhostLayer.coffee. Aloitamme julistamalla, mitä olemme tekemässä. Kirjoita seuraava asiakirjaan:

luokka GhostLayer laajentaa kerrosta

Täällä sanomme, että aiomme luoda uuden vientiobjektin luokan GhostLayer. Koska se on vain eräänlainen kerros, se perii kaikki tason tavalliset ominaisuudet.

Aina kun uusi tyyppi GhostLayer luodaan, se alustetaan muistissa. Kaikki mitä haluamme mennä GhostLayerin alkutilaan, on ilmoitettava luokanrakentajassa. Lisäämme sen seuraavaksi.

¬ rakentaja: (@ options = {}) ->

Huomaa, että CoffeeScriptissä sisennys on merkityksellinen. Käytän symbolia ¬ merkinnän syvyyden osoittamiseksi.

Näet @ -merkin usein, kun rakennamme tätä koodia. Se on CoffeeScriptin pikakuvake, joka tarkoittaa ”tätä”. @Options on osa leikepöydästä, jonka varaamme käyttöön moduulissa.

GhostLayer -sovelluksemme on kyettävä läpinäkyvyyteen, jotta siitä olisi mitään hyötyä. Tässä on rakentajamme kokonaisuudessaan:

¬ rakentaja: (@ options = {}) ->
¬ ¬ @ options.tläpäisevä? = Väärä
¬ super @valinnat

Olemme myöntäneet GhostLayerillemme uuden ominaisuuden, jolla kerroksilla yleensä ei ole: ominaisuus, joka on läpikuultava. Tätä ominaisuutta kutsutaan booleaniksi siinä mielessä, että se voi olla vain tosi tai väärä. Asetamme sen painikkeella? = Osoittamaan, että käyttäjä voi antaa arvon. väärä on oletusarvo tässä tapauksessa.

Kaikki muut luokan ominaisuudet, jotka voit lisätä, lisättäisiin rakentajaan ennen super @options. Tämä super @ valinnat on se, mikä käärii alustuksen ja lisää mukautetut ominaisuudet kerrokseen. Varmista vain, että jokainen ominaisuus on omalla rivillään ja noudattaa samaa sisennystä ja syntaksia.

Tällä hetkellä läpikuultava ei tee mitään. Meidän on selvitettävä, minkä vaikutuksen omaisuuden tulisi tuottaa rakentajan sisällä - sisennysasteen mukaan.

¬ ¬ jos @ options.translucent on totta
¬ ¬ ¬ @ .pakkaus = 0,5

Muista, että @ vastaa "tätä". Koska olemme luokan määritelmässä, "tämä" tarkoittaa itse luokkaobjektia - GhostLayeria. Asetamme GhostLayerin opasiteetin arvoon 0,5, jos läpinäkyvyys on käytössä.

Tämän ominaisuuden avulla käyttäjä voi asettaa oletusarvoisen läpinäkyvyyden uuden GhostLayerin luomisessa. Hän kirjoitti Framer Studio -sovellukseen seuraavan koodin, mikä vastaa sen lisäämistä prototyypin pääohjelman app.coffee-tiedostoon (älä lisää tätä GhostLayer.coffee -asiakirjaasi - tämä on moduulin käyttäjälle):

GhostLayer = vaadi "GhostLayer"
myGhost = uusi GhostLayer
¬ läpikuultava: totta

Saatamme kuitenkin haluta antaa käyttäjän vaihtaa läpinäkyvyyttä muina aikoina kuin alustuksen yhteydessä. Tätä varten meidän on määritettävä läpikuultavaan omaisuutemme getter ja setter. Tämä tehdään myös rakentajan ulkopuolella, mutta silti luokan määritelmän sisällä.

¬ @define 'läpikuultava',
¬ ¬ saada: ->
¬ ¬ ¬ @ options.tläpäisevä
¬ ¬ asetettu: (arvo) ->
¬ ¬ ¬ @ options.translucent = arvo

Tämä on tyypillinen malli gettereille ja settereille. Huomaa, että @define-käskyn merkkijonon on täsmälleen vastattava sen vaihtoehdon nimeä, johon getter ja setter vaikuttavat.

Sovittajamme ja asettajamme antavat käyttäjän lukea läpinäkyvän ominaisuuden nykyisen tilan käyttämällä

tulosta myGhost.translucent

tai muuta sitä käyttämällä

myGhost.translucent = totta

Mutta vaikka omaisuutta päivitetään arvolla tosi, tällä ei ole näkyvää vaikutusta GhostLayeriin. Meidän on lisättävä lisää koodia asettajaan varmistaaksemme, että visuaaliset tulokset synkronoidaan aina ominaisuuden arvoon.

¬ @define 'läpikuultava',
¬ ¬ saada: ->
¬ ¬ ¬ @ options.tläpäisevä
¬ ¬ asetettu: (arvo) ->
¬ ¬ ¬ @ options.translucent = arvo
¬ ¬ ¬ jos @ options.translucent on totta
¬ ¬ ¬ ¬ @ .pakkaus = 0,5
¬ ¬ ¬ muu
¬ ¬ ¬ ¬ @ .opacity = 1.0

”Tämä” (@) moduulin leksikassa on edelleen GhostLayer-kerrosobjekti. Asetamme GhostLayerin opasiteetiksi 50%, jos läpikuultava on totta, tai 100%, jos se ei ole.

Leksinen laajuus voi olla hankala asia ymmärtää. Tarkastellaan sitä hiukan enemmän tekemällä GhostLayerista hieman interaktiivisempi. Kun GhostLayeria napsautetaan, haluamme sen haalistuvan läpikuultavaan tai läpinäkymättömään tilaan riippuen.

Palaa rakentajaan ja lisää onClick-tapahtumakäsittelijä, joka laukaisee fade () -nimisen toiminnon. (Emme vaadi täältä sulkuja, mutta tarvitset niitä, jos soitat toimintoon moduulin ulkopuolelta.)

¬ rakentaja: (@ options = {}) ->
¬ ¬ @ options.tläpäisevä? = Väärä
¬ super @valinnat
¬ ¬ @ .onClick @fade

@ .onClick tarkoittaa "kun tätä napsautetaan" - "tämä" tarkoittaa taas itse GhostLayeria.

@Define-lauseen alapuolella ja luokassa (ts. Kerran luetelmakohta) määrittelemme fade () -funktion.

¬ häivytys: ->

Haalistumisen () sisältö muistuttaa sitä, mitä olemme tarjonneet yllä olevalle setterille, paitsi käänteinen; siirrymme läpinäkyvien ja läpinäkymättömien tilojen välillä. Meidän pitäisi myös pitää ominaisuus boolean synkronoituna visuaalisen tuloksen kanssa, kun teemme niin.

¬ häivytys: ->
¬ ¬ jos @ options.translucent on totta
¬ ¬ ¬ @ options.translucent = false
¬ ¬ ¬ @ .elävä
¬ ¬ ¬ ¬ ominaisuudet:
¬ ¬ ¬ ¬ ¬ opasiteetti: 1,0
¬ ¬ muu
¬ ¬ ¬ @ options.translucent = totta
¬ ¬ ¬ @ .elävä
¬ ¬ ¬ ¬ ominaisuudet:
¬ ¬ ¬ ¬ ¬ opasiteetti: 0,5

Tämä toimii tarpeeksi hyvin ja tuottaa mukavan animoidun vaikutuksen. Mutta entä jos meistä tulee hieman monimutkaisempia? Ehkä haluamme varmistaa, että kerros ei ole keskellä animaatiota jo käynnistäessään opasiteetin muutoksen. Loppujen lopuksi se saattaa aiheuttaa ei-toivottua välkyntävaikutusta. Framer tarjoaa juuri tätä tarkoitusta varten mekanismin, jota kutsutaan debounceksi. Näyttää siltä, ​​että:

Utils.debounce 0.5, ->

Aikaväli (tässä puolen sekunnin ajan 0,5) on eräänlainen ”cooldown”. Toiminto ei käynnisty uudelleen ennen kuin cooldown on päättynyt, vaikka se olisi käynnistynyt sillä välin.

Lisäämällä tämä haalistumaan () näyttää siltä, ​​että:

¬ haalistuminen: Utils.debounce 0.5, ->
¬ ¬ jos @ options.translucent on totta
¬ ¬ ¬ @ options.translucent = false
¬ ¬ ¬ @ .elävä
¬ ¬ ¬ ¬ ominaisuudet:
¬ ¬ ¬ ¬ ¬ opasiteetti: 1,0
¬ ¬ muu
¬ ¬ ¬ @ options.translucent = totta
¬ ¬ ¬ @ .elävä
¬ ¬ ¬ ¬ ominaisuudet:
¬ ¬ ¬ ¬ ¬ opasiteetti: 0,5

Loistava. Mutta heitetään itsellemme leksikaalinen ulkonäkö. Kokeile lisätä pieni viive toimintoon:

¬ haalistuminen: Utils.debounce 0.5, ->
¬ ¬ Utils.delay 0.5, ->
¬ ¬ ¬ jos @ options.translucent on totta
¬ ¬ ¬ ¬ @ options.translucent = false
¬ ¬ ¬ ¬ @ .elävä
¬ ¬ ¬ ¬ ¬ ominaisuudet:
¬ ¬ ¬ ¬ ¬ ¬ opasiteetti: 1,0
¬ ¬ ¬ muu
¬ ¬ ¬ ¬ @ options.translucent = totta
¬ ¬ ¬ ¬ @ .elävä
¬ ¬ ¬ ¬ ¬ ominaisuudet:
¬ ¬ ¬ ¬ ¬ ¬ opasiteetti: 0,5

Nyt meillä on ongelma. Soittamalla toiminnon globaaliin kontekstiin Utils, olemme muuttaneet nykyistä sanallista laajuuttamme. Emme enää kuulu toiminnon piiriin. Sen sijaan olemme poistuneet globaalimmasta laajuudesta, joka ei tiedä asioista, kuten @ options.translucent. Jos jätät moduulin näin ja yrität käyttää sitä Framer Studiossa, saat virheitä asioista, joita ei ole määritelty.

Onneksi ratkaisu on yksinkertainen. Pakotamme Framerin pitämään leksisen laajuuden vaihtamalla yhden nuolemme laajuutta ylläpitävään ”rasvaan” nuolelle. Etsi => alla:

¬ haalistuminen: Utils.debounce 0.5, ->
¬ ¬ Utils.delay 0.5, =>
¬ ¬ ¬ jos @ options.translucent on totta
¬ ¬ ¬ ¬ @ options.translucent = false
¬ ¬ ¬ ¬ @ .elävä
¬ ¬ ¬ ¬ ¬ ominaisuudet:
¬ ¬ ¬ ¬ ¬ ¬ opasiteetti: 1,0
¬ ¬ ¬ muu
¬ ¬ ¬ ¬ @ options.translucent = totta
¬ ¬ ¬ ¬ @ .elävä
¬ ¬ ¬ ¬ ¬ ominaisuudet:
¬ ¬ ¬ ¬ ¬ ¬ opasiteetti: 0,5

Haalistumisominaisuuksemme toimii jälleen odotetusti.

Lisää nyt seuraava rivi loppuosaan kääriäksesi kaiken:

module.exports = GhostLayer

vienti on eräänlainen jaettu leikepöytä, mutta sellainen, jota moduulin kotelointiin käytettävä prototyyppi voi myös käyttää. Kaikki viennissä olevat muuttujat tai toiminnot ovat kaikki prototyypin käytettävissä. Haluamme pystyä käyttämään GhostLayer-luokkaa, joten muistamme viitata siihen tässä.

Se riittää toimivaan moduuliin. Luo uusi asiakirja Framer Studiossa käyttääksesi sitä prototyyppinä. Tallenna asiakirja paikalliseen hakemistoon ja avaa sitten .framer-kansio siellä. Etsi ”moduulit” -kansio. Sieltä sinun on kopioitava GhostLayer.coffee-moduulimme. Kun olet valmis, lisää seuraava koodi prototyyppisi:

GhostLayer = vaadi "GhostLayer"
myGhost = uusi GhostLayer
¬ läpikuultava: väärä

(Voit käyttää läpikuultavaa: totta, jos haluat. Kerros on vain vaikeampi nähdä.)

Yritä napsauttaa GhostLayer -sovellusta muutaman kerran ja tarkista animaatio. Muista, että GhostLayer on vain eräänlainen kerros. Voit tehdä sen kanssa mitä tahansa, mitä tekisit normaalille kerrokselle. Voit määrittää taustavärin, sijoittaa sen jne.

Voit ladata kopion moduulista täältä tai koko prototyypin täältä.

Jos sinulla on prototyyppi Apple TV: lle, meillä on siisti RemoteLayer-moduuli, jonka sinun kannattaa tarkistaa.

* Framer Studio kompastuu vienti-avainsanan päälle. Jos jätät sen pois, voit kirjoittaa moduulin Framer Studiossa ja hyötyä sen täydentämisestä ja virheiden tarkastamisesta. Sinun on lisättävä se takaisin moduulin suorittamiseen. Minulla on tapana kommentoida vientilinjaa kehittämisen aikana, sitten kommentoida sitä ennen kuin liittää moduulin omaan .coffee-tiedostoon.

Tilaa BPXL Craft ja seuraa Black Pixel Twitterissä saadaksesi lisää näkemyksiä suunnittelusta ja kehityksestä.