Share
Hype 3, door Tumult, is een OS X-applicatie voor het maken van HTML5-animaties. Als je ooit de iconische tijdlijnhulpmiddelen van Flash hebt gebruikt, lijkt de interface van Hype 3 heel vertrouwd. In deze tutorial maken we snel kennis met de applicatie, waarna we een basis Material Design-animatie maken met behulp van de beschikbare tools.
Hype 3 kost op het moment van schrijven $ 49,99 voor de standaardtoepassing, of, als u meer geavanceerde functies nodig hebt, is Hype 3 Professional beschikbaar voor $ 99,99. U kunt een proefversie van 14 dagen downloaden voor de volgende doeleinden.
En sorry, dit is alleen Mac.
Als Mac-gebruiker ben je perfect thuis met de app-indeling. We gebruiken de standaard-versie van Hype 3 (de pro-versie heeft een donkerdere, volledigere gebruikersinterface), dus laten we de belangrijkste onderdelen doornemen:
Hype 3's interfaceWanneer u de toepassing opent, krijgt u standaard een leeg document. Begin met uit te zoeken hoe groot je je canvas wilt hebben.
Het tabblad "Scène"Onder de Tafereel tab zie je enkele opties om de huidige scène in te stellen. Ik heb ervoor gekozen om de canvasafmetingen 600x400 px te geven. Klik daarna op de kleurkiezer hieronder Achtergrond en verander dat in # 424242.
Notitie: we zullen in deze zelfstudie slechts met één scène en één tijdlijn werken, maar het is mogelijk om meerdere scènes met talloze tijdlijnen te hebben en van alles te wisselen.
We gaan een van de zwevende actieknoppen van Google Material Design animeren, dus ga naar de Elements menupictogram en selecteer de Ellips:
Gebruik je muisaanwijzer om te tekenen op het podium verschuiving zal de verhoudingen beperken tot een cirkel (ongeveer zoals elke grafische toepassing). Volgens de richtlijnen van Material Design moet de grote zwevende actieknop 56px breed zijn, met een pictogram van 24px. Maak de uwe in verhouding tot deze nummers:
Tip: ga naar Weergave> Liniaal weergeven om heersers naast je podium te laten verschijnen. Sleep enkele hulplijnen, van de linialen naar het werkvlak, om u te helpen objecten te positioneren.
Met de ellips geselecteerd, onder de Element tab kunt u de achtergrondkleur wijzigen (ik heb # 00E676 uit het kleurenpalet Material Design gebruikt) en de rand ervan verwijderen.
Ook onder de Element tabblad, ziet u dat u een schaduw aan de cirkel kunt toevoegen. Ik heb de onze een 5px-blur gegeven en deze 5 px verplaatst op de Y-as. Het heeft een kleur van # 2E2E2E, maar je kunt geen overvloeimodi selecteren. Nu ziet het er erg "materieel ontwerp" uit, ik denk dat u het ermee eens zult zijn:
Om een "plus" -symbool aan de knop toe te voegen, hebben we enkele opties voor ons. We zouden de tekenhulpmiddelen kunnen gebruiken om het zelf te maken, maar de hulpmiddelen zijn beperkt (vooral als u vertrouwd bent met de vrijheid van Adobe Illustrator of Sketch). In plaats daarvan pakken we het SVG-pictogram van Google.
Selecteer het pictogram "toevoegen", kies de witte variant en download deze vervolgens.
U kunt het SVG-bestand nu rechtstreeks naar uw document slepen, waarna het als een afbeeldingslaag wordt toegevoegd.
Met het SVG-pictogram geselecteerd, onder de metriek Controleer of het de juiste grootte voor uw animatie is:
Ons SVG-pictogram is niet geïmporteerd als een bewerkbare vector. In plaats daarvan, als je naar de Elements tabblad, ziet u dat het een afzonderlijke bron is en wordt toegepast als achtergrondafbeelding. Dit betekent dat we niet van kleur kunnen veranderen, of iets anders (schaamte).
Ook kan deze aanpak problemen veroorzaken in sommige browsers, hoewel Hype 3 u hiervoor waarschuwt:
Zoals met veel grafische toepassingen, kunt u nu de twee lagen selecteren die we aan onze tijdlijn hebben toegevoegd en vervolgens naar Schikken> Groep om ze een beetje beter te organiseren. Dubbelklik op de naam van de groepslaag om de naam te wijzigen:
Hype 3 biedt een aantal methoden voor het animeren van objecten en hun eigenschappen. We beginnen met de meest eenvoudige, dus ga je gang en druk op de grote, rode Record knop:
Sleep nu het afspeelkop over de tijdlijn, stoppen bij frame 24.
Notitie: u ziet seconden gemarkeerd langs de tijdlijn, elk bestaande uit 30 frames.
Met de afspeelkop nu op frame 24, selecteer het pictogram "toevoegen", ga naar metriek klik in de rechterzijbalk op en zoek de omwenteling sectie en verander de Z waarde tot 45 °. Hierdoor draait het pictogram, zodat het er nu uitziet als een kruis (×).
U kunt nu klikken op de Record knop opnieuw, om het proces te beëindigen.
Hype 3 zal aan het begin van de tijdlijn automatisch een eigenschapshoofdframe hebben toegevoegd (dit is de begintoestand) en één aan het einde van de animatie (de eindstatus). In dit geval hebben we alleen de Rotatiehoek (Z) property, dus daar verschijnen de keyframes.
Als u op play drukt of de afspeelkop langs de tijdlijn sleept, ziet u het pictogram vloeiend bewegen tussen de twee eigenschappen.
Om het gemakkelijker te maken om te bekijken wat er op de tijdlijn gebeurt, maakt u de tijdlijnschaalwaarde hoger met de schuifregelaar in de rechterbovenhoek:
Met onze property-animatie geselecteerd (klik erop) kunnen we het easing-type wijzigen dat op de animatie wordt gebruikt. Standaard zal het zijn gemak-in-out, wat betekent dat de animatie langzaam begint, versnelt en dan weer langzaam afloopt tegen het einde.
Wat anders zullen we animeren? Laten we zorgen dat het lijkt alsof onze knop iets doet: we onthullen een kaart wanneer op de knop lijkt te zijn geklikt.
Gebruik de Elements menu om een toe te voegen Rechthoek naar het podium. Noem de laag "Kaart". Geef het een achtergrondkleur (# 757575) en plaats de laag onder de groep knoppen. Plaats het van het podium, naar de bodem en verminder de dekking naar 0 (we gaan deze keer een aantal eigenschappen animeren).
Nu, in plaats van slaan Record, deze keer gaan we dingen handmatig doen. Klik met de afspeelkop aan het begin van de animatie en de kaartlaag geselecteerd Keyframe toevoegen op de ondoorzichtigheid eigenschapslaag. Verplaats vervolgens de afspeelkop naar het einde van de animatie en voeg deze toe een ander keyframe.
Terwijl op het laatste keyframe, in de Element tab, geef de rechthoek een dekking van 100%. Je hebt nu een leuke animatie tussen de twee staten.
Nadat je de transparantie van de rechthoek hebt geanimeerd, animeer je nu zijn positie (we willen dat deze naar boven schuift). Dit wordt bereikt met de eigenschap Origin (Top), dus herhaal het proces dat we net hebben uitgevoerd, een keyframe aan het begin van de animatie toevoegen, één aan het einde en vervolgens de positie van de rechthoek in het laatste keyframe wijzigen.
U zou een getekend pad moeten zien, dat de door de rechthoek genomen beweging aangeeft:
Op dit moment gebeurt alles op hetzelfde moment, zodra de scène begint, maar we kunnen dat veranderen. Laten we het zo maken dat er een korte vertraging is, dan draait het pictogram snel en dan schuift de kaart geleidelijk naar binnen.
Versleep de animatiebalken op de bovenste tijdlijn, zodat ze de verschillende elementen op een andere manier tijd geven:
Notitie: vergeet niet dat je de versoepeling kunt veranderen om verschillende effecten te geven. Bekijk de richtlijnen van Google over Authentic Motion voor meer inspiratie.
Zodra je animatie is voltooid, ga je naar Bestand> Exporteren als HTML5 of Bestand> Exporteren als film. De beschikbare opties zijn redelijk vanzelfsprekend; kies ervoor om een directory met HTML uit te voeren, samen met de JavaScript- en SVG-items, geanimeerde GIF, MP4 enzovoort.
Houd er rekening mee dat bij het exporteren als een film de interactie die u hebt toegevoegd (in dit geval niet) de reeks kan beschadigen.
Tijd voor een opdracht! Door deze tutorial te volgen ben je gewapend met de vaardigheden om deze animatie veel verder te nemen. Download de bron en je zult de startersbestanden vinden die je nodig hebt om je naar dit punt te brengen, en dan:
Tijdlijnen zijn erg handig voor het visualiseren van animatie terwijl je bouwt. Naast wat we hier hebben gedaan, biedt Hype 3 ook alle soorten interactie, evenementen en tijdlijncontrole (maar dat is een hele andere zelfstudie). Veel plezier met het spelen van deze hulpmiddelen, bouw en laat ons zien wat je in de comments tegenkomt!
Accentsconagua