Hydrately: één Rive-bestand, twee native apps
Hydrately is een gratis app voor iPhone en Android die bijhoudt hoeveel je drinkt. Je logt een drankje in twee tikken, houdt je tempo bij en bouwt een streak op.
- Rive-bestand, gedeeld door beide apps
- 1Rive-bestand, gedeeld door beide apps
- artboards in dat bestand
- 5artboards in dat bestand
- Luau-scripts, gesigneerd bij de build
- 3Luau-scripts, gesigneerd bij de build
- voor alles samen
- 455 KBvoor alles samen
Eén keer tekenen, overal gebruiken
- 1iPhone
Het begon native
Badge, druppels en confetti waren SwiftUI-code. Prima, met één app.
- 2Android
Toen kwam Android
Alles twee keer tekenen was geen optie. Eén Rive-bestand werd de gedeelde componentenbibliotheek.
- 3Web
Het betaalde zich terug op het web
Het woordmerk op hydrately.app en de demo's op deze pagina spelen dezelfde bestanden als de apps.
- 4Volgende
Klaar voor meer
Elk nieuw platform is één Rive-runtime verwijderd.
Het enige gat: widgets
Widgets kunnen geen Rive draaien, dus die gebruiken nog native artwork. Rive in widgets zou een droom zijn.
Van opstarten tot Home
De splash spoelt weg naar Home, waar drie van de zes al draaien.
Splash
- Regen valt in vier lagen: verre druppels klein en traag, dichtbij groot en snel.
- Als de app klaar is, veegt het water het woord weg en verschijnt Home.
StreakBadge
- Eén getal erin, zes metalen eruit: brons bij 1 dag, diamant bij 365.
- Een nieuw aantal speelt de pop-in opnieuw. Elke zeven seconden glijdt er een lichtstreep overheen.
StreakPopup
- Hij ligt over de draaiende achtergrond, met de badge erin genest.
- Sterren en confetti nemen het metaal van de badge over, dus een diamanten streak schittert in diamant.
Tik op de knop in de popup om hem te sluiten, net als in de app.
ProgressBar
- De app geeft voortgang, tempo en een niveau door. Een Luau-script tekent de balk op elke breedte.
- Loop je achter, dan wordt hij oranje en daarna rood. Haal je je doel, dan glijdt er drie keer licht overheen.
tier 1 · Op tempo
InsightCard
- Glas, een accentkleur per inzicht en een folie die meeschuift als je de telefoon kantelt.
- De tekst erbovenop blijft native, dus die groeit mee met Dynamic Type.
Timing
9 AM
You drink most during this hour
Beweeg je muis over de kaart om hem te kantelen. In de app doet de beweging van je telefoon dat.
PatternBackground
- Zakkende druppels of rollende golven, in vijf thema's.
- Eén instance draait achter de hele app en start nooit opnieuw.
Wordmark
- Het woord uit de splash in een eigen bestand van 40 KB, zodat de homepage van hydrately.app alleen dat laadt.
- De letters zijn gewone vectorvormen, zonder lettertypebestand en zonder script.
Vijf regels die het snel hielden
Eén keer laden, nooit herstarten
De achtergrond loopt door onder elk scherm en elke viering.
Geen leeg eerste frame
Het laadscherm wacht tot Rive zijn eerste frame heeft getekend.
Beweging weet wanneer te stoppen
Beweging beperken en de energiebesparingsmodus pauzeren het. Een verborgen scherm ook.
Tekst blijft native
Teksten liggen bovenop Rive, dus Dynamic Type en schermlezers werken gewoon.
Gecontroleerd bij de build
Een hernoemde input in de editor laat de build falen in plaats van de app.
Draait op de native Rive-runtimes voor iOS en Android, en op het web op deze pagina
Bekijk HydratelyKlaar om het leuk te maken?
Wij ontwerpen de streaks, beloningen en animaties die nieuwe gebruikers vaste gebruikers maken. Plan een gesprek en zie de engine achter deze site.
