Share
Hype 3, av Tumult, er et OS X-program for å lage HTML5 animasjoner. Hvis du noen gang brukte Flashs ikoniske tidslinjeverktøy, vil Hype 3-grensesnittet virke veldig kjent. I denne opplæringen vil vi raskt bli kjent med programmet, så skal vi lage en grunnleggende Material Design animasjon ved hjelp av tilgjengelige verktøy.
Hype 3, på tidspunktet for skriving, koster $ 49,99 for standardprogrammet, eller hvis du trenger mer avanserte funksjoner, er Hype 3 Professional tilgjengelig for $ 99.99. Du kan laste ned en 14-dagers prøveversjon for å følge med.
Og beklager, dette er bare Mac.
Som Mac-bruker vil du være helt hjemme med appoppsettet. Vi bruker Hype 3 standard utgave (pro-versjonen har en mørkere, fyldigere brukergrensesnitt), så la oss gå gjennom hoveddelene:
Hype 3s grensesnittNår du åpner programmet vil du bli gitt et tomt dokument som standard. Begynn med å finne ut hvor stor du vil ha lerretet ditt.
Kategorien "Scene"Under scene fanen vil du se noen alternativer for å angi den aktuelle scenen. Jeg har valgt å gi lerretets dimensjoner på 600x400px. Med det som er gjort, klikk på fargeplukkeren under Bakgrunn og endre det til # 424242.
Merk: Vi vil bare jobbe med en scene og en tidslinje i denne opplæringen, men det er mulig å ha flere scener, med mange tidslinjer, og bytte mellom dem alle.
Vi skal animere en av Google Material Designs flytende action knapper, så hodet opp til Elements menyikon og velg ellipse:
Bruk musepekeren til å tegne på scenen skifte vil begrense proporsjonene til en sirkel (i likhet med alle grafikkprogrammer). I henhold til retningslinjene for materialdesign skal den store flytende handlingsknappen være 56px bred, med et ikon på 24px. Gjør din proporsjonal med disse tallene:
Tips: gå til Vis> Vis linjal for å få herskerne til å vises sammen med scenen din. Dra noen guider, fra herskerne til scenen, for å hjelpe deg med å plassere objekter.
Med ellipsen valgt, under Element fanebladet du kan endre bakgrunnsfargen (jeg har brukt # 00E676 fra fargepaletten Materielldesign) og fjern grensen.
Også under Element fanen, ser du at du kan legge til en skygge i sirkelen. Jeg har gitt oss 5px uskarphet, og flyttet det 5px på Y-aksen. Den har en farge på # 2E2E2E, men du vil ikke kunne velge noen blandemoduser. Nå ser det veldig ut som "Material Design", jeg tror du er enig:
For å legge til et "pluss" -symbol til knappen har vi et par alternativer som er åpne for oss. Vi kunne bruke tegneverktøyene til å gjøre det selv, men verktøyene er begrenset (spesielt hvis du er vant til Adobe Illustrator eller Sketch-frihet). I stedet skal vi ta tak i SVG-ikonet fra Google.
Velg ikonet "legg til", velg den hvite varianten, og last den ned.
Du kan nå dra SVG-filen direkte inn i dokumentet ditt, på hvilket tidspunkt vil det bli lagt til som et bildelag.
Med SVG-ikonet valgt, under metrics kategorien, kontroller at det er riktig størrelse for animasjonen din:
SVG-ikonet vårt har ikke blitt importert som en redigerbar vektor. I stedet, hvis du ser på Elements fanen, ser du at den er en egen ressurs og brukes som et bakgrunnsbilde. Dette betyr at vi ikke kan endre fargen, eller noe annet slikt (skam).
Også denne tilnærmingen kan forårsake problemer i noen nettlesere, men Hype 3 vil advare deg om det:
Som med mange grafikkprogrammer, kan du nå velge de to lagene vi har lagt til vår tidslinje, og deretter gå til Ordne> Gruppe å organisere dem litt bedre. Dobbeltklikk gruppelagnavnet for å endre navn på det:
Hype 3 gir et par metoder for å animere objekter og deres egenskaper. Vi begynner med det mest enkle, så fortsett og slå den store, røde Ta opp knapp:
Dra nå hodet over tidslinjen, stopper ved ramme 24.
Merk: Du vil se sekunder merket langs tidslinjen, hver med 30 rammer.
Med stykkhodet nå på ramme 24, velg "legg til" -ikonet, gå til metrics kategorien i høyre sidefelt, og finn deretter rotasjon delen og endre Z verdi til 45 °. Dette vil rotere ikonet, slik at det nå ser ut som et kryss (×).
Du kan nå klikke på Ta opp knappen igjen, for å avslutte prosessen.
Hype 3 har automatisk lagt til en egenskapsnøkkelramme ved starten av tidslinjen (dette er begynnestaten) og en på slutten av animasjonen (sluttstaten). I dette tilfellet har vi bare endret Rotasjonsvinkel (Z) eiendom, så det er der keyframes vises.
Hvis du trykker på spill, eller drar avspillingshode langs tidslinjen, vil du se at ikonet animerer jevnt mellom de to egenskapsstatene.
For å gjøre det enklere å se hva som skjer på tidslinjen, gjør tidslinjens skalaverdi høyere ved hjelp av skyvekontrollen øverst til høyre:
Med vår eiendoms animasjon valgt (klikk på den) kan vi endre lettelse typen som brukes på animasjonen. Som standard vil det være ease-in-out, som betyr at animasjonen vil begynne sakte, akselerere, senk deretter igjen mot slutten.
Hva skal vi annet animere? La oss få det til å se ut som vår knapp gjør noe - vi vil vise et kort når knappen ser ut til å ha blitt klikket.
Bruke Elements menyen for å legge til en Rektangel til scenen. Navn laget "Card". Gi den en bakgrunnsfarge (# 757575) og legg laget under knappegruppen. Plasser den av scenen, til bunnen, og reduser dens Opacity til 0 (vi skal animere et par egenskaper denne gangen).
Nå, i stedet for å treffe Ta opp, denne gangen skal vi gjøre ting manuelt. Med avspillingshode i begynnelsen av animasjonen, og Kortlaget valgt, klikker du Legg til Keyframe på opacity eiendomslag. Deretter flytter du spillerhodet til slutten av animasjonen og legger til en annen keyframe.
Mens på den endelige keyframe, i Element tab, gi rektangelet en opacitet på 100%. Du vil nå ha en pen animasjon mellom de to statene.
Etter å ha animert opaktheten av rektangelet, animer nå sin posisjon (vi vil at den skal glide oppover). Dette oppnås med Origin (Top) -egenskapen, så gjenta prosessen vi nettopp gjorde, legg til en keyframe i begynnelsen av animasjonen, en på slutten, og deretter endre rektangelens posisjon på den endelige keyframe.
Du bør se en strekning som angir bevegelsen tatt av rektangelet:
For øyeblikket skjer alt på samme tid, så snart scenen starter, men vi kan endre det. La oss gjøre det slik at det er kort forsinkelse, så ikonet roterer raskt, og kortet glir inn gradvis.
Dra animasjonsfeltene på den øvre tidslinjen, slik at de taster de forskjellige elementene annerledes:
Merk: Ikke glem at du kan endre lettelsen for å gi forskjellige effekter. Ta en titt på Googles retningslinjer for autentisk bevegelse for mer inspirasjon.
Når animasjonen er fullført, gå over til Fil> Eksporter som HTML5 eller Fil> Eksporter som film. De tilgjengelige alternativene er ganske selvforklarende; velg å sende ut en katalog med HTML sammen med JavaScript og SVG-aktiver, animert GIF, MP4 og så videre.
Husk at når du eksporterer som en film, kan noen interaksjoner du har lagt til (vi ikke i dette tilfellet) ødelegge sekvensen.
Tid for en oppgave! Ved å følge denne opplæringen har du vært bevæpnet med ferdighetene til å ta denne animasjonen ytterligere. Last ned kilden, og du vil finne startfilene du trenger for å ta deg til dette punktet, da:
Tidslinjer er seriøst nyttige for å visualisere animasjon som du bygger. Utover det vi har gjort her, tillater Hype 3 også alle slags interaksjon, hendelser og tidslinjekontroll (men det er en helt annen opplæring). Ha det gøy å leke med disse verktøyene, få bygningen, og vis oss hva du kommer med i kommentarene!
Accentsconagua