Spring Animation: The Physics of Natural UI Motion
Μάθετε πώς λειτουργεί η ανοιξιάτικη κίνηση στη σχεδίαση διεπαφής χρήστη. Κατανοήστε την ακαμψία, την απόσβεση, τη μάζα και την ταχύτητα. Δημιουργήστε κινούμενα σχέδια βασισμένα στη φυσική για τα React και SwiftUI.
Core Takeaway
Το κινούμενο σχέδιο ελατηρίου μοντελοποιεί την κίνηση διεπαφής χρήστη χρησιμοποιώντας τη φυσική συμπεριφορά ενός συστήματος αποσβεστήρα μάζας-ελατηρίου, όπου η κίνηση ενός εξαρτήματος διέπεται από ακαμψία (πόσο έντονα έλκεται προς την ηρεμία), απόσβεση (πόσο γρήγορα χάνει ενέργεια) και μάζα (πόση αδράνεια φέρει). Σε αντίθεση με τα κινούμενα σχέδια που βασίζονται στη διάρκεια, τα ελατήρια ανταποκρίνονται αυτόματα στην ταχύτητα του χρήστη και μπορούν να διακοπούν σε οποιοδήποτε σημείο χωρίς να προκαλέσουν οπτική ασυνέχεια.
Γιατί τα ελατήρια αισθάνονται πιο φυσικά από τις καμπύλες διάρκειας
Ο φυσικός κόσμος δεν έχει έννοιες όπως "ease-in-out" ή "cubic-bezier(0.4, 0, 0.2, 1)." Τα φυσικά αντικείμενα επιταχύνονται λόγω δυνάμεων και επιβραδύνονται λόγω τριβής. Όταν ένα συρτάρι ανοίγει, έχει ορμή. όταν το απελευθερώνετε, η τριβή το φέρνει σε ηρεμία. Η Spring physics αναπαράγει αυτή τη φυσική πραγματικότητα στο λογισμικό, γι' αυτό το iOS UIKit, το Android Motion Compose και το ExodeUI είναι όλα συστήματα κινούμενων εικόνων που ξεκινούν την άνοιξη.
Επεξήγηση των παραμέτρων του ελατηρίου
Η κατανόηση κάθε παραμέτρου σάς επιτρέπει να σχεδιάσετε ακριβώς τη φυσική αίσθηση που θέλετε.
Δυσκαμψία (ένταση)
Πόσο δυνατά τραβάει το ελατήριο προς την τιμή ηρεμίας του. Η υψηλή ακαμψία (600+) δημιουργεί γρήγορη, γρήγορη απόκριση διεπαφής χρήστη όπως το πάτημα κουμπιών. Η χαμηλή ακαμψία (100–200) δημιουργεί αργή, αιωρούμενη κίνηση κατάλληλη για μεταβάσεις σελίδας ή αιωρούμενα στοιχεία περιβάλλοντος.
Απόσβεση (τριβή)
Πόση ενέργεια χάνει το ελατήριο ανά κύκλο. Στην κρίσιμη απόσβεση, το ελατήριο φτάνει σε ηρεμία χωρίς να ταλαντώνεται. Τα ελατήρια με χαμηλή απόσβεση (χαμηλή τριβή) θα υπερβούν και θα αναπηδήσουν. Η αναλογία απόσβεσης / (2 × sqrt (ακαμψία × μάζα)) καθορίζει εάν έχετε χαμηλή απόσβεση, κρίσιμη απόσβεση ή υπερβολική απόσβεση.
Μάζα
Πόση αδράνεια φέρει το κινούμενο στοιχείο. Μια υψηλότερη μάζα κάνει το κινούμενο σχέδιο να φαίνεται βαρύτερο και χρειάζεται περισσότερος χρόνος για να αλλάξει κατεύθυνση. Τα περισσότερα κινούμενα σχέδια διεπαφής χρήστη διατηρούν τη μάζα στο 1,0 και ελέγχουν την αίσθηση μέσω της ακαμψίας και της απόσβεσης.
Αρχική Ταχύτητα
Εάν ο χρήστης σύρει ή πετάξει ένα στοιχείο, το ελατήριο μπορεί να αρχικοποιηθεί με αυτήν την ταχύτητα χειρονομίας, δημιουργώντας απρόσκοπτη συνέχεια μεταξύ χειρονομίας και τακτοποίησης ελατηρίου.
Πρακτικές προεπιλογές άνοιξης για στοιχεία διεπαφής χρήστη
Αυτές οι προεπιλογές καλύπτουν τα πιο κοινά μοτίβα αλληλεπίδρασης διεπαφής χρήστη.
- Χτύπημα κουμπιού: ακαμψία 500, απόσβεση 30 — στιγμιαία, γρήγορη, ελάχιστη αναπήδηση
- Επέκταση κάρτας: ακαμψία 280, απόσβεση 24, μάζα 1,2 — ομαλή, σταθμισμένη διαστολή
- Συρτάρι / φύλλο: ακαμψία 340, απόσβεση 28 — καθοριστικό, με ελαφρά καθίζηση
- Ειδοποίηση αναπήδησης: ακαμψία 400, απόσβεση 18 — παιχνιδιάρικη υπέρβαση
- Μετάβαση σελίδας: ακαμψία 220, απόσβεση 22, μάζα 1,4 — κινηματογραφική, σταθμισμένη
Απόσπασμα υλοποίησης παραγωγής
// Spring presets in React with the Motion library (motion.dev).
// The same stiffness / damping / mass values can be saved as motion tokens.
import { motion } from 'motion/react';
const springs = {
snappy: { type: 'spring', stiffness: 500, damping: 30, mass: 1 },
smooth: { type: 'spring', stiffness: 280, damping: 24, mass: 1.2 },
bouncy: { type: 'spring', stiffness: 400, damping: 18, mass: 1 },
cinematic: { type: 'spring', stiffness: 220, damping: 22, mass: 1.4 },
};
export function PhysicsCard({ open }) {
return (
<motion.div
animate={{ y: open ? 0 : 24, scale: open ? 1 : 0.96 }}
transition={springs.smooth}
>
Smooth physics-based card reveal
</motion.div>
);
}