الرسوم المتحركة الربيعية: فيزياء حركة واجهة المستخدم الطبيعية
تعرف على كيفية عمل الرسوم المتحركة الربيعية في تصميم واجهة المستخدم. فهم الصلابة والتخميد والكتلة والسرعة. أنشئ رسومًا متحركة قائمة على الفيزياء الطبيعية لـ React وSwiftUI.
الوجبات الجاهزة الأساسية
تصمم الرسوم المتحركة الربيعية حركة واجهة المستخدم باستخدام السلوك الفيزيائي لنظام المثبط الزنبركي الشامل، حيث تخضع حركة المكون للصلابة (مدى قوة سحبه نحو الراحة)، والتخميد (مدى سرعة فقدان الطاقة)، والكتلة (مدى القصور الذاتي الذي يحمله). على عكس الرسوم المتحركة المعتمدة على المدة، تستجيب النوابض تلقائيًا لسرعة المستخدم ويمكن مقاطعتها في أي لحظة دون التسبب في انقطاع بصري.
لماذا تبدو الينابيع طبيعية أكثر من منحنيات المدة
لا يحتوي العالم المادي على مفاهيم مثل "سهولة الدخول" أو "بيزييه مكعب (0.4، 0، 0.2، 1)." تتسارع الأجسام المادية بسبب القوى وتتباطأ بسبب الاحتكاك. عندما ينزلق الدرج مفتوحًا، يكون لديه زخم؛ عند تحريره، يؤدي الاحتكاك إلى سكونه. تكرر فيزياء الربيع هذا الواقع المادي في البرامج، ولهذا السبب فإن 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>
);
}