Αυτοί οι δύο όροι απαντούν σε διαφορετικές ερωτήσεις. Το Smart Animate απαντά "τι αλλάζει;" Εξετάζει δύο καρέ, βρίσκει επίπεδα με ταιριαστά ονόματα και κινεί τη θέση, το μέγεθος, την περιστροφή, την αδιαφάνεια και άλλες ιδιότητές τους από το ένα πλαίσιο στο άλλο.
Χαλαρωτικές απαντήσεις "πώς αλλάζει με την πάροδο του χρόνου;" Το Figma σάς επιτρέπει να επιλέξετε μια τυπική καμπύλη, όπως ease-out, μια προσαρμοσμένη καμπύλη κυβικού-bezier ή ένα ελατήριο. Η χαλάρωση του ελατηρίου ορίζεται από τις φυσικές ρυθμίσεις, την ακαμψία, την απόσβεση και τη μάζα, αντί για μια σταθερή διάρκεια, επομένως η κίνηση επιταχύνεται και καθιζάνει όπως τα πραγματικά αντικείμενα.
Η πραγματική διαφορά φαίνεται στον κώδικα. Σε ένα προϊόν, ένα ελατήριο μπορεί να ξεκινήσει από την τρέχουσα θέση και ταχύτητα ενός στοιχείου. Εάν ένας χρήστης διακόψει μια μετάβαση ή μετακινήσει ένα φύλλο, η κίνηση συνεχίζεται φυσικά αντί να πηδά. Μια πρωτότυπη μετάβαση παίζει με τον ίδιο τρόπο κάθε φορά, κάτι που είναι καλό για να δείχνει πρόθεση, αλλά δεν δείχνει πώς συμπεριφέρεται η κίνηση κάτω από πραγματική είσοδο.
Έτσι, ένα πρωτότυπο Figma είναι μια καλή αναφορά, αλλά οι προγραμματιστές εξακολουθούν να ξαναφτιάχνουν την κίνηση σε κώδικα. Για να διατηρήσουν τις τιμές συνεπείς, πολλές ομάδες αποθηκεύουν τις ρυθμίσεις ελατηρίου ως διακριτικά κίνησης. Ο δωρεάν μετατροπέας Figma Animation σε Spring μετατρέπει το Figma easing σε ρυθμίσεις ελατηρίου που μπορείτε να χρησιμοποιήσετε στον κώδικα.
Εάν θέλετε η διαδραστική έκδοση να είναι η παραδοτέα αντί για αναφορά, χρειάζεται ένα εργαλείο με χρόνο εκτέλεσης. Το ExodeUI, το οποίο φτιάχνουμε, αποθηκεύει καταστάσεις, ελατήρια και συμβάντα σε ένα αρχείο που εκτελείται στην εφαρμογή.