Disse to begrepene svarer på forskjellige spørsmål. Smart Animate svarer "hva endres?" Den ser på to rammer, finner lag med samsvarende navn, og animerer deres posisjon, størrelse, rotasjon, opasitet og andre egenskaper fra en ramme til den andre.
Forenklede svar "hvordan endres det over tid?" Figma lar deg velge en standardkurve som ease-out, en tilpasset cubic-bezier-kurve eller en fjær. Fjæravlastning er definert av fysiske innstillinger, stivhet, demping og masse, snarere enn en fast varighet, så bevegelsen øker hastigheten og avgjør slik virkelige objekter gjør.
Den virkelige forskjellen vises i kode. I et produkt kan en fjær starte fra den nåværende posisjonen og hastigheten til et element. Hvis en bruker avbryter en overgang eller flikker på et ark, fortsetter bevegelsen naturlig i stedet for å hoppe. En prototypeovergang spiller på samme måte hver gang, noe som er greit for å vise intensjon, men viser ikke hvordan bevegelsen oppfører seg under ekte input.
Så en Figma-prototype er en god referanse, men utviklere gjenoppbygger fortsatt bevegelsen i kode. For å holde verdiene konsistente, lagrer mange lag fjærinnstillinger som bevegelsessymboler. Vår gratis Figma Animation to Spring Converter gjør Figma easing til fjærinnstillinger du kan bruke i kode.
Hvis du vil at den interaktive versjonen skal være leveringsproduktet i stedet for en referanse, trengs et verktøy med en kjøretid. ExodeUI, som vi lager, lagrer tilstander, kilder og hendelser i én fil som kjører i appen.