Languageالعربية
الدعامة 08 · هندسة الرسوم المتحركة
الرسوم المتحركة لواجهة المستخدم الفيزيائية: علم الواجهات الرقمية الحية
الرسوم المتحركة المستندة إلى المدة ميتة. تعرف على الأسباب التي دفعت Apple وGoogle وأفضل فرق المنتجات في العالم إلى البناء حصريًا باستخدام فيزياء الربيع.
What is الرسوم المتحركة in ExodeUI?
Physics UI Animation عبارة عن منهجية هندسية للرسوم المتحركة تصمم حركة واجهة المستخدم باستخدام قوانين فيزيائية في العالم الحقيقي - في المقام الأول مذبذبات زنبركية توافقية من الدرجة الثانية - بدلاً من مؤقتات المدة التعسفية. نظرًا لأن النوابض الفيزيائية تحسب موضع الراحة ديناميكيًا استنادًا إلى سرعة إيماءة المستخدم، فإن الواجهات التي تعتمد على الفيزياء قابلة للمقاطعة بنسبة 100% وتشعر بأنها طبيعية عند اللمس البشري.
العمارة الأساسية
لماذا يختار المهندسون والمصممون ExodeUI
Design, logic and motion in one file that runs inside your app.
الينابيع التوافقية من الدرجة الثانية
حركة الواجهة النموذجية باستخدام المعادلات الفيزيائية الطبيعية بدلاً من المللي ثانية التعسفية والمقابض الأكثر بيزيير.
نقل السرعة المستمر
تحافظ إيماءات القذف والسحب على الزخم الجسدي البشري عبر الإصدارات وعمليات إعادة التوجيه المفاجئة.
تفاعلات متقطعة بنسبة 100%
يمكن للمستخدمين النقر على الرسوم المتحركة أو سحبها أو إعادة توجيهها في منتصف الرحلة دون التقاطها أو التلعثم البصري.
ضوابط الكتلة والصلابة والتخميد
قم بضبط الشخصية الميكانيكية الدقيقة لواجهتك باستخدام أشرطة التمرير المرئية البديهية والمعاينة المباشرة.
التقييم الموضوعي
كيف يقارن ExodeUI بـ Duration-Based Animation (Easing Curves)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- تحسب الينابيع المدة تلقائيًا بناءً على المسافة والسرعة
- التفاعلات قابلة للمقاطعة بنسبة 100% بدون أي التقاط مرئي
- يحافظ على زخم اللمسة البشرية من أجل الشعور الأصلي بالسوائل
- يطابق نماذج الرسوم المتحركة الأصلية لنظامي التشغيل iOS (CoreAnimation) وAndroid
Duration-Based Animation (Easing Curves)
- تبدو المؤقتات ذات المدة الثابتة (مثل 300 مللي ثانية) غير طبيعية على مسافات صغيرة أو كبيرة
- تؤدي مقاطعة الرسوم المتحركة إلى التقاطها أو إعادة تشغيلها بعنف
- يتجاهل سرعة قذف الإصبع، ويشعر بالبطء وعدم الاستجابة
- يتطلب كتابة JavaScript مخصصًا معقدًا للتعامل مع انقطاع الإيماءات
تسليم المطور
استخدامه في التعليمات البرمجية الخاصة بك
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
// A physics-driven expand in React with the Motion library (motion.dev).
// Mass, stiffness and damping replace a fixed duration, and an interrupted
// animation continues from its current velocity.
import { motion } from 'motion/react';
export function PhysicsCard({ open }) {
return (
<motion.div
animate={{ height: open ? 240 : 64, opacity: open ? 1 : 0.7 }}
transition={{ type: 'spring', stiffness: 380, damping: 26, mass: 1 }}
style={{ overflow: 'hidden' }}
>
<h3>Physics-driven element</h3>
<p>Settles naturally, with no hard-coded duration</p>
</motion.div>
);
}مغالطة الرسوم المتحركة القائمة على المدة
لعقود من الزمن، اعتمدت الرسوم المتحركة على شبكة الإنترنت والرسوم المتحركة الرقمية على منحنيات المدة المستندة إلى الوقت: "قم بتحريك هذا الشكل من y: 100 إلى y: 0 في 300 مللي ثانية بسهولة." في حين أن هذا يعمل مع تشغيل الفيديو السلبي، إلا أنه يفشل بشكل أساسي في البرامج التفاعلية التي تعمل باللمس وذلك لثلاثة أسباب رياضية:
- تباين المسافة: إذا انتقلت الورقة بمقدار 50 بكسل في 300 مللي ثانية، فإنها تتحرك ببطء. إذا تحركت 500 بكسل في 300 مللي ثانية، فإنها تتحرك بشكل أسرع بعشر مرات. الفترات الثابتة تخلق سرعات غير منتظمة.
- كارثة المقاطعة: إذا قام المستخدم بالاستيلاء على عنصر أثناء تحريكه، فإن النظام القائم على المدة يلتقط منحنى الفيزياء أو يكسره.
- عمى السرعة: عندما يقوم المستخدم برمي الورقة السفلية لأعلى بسرعة إصبعه السريعة، يتجاهل منحنى المدة تلك السرعة ويشغل الرسوم المتحركة المعلبة من سرعة الصفر.
المعلمات الثلاثة لفيزياء الربيع
يخضع كل ربيع في ExodeUI لثلاثة معايير فيزيائية بسيطة وبديهية:
تصلب (التوتر)
يتحكم في مدى قوة سحب الزنبرك نحو موضع الراحة المستهدف. الصلابة العالية تخلق حركة سريعة وسريعة.
التخميد (الاحتكاك)
يتحكم في مقدار المقاومة التي تعارض الحركة. تتأرجح الينابيع المخمدة وترتد؛ تستقر الينابيع المبللة بشكل خطير مع عدم تجاوز الصفر.
الكتلة (القصور الذاتي)
يتحكم في مدى ثقل العنصر. تتطلب الكتلة الأكبر قوة أكبر للتسارع ومزيدًا من التخميد للاستقرار.
Topic Cluster Network
استكشف المفاهيم والأدوات المتصلة
هل لديك أسئلة؟
الأسئلة المتداولة
بناء مكونات حية بحركة حقيقية.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.