Tervetuloa Framer-opetusohjelman toiseen osaan. vuonna viimeinen artikkeli , opimme Framer-laitteen suunnittelun käyttämisen perusteista sekä siitä, miten kirjoitetaan yksinkertainen koodi, jotta mallimme heräävät eloon. Tässä kappaleessa keskitymme Framerin käyttöön mikrointeraktioiden ja animoitujen siirtymien luomiseen. Käymme läpi kuinka luoda seitsemän hyödyllistä vuorovaikutusta prototyypeillesi.
Sujuva liike, tilamuutokset ja hienovaraiset siirtymät auttavat käyttäjää ymmärtämään käyttöliittymän käyttöä antamalla hänelle palautetta tietyistä toiminnoista. Usein nämä siirtymät toistavat reaalimaailman analogeja (kuten kytkinohjaimen liukuminen) tai käyttävät yleisiä laitetoimintamalleja (kuten napauttamalla laajennettavaksi). Tässä opetusohjelmassa keskitymme vuorovaikutuksiin, jotka lisäävät käyttöliittymään viimeisen silauksen ohjaamaan ymmärrystä ja herättämään iloa käyttäjälle.
Katso alla olevia esimerkkejä. Suunnittelijat ympäri maailmaa luovat näitä mikro-vuorovaikutuksia useissa tuotteissa.
Tässä opetusohjelmassa annan sinulle yleiskuvan jokaisesta mikrointeraktiosta ja joistakin koodinpätkistä. Käytämme useita erilaisia tekniikoita, joten pystyt valitsemaan tuotteellesi parhaiten sopivan. Framer Studion sisällä ei ole mitään 'oikeaa' tapaa luoda mitään - kuten mainitsin edellisessä artikkelissani, Framer antaa sinulle paljon vapautta luoda haluamallasi tavalla.
Oletko nähnyt tällaisia vuorovaikutuksia aiemmin? Toki sinulla on! Näet ne päivittäin älypuhelimellasi. On aika luoda oma.
Toimintopainike edustaa usein nykyisen näytön päätoimintoa. Joskus se sisältää useita toimintoja sisällä. Luomme vuorovaikutusta toista tapausta varten. Lataa toimiva prototyyppi täältä: https://framer.cloud/ShBnH
Aloita luomalla yksi ympyrän muotoinen pääpainike, jonka sisällä on kuvake ja kaksi pienempää nappia pääpainikkeen alle. Älä unohda merkitä kaikkia näitä tasoja interaktiivisiksi suunnittelutilassa (kohdeindikaattorilla).
Luo tasoille kaksi erilaista tilaa. Käytä alla olevaa koodia saadaksesi pienemmät painikkeet liikkumaan pääpainikkeen yläpuolelle ja kiertämään kuvaketta 45 °:
button_1.states.a = y: 427 x: 246 width: 64 height: 64 button_2.states.a = y: 330 x: 246 width: 64 height: 64 icon.states.a = rotation: 45
Tämän prototyypin animoimiseksi meidän on lisättävä tapahtuma. Napauta toimintopainiketta napauttamalla kaikkien tasojen tiloja:
button.onTap -> button_1.stateCycle() button_2.stateCycle() icon.stateCycle()
Tässä vaiheessa animaatio näyttää hyvin mekaaniselta. Ihmisen kosketuksen lisäämiseksi lisäämme kevätanimaation kaikille tasoille:
button_1.animationOptions = curve: Spring(tension: 170, friction: 12) button_2.animationOptions = delay: 0.05 curve: Spring(tension: 170, friction: 12) icon.animationOptions = curve: Spring(tension: 250, friction: 5)
Toimintopainike on käyttövalmis!
Seuraavien vaiheiden avulla voit luoda oman vuorovaikutuksen. Lataa toimiva prototyyppi täältä: https://framer.cloud/ieypV
Tarvitset vain kaksi asiaa: itse kytkimen, joka sisältää vähintään kaksi tasoa (tausta ja piste), ja joidenkin kerrosten animoimiseksi kytkimen käytön jälkeen.
Muistatko ensimmäinen artikkeli kuinka suunnitella tiloja suoraan Framer Studiossa? Suunnittele tilasi haluamallasi tavalla tai käytä asetuksiani:
dot.states.a = x: 50 backgroundColor: 'rgba(5,106,161,1)' switch_bg.states.a = backgroundColor: 'rgba(0,136,205,1)' icon.states.a = opacity: 0 circle.states.a = x: 37 y: 183 width: 301 height: 301 circle_1.states.a = x: 20 y: 166 width: 337 height: 337
Jotta prototyyppi toimisi, joudumme lisäämään kytkimeen tapahtuman. Napauttamalla kytkintä muutamme kaikkien tasojen tilaa:
switch_1.onTap (event, layer) -> dot.stateCycle() switch_bg.stateCycle() circle.stateCycle() circle_1.stateCycle() icon.stateCycle()
Tee kaikesta luonnollisempaa säätämällä kaikkien tilojen aika ja viive:
dot.animationOptions = time: 0.2 switch_bg.animationOptions = time: 0.2 circle_1.animationOptions = time: 0.5 curve: Spring circle.animationOptions = time: 0.5 delay: 0.05 curve: Spring icon.animationOptions = time: 0.5 curve: Spring
Nyt prototyyppimme on valmis!
Tämä on tyypillinen vuorovaikutus kohteiden poistamiseen, arkistointiin tai tallentamiseen luettelosta. Pyyhkäise vasemmalle tai oikealle, ja kohde tyhjennetään. Lataa prototyyppi täältä: https://framer.cloud/rzMWP
Voit käyttää omaa suunnittelua, jos haluat. Sinun on vain säilytettävä sama kerrosten rakenne. Kuten yllä olevasta kuvasta näet, kaikkien luettelokohteiden alla on “Kumoa” -painike.
Yksinkertaisuuden vuoksi luomme vuorovaikutuksen vain ensimmäiselle luettelokohteelle. Tee ensin luettelokohde vedettäväksi: item.draggable = true
.
Lukitse sitten pystyakseli: item.draggable.vertical = false
.
Määritä vedettävän alueen rajoitukset: item.draggable.constraints
Ja lopuksi aseta koon nimikkeen koko: size: item
.
Näin koko koodi näyttää:
item.draggable = true item.draggable.vertical = false item.draggable.constraints = size: item
Nyt voit pyyhkäistä vasemmalle ja oikealle, ja kohde palaa aina alkuperäiseen asentoonsa.
Luo seuraavaksi luettelokohteen tila, kun se poistetaan. Siirsin sen yksinkertaisesti ruudun ulkopuolelle käyttämällä x-akselia.
item.states.a = x: -360
Lopuksi meidän on luotava liipaisin vuorovaikutuksen aloittamiseksi. Kun vedämme kohteen näytön vasemmalle puolelle, se on poistettava. Koodi näyttää tältä:
item.onMove -> if item.x <-70 item.stateCycle('a')
Tässä tapauksessa käytämme ”jos” -lausetta. Yllä oleva koodi sanoo periaatteessa, että kun siirrämme tuotekerrosta yli 70 kuvapistettä, vaihdamme alkion tilaksi tilaksi 'a'. Voit lukea, jos Framer Studio -dokumentaatiossa olevat lauseet: https://framer.com/getstarted/programming/#conditional
Olemme melkein valmiit tähän vuorovaikutukseen. Ainoa asia on kumota tämä toiminto:
item_bg.onTap -> item.stateCycle('default')
Sinun tulisi tuntea tämä koodi edellisestä opetusohjelmasta.
Halutessasi voit säätää animaation ajoitusta:
item.animationOptions = time: 0.75 curve: Spring
Tämä on erittäin hyödyllinen vuorovaikutus toiminnoissa, jotka edellyttävät käyttäjän lataamista tai odottamista. Kun luomme tämän vuorovaikutuksen, opit hallitsemaan monia animaatioita, jotka tapahtuvat yksitellen. Lataa prototyyppi täältä: https://framer.cloud/FxmHN
Luo yksinkertainen painike, jossa on neljä alikerrosta: edistymispalkki ja kolme kuvaketta eri tiloille. Suunnittelin painikkeeni, jonka latauskuvake oli näkyvissä, etenemispalkki alhaalla, leveys 0, ja kaksi muuta piilotettua kuvaketta.
Koko tämä prototyyppi voidaan tehdä kirjoittamatta yhtä riviä koodia, vain käyttämällä Framerin autokooditoimintoja.
Lisää ensin tapahtuma. Käynnistämme koko vuorovaikutuksen napauttamalla nappikerrosta:
Tämä on koodi, jonka Framer kirjoitti sinulle:
button.onTap (event, layer) ->
Kaikkien animaatioiden suunnittelussa käytämme Framerin autokooditoimintoja:
Olen suunnitellut neljä animaatiota eri ajoituksella:
Tässä on koodi, jonka Framer kirjoitti jokaiselle näistä animaatioista:
# change progress bar width progress.animate width: 247 options: time: 1.4 curve: Bezier.ease # hide upload icon upload.animate opacity: 0.00 y: 39 options: time: 0.2 curve: Bezier.ease # show and rotate loader icon load.animate opacity: 1.00 rotation: 360 options: time: 1 curve: Bezier.ease # show and scale check icon done.animate opacity: 1.00 scale: 1.4 options: time: 0.2 curve: Bezier.ease delay: 1.00
Kuten olet ehkä huomannut, emme piilottaneet latauskuvaketta animaation valmistuttua. Viimeistele tämä prototyyppi käynnistämällä toinen animaatio käyttämällä tätä tapahtumaa: load.onAnimationEnd ->
load.animate opacity: 0.00 options: time: 0.2 curve: Bezier.ease
Lähes jokainen tuote, jonka sisällä on luettelo, käyttää tällaista vuorovaikutusta. Käyttäjä vetää koko luettelon alas päivittääksesi sen. Se on erittäin helppo luoda. Lataa prototyyppi täältä: https://framer.cloud/DgMDw
Voimme hypätä suoraan suunnittelutilaan. Tarvitsemme kahta asiaa: luettelon ja päivityskuvakkeen. Tärkeintä tässä on piilottaa päivityskuvake peittävyydellä ja laittaa se luetteloomme:
Haluamme tehdä luettelostamme vieritettävän. Voit tehdä tämän käyttämällä vierityskomponenttia ja lisäämällä siihen luettelotason:
scroll = new ScrollComponent size: Screen scrollHorizontal: false list.parent = scroll.content
Luo kuvakkeelle yksinkertainen tila:
icon.states.a = opacity: 1
Luettelomme on vieritettävissä juuri nyt. Tämä tarkoittaa, että kun vieritämme ylös- tai alaspäin, koko vierityssisältö liikkuu y-akselilla. Tämän tiedon avulla voimme luoda tapahtuman:
scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle('a')
Jälleen käytämme ”jos” -lausetta. Jos luettelo vedetään alas (siirretään y-akselilla) yli 180 kuvapistettä, käynnistämme toiminnon. Tässä tapauksessa animoimme kaksi tasoa: luettelon ja päivityskuvakkeen.
scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle('a') list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1
Käytämme “animoida” siirtämään luetteloa alaspäin 210 kuvapistettä ja kiertämällä päivityskuvaketta 360 °.
Prototyyppi on melkein toimiva, mutta meidän on nollattava kaikki kerrokset päivitysanimaation jälkeen. Tätä varten käytämme tapahtumaa animaation päättymisen jälkeen:
icon.onAnimationEnd ->
Animoimme päivityskuvakkeen kiertämisen takaisin alkuperäiseen asentoonsa ja palautamme tilasyklin avulla luettelon ja kuvakkeen taustan tilan:
scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle('a') list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1 icon.onAnimationEnd -> refresh.animate rotation: 0 list.stateCycle('default') icon.stateCycle('default')
Se siitä!
Oletko koskaan huomannut, että kun vedät kohdetta sovelluksen sisällä, itse tuotteella tapahtuu aina jotain? Joskus kohde kutistuu, ehkä muut kohteet ovat epätarkkoja tai peittävyys muuttuu. Oppitaan kuinka luoda tällainen vuorovaikutus. Lataa toimiva prototyyppi täältä: https://framer.cloud/YstiW
Luo ruutujen ruudukko ja varmista, että ne ovat pääelementin sisällä.
“for
loop ”saattaa kuulostaa pelottavalta, mutta se on todella yksinkertaista. Jos et tunne for
silmukoita, voit ensin lukea hieman taustaa: https://framer.com/getstarted/programming/#loops-and-arrays
Käytämme for
silmukka kohdistaa kaikki laatat ruudukon sisällä:
for item in grid.subLayers
Tällä yksinkertaisella koodirivillä kohdistat kaikki ruudukkokerroksen sisällä olevat kerrokset.
Tee jokaisesta ruudukon sisällä olevasta kohteesta vedettävä:
for item in grid.subLayers item.draggable = true
Kaikilla kohteilla tulisi olla tila, kun niitä vedetään. Sinun on aloitettava koodista, mutta myöhemmin voit muokata tätä tilaa tasoeditorissa:
for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)'
Meidän on luotava tapahtumia käynnistämään eri tilat, kun kohdetta vedetään. Ensimmäinen tapahtuma laukaisee toiminnon, kun alamme vetää:
for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle('a')
Käytin this.bringToFront()
varmistaaksesi, että kohde on aina muiden tasojen yläpuolella.
Toinen liipaisin palauttaa kohteen tilan:
for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle('a') item.onDragEnd -> this.sendToBack() this.stateCycle('default')
Tässä vaiheessa meillä on toimiva prototyyppi.
Vuorovaikutus tapahtuu aina aikajanalla. On hyvä säätää aikajanaa täydellisen vaikutuksen saavuttamiseksi:
for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle('a') item.onDragEnd -> this.sendToBack() this.stateCycle('default') item.animationOptions = time: 0.3 curve: Spring
Tässä prototyypissä käytämme kehittyneempiä tekniikoita näyttämään sinulle erilainen tapa kohdistaa tasoja Framer Studiossa, joka rakentaa entistä reagoivampia vuorovaikutuksia lyhyemmällä ajanjaksolla. Jos et ole perehtynyt peruskoodaukseen, kehotan sinua lukemaan tämä artikkeli ensin: https://blog.framer.com/code-less-achieve-more-with-arrays-in-framer-c43594d13d59
Tätä vuorovaikutusta varten ohitamme suunnitteluosan ja käytämme prototyyppiä, jonka olen luonut nimenomaan tähän artikkeliin: https://framer.cloud/SZMCH
Katso kerrosten rakennetta Framer Studion sisällä:
Meillä on 'painike' 'rivin' sisällä 'luettelo' -ryhmässä. Luomme vuorovaikutuksen painikekerroksille, joten meidän on kohdistettava ne. Mutta ensin on löydettävä kaikki rivikerrokset ja laitettava ne taulukon sisään:
rows = list.children buttons = []
Olen myös luonut tyhjän taulukon kaikille painikkeen tasoille: buttons = []
.
Aloitetaan 'for loop':
for i in rows buttons.push(i.children[0])
Kerrosten lisäämiseksi taulukkoon käytämme: buttons.push()
. Tämä tarkoittaa, että laitamme jokaisen 'rivi' -ryhmän ensimmäisen kerroksen taulukon sisään.
Nyt luomme tilan tykkää-painikkeillemme ja lisätään niihin tapahtuma napauttamalla:
for i in buttons i.states.a = scale: 1.2 hueRotate: -80 i.onTap -> this.stateCycle() i.animationOptions = time: 0.3 curve: Spring
Tämän tekniikan avulla voit luoda kaikki aiemmat prototyypit ja tehdä niistä monimutkaisempia.
Kun luot mikrointeraktioita, keskityt pienimpiin yksityiskohtiin. Voit luoda animaatioita minkä tahansa toiminnan laukaisemana ja tehdä niistä täysin täydellisiä. Muista, että on olemassa satoja tapoja luoda sama prototyyppi, ja sinun tulisi käyttää menetelmää, joka sopii taitoihisi ja tuotesuunnittelusi tarpeisiin.
• • •