Share
Hype 3, av Tumult, är en OS X-applikation för att skapa HTML5-animeringar. Om du någonsin använt Flashs ikoniska tidslinjeverktyg kommer Hype 3s gränssnitt att vara mycket bekant. I denna handledning kommer vi snabbt att bekanta oss med applikationen, så gör vi en grundläggande materialdesign animering med hjälp av tillgängliga verktyg.
Hype 3 kostar vid skrivetid $ 49,99 för standardprogrammet, eller, om du behöver mer avancerade funktioner, är Hype 3 Professional tillgängligt för 99,99 USD. Du kan ladda ner en 14 dagars provversion för att följa med.
Och förlåt, det här är bara Mac.
Som Mac-användare är du helt hemma med applayouten. Vi använder Hype 3 standardutgåva (pro versionen har en mörkare, fylligare användargränssnitt), så låt oss springa igenom huvuddelarna:
Hype 3: s gränssnittNär du öppnar programmet får du som standard ett tomt dokument. Börja med att ta reda på hur stor du vill ha din duk.
Fliken "Scen"Under Scen fliken kan du se några alternativ för att ställa in den aktuella scenen. Jag har valt att ge dimensionerna på 600x400px. Med det gjort klickar du på färgplockaren under Bakgrund och ändra det till # 424242.
Notera: Vi arbetar bara med en scen och en tidslinje i denna handledning, men det är möjligt att ha flera scener, med många tidslinjer och byta mellan dem alla.
Vi kommer att animera en av Google Material Designs flytande actionknappar, så gå upp till element menyikonen och välj Ellips:
Använd muspekaren för att rita på scenen flytta kommer att begränsa proportionerna till en cirkel (ungefär som alla grafikprogram). Enligt riktlinjerna för materialdesign ska den stora flytande åtgärdsknappen vara 56px bred, med en ikon på 24px. Gör din proportionell mot dessa nummer:
Tips: gå till Visa> Visa linjal för att få härskare att visas tillsammans med ditt stadium. Dra några guider, från linjalerna till scenen, för att hjälpa dig att placera objekt.
Med ellipsen vald, under Element fliken kan du ändra dess bakgrundsfärg (jag har använt # 00E676 från Material Design färgpalett) och ta bort dess kant.
Också under Element fliken ser du att du kan lägga till en skugga i cirkeln. Jag har gett vår 5px oskärpa, och flyttat den 5px på Y-axeln. Den har en färg på # 2E2E2E, men du kommer inte att kunna välja några blandningslägen. Nu ser det väldigt ut "Material Design", jag tror att du håller med om:
För att lägga till en "plus" -symbol till knappen har vi några alternativ öppna för oss. Vi kan använda ritverktygen för att göra det själv, men verktygen är begränsade (speciellt om du är van vid Adobe Illustrator eller Sketch-friheten). Istället kommer vi att ta tag i SVG-ikonen från Google.
Välj ikonen "lägg till", välj den vita varianten och hämta den sedan.
Du kan nu dra SVG-filen direkt i ditt dokument, vid vilken tidpunkt det läggs till som ett bildlager.
Med SVG-ikonen vald, under Metrik fliken, se till att det är rätt storlek för din animering:
Vår SVG-ikon har inte importerats som en redigerbar vektor. I stället om du tittar på element fliken ser du att det är en separat resurs och används som bakgrundsbild. Det betyder att vi inte kan ändra sin färg, eller något annat så (skam).
Dessutom kan det här problemet orsaka problem i vissa webbläsare, men Hype 3 kommer att varna dig för det:
Som med många grafikprogram kan du nu välja de två lager som vi har lagt till i vår tidslinje och gå sedan till Ordna> Grupp att organisera dem lite bättre. Dubbelklicka på gruppslagets namn för att byta namn på det:
Hype 3 ger ett antal metoder för att animera objekt och deras egenskaper. Vi börjar med det enklaste, så fortsätt och slå den stora, röda Spela in knapp:
Dra nu avspelningshuvudet över tidslinjen, stoppar vid bild 24.
Notera: Du får se sekunder markerade längs tidslinjen, var och en består av 30 bilder.
Med spelhuvudet nu på bild 24, välj ikonen "lägg till", gå till Metrik fliken i höger sidofält och hitta sedan Rotation avsnitt och ändra Z värdet till 45 °. Detta kommer att rotera ikonen så att den nu ser ut som ett kors (×).
Du kan nu klicka på Spela in knappen igen, för att avsluta processen.
Hype 3 har automatiskt lagt till en egenskapsnyckelram vid början av tidslinjen (det här är startläget) och ett i slutet av animationen (sluttillståndet). I det här fallet har vi bara ändrat Rotationsvinkel (Z) egendom, så det är där nyckelramarna visas.
Om du trycker på spela eller drar uppspelningshuvudet längs tidslinjen ser du ikonen anime smidigt mellan de två egenskapstillstånden.
För att göra det enklare att se vad som händer på tidslinjen, gör tidslinjens skalvärde högre med skjutreglaget högst upp till höger:
Med vår egendomsanimation vald (klicka på den) kan vi ändra den lättnadstyp som används på animeringen. Som standard blir det enkel in-out, vilket innebär att animationen börjar långsamt, accelerera och sedan sakta ner igen mot slutet.
Vad ska vi mer animera? Låt oss se ut att vår knapp gör något - vi kommer att avslöja ett kort när knappen verkar ha blivit klickad.
Använd element menyn för att lägga till en Rektangel till scenen. Nämn lagret "Card". Ge den en bakgrundsfärg (# 757575) och placera lagret under knappgruppen. Placera det från scenen, till botten och minska dess opacitet till 0 (vi kommer att animera ett par egenskaper den här gången).
Nu, istället för att slå Spela in, den här gången kommer vi att göra saker manuellt. Med uppspelningshuvudet i början av animationen och kortlagret valt, klicka på Lägg till Keyframe på Opacitet fastighetslager. Flytta sedan spelhuvudet till slutet av animationen och lägg till annan nyckelbildruta.
Medan den sista keyframen, i Element flik, ge rektangeln en opacitet på 100%. Du kommer nu att ha en snygg animation mellan de två staterna.
Efter att ha animerat reakternas opacitet, animera nu sin position (vi vill att den ska glida uppåt). Detta uppnås med egenskapen Origin (Top), så upprepa processen vi just gjorde, lägga till en nyckelram vid animationens början, en i slutet, ändra rektangelns position på den slutliga nyckelramen.
Du borde se en väg ritad, vilket indikerar rörelsen som tas av rektangeln:
För tillfället sker allting samtidigt, så snart scenen börjar, men vi kan ändra det. Låt oss göra det så att det finns en kort fördröjning, då ikonen roterar snabbt, så kortar kortet in gradvis.
Dra animeringsfälten på den övre tidslinjen så att de olika elementen varierar olika:
Notera: glöm inte att du kan ändra lättnad för att ge olika effekter. Ta en titt på Googles riktlinjer för Autentisk Motion för mer inspiration.
När din animering är klar, gå över till Arkiv> Exportera som HTML5 eller Fil> Exportera som film. De tillgängliga alternativen är ganska självförklarande; välj att skriva ut en katalog med HTML tillsammans med JavaScript och SVG-tillgångarna, animerade GIF, MP4 och så vidare.
Tänk på att när du exporterar som en film kan eventuell interaktion du har lagt till (vi inte i det här fallet) förstöra sekvensen.
Tid för en uppgift! Genom att följa denna handledning har du varit beväpnad med färdigheterna för att ta den här animationen mycket längre. Ladda ner källan och du hittar de startfiler som du behöver ta med dig till den här punkten, då:
Tidslinjer är allvarligt användbara för att visualisera animering när du bygger. Utöver vad vi har gjort här tillåter Hype 3 också alla slags interaktion, händelser och tidslinjekontroll (men det är en helt annan handledning). Ha det roligt att leka med dessa verktyg, bygga upp och visa oss vad du kommit med i kommentarerna!
Accentsconagua