Languageالعربية
الركيزة 05 · واجهة المستخدم الحديثة للمتجهات
البديل LottieFiles: أجهزة الحالة التفاعلية الديناميكية مقابل الفيديو الثابت JSON
تم إنشاء Lottie لتشغيل الرسوم المتحركة المتجهة السلبية على شاشات الهاتف المحمول. تم تصميم ExodeUI لبناء أنظمة واجهة مستخدم حية وتفاعلية.
What is البديل LottieFiles: in ExodeUI?
ExodeUI هو البديل الأول لـ LottieFiles لواجهات البرامج الحديثة. بينما يعرض Lottie الإطارات الرئيسية للرسوم المتحركة الخطية غير التفاعلية المصدرة من Adobe After Effects إلى ملفات JSON الثقيلة، تحتوي ملفات ExodeUI على حالات وفيزياء ومنطق يتم تشغيلها في أوقات التشغيل في تطبيقك، بحيث تستجيب عناصر واجهة المستخدم للمس والإيماءات وحالة التطبيق. نصنع ExodeUI.
العمارة الأساسية
لماذا يختار المهندسون والمصممون ExodeUI
Design, logic and motion in one file that runs inside your app.
التفاعل الحقيقي على تشغيل الفيديو
يتم تشغيل الرسوم المتحركة Lottie من الإطار 0 إلى الإطار 60 مثل الفيديو. تستجيب عناصر ExodeUI في الوقت الفعلي للسحب والتمرير والضغط على السرعة.
لا حاجة إلى Adobe After Effects
التصميم والتحريك بالكامل داخل ExodeUI. تخلص من اشتراكات Creative Cloud الباهظة الثمن والمكونات الإضافية لتصدير Bodymovin التي بها أخطاء.
React الأصلي ورمز سويفت
قم بتصدير المكونات النظيفة التي تدخل مباشرة إلى تطبيقك بدون مكتبات المشغلات الضخمة أو موزعي شجرة JSON.
Lottie الهجرة والاستيراد
قم باستيراد ملفات Lottie JSON الموجودة إلى ExodeUI وقم بترقيتها إلى مكونات جهاز الحالة التفاعلية.
التقييم الموضوعي
كيف يقارن ExodeUI بـ LottieFiles & After Effects
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- تفاعل ثنائي الاتجاه كامل وزخم جسدي حقيقي
- يزيل منطق آلة الحالة المرئية أغلفة الترميز المعقدة
- استوديو مرئي مخصص لواجهة المستخدم مصمم لبرامج المنتج
- استخدام منخفض للغاية لوحدة المعالجة المركزية والبطارية مع تسريع وحدة معالجة الرسومات للأجهزة
LottieFiles & After Effects
- التشغيل الخطي السلبي الذي لا يمكنه التفاعل ديناميكيًا مع إدخال المستخدم
- يتطلب سير عمل Adobe After Effects معقدًا ومكلفًا
- تتسبب حمولات JSON الثقيلة في حدوث طفرات في وحدة المعالجة المركزية (CPU) وإسقاط الإطارات على الهاتف المحمول
- لا يوجد منطق آلي للحالة الأصلية: يجب على المطورين كتابة أغلفة مخصصة
تسليم المطور
استخدامه في التعليمات البرمجية الخاصة بك
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
استيراد { ExodeUICanvas } من 'exodeui'؛
// الينابيع والحالات والتوقيت موجودة في ملف .exode (المصمم في ملف
// المحرر). يمرر الكود الخاص بك المدخلات ويسمع الأحداث مرة أخرى.
وظيفة التصدير InteractiveToggle() {
العودة (
<ExodeUICanvas
src="/toggle_switch.bexode"
onTrigger={(name) => console.log('حدث ExodeUI:', الاسم)}
/>
);
}لماذا تنتقل فرق المنتجات إلى ما هو أبعد من Lottie
كان Lottie إنجازًا هائلاً في عام 2017، حيث سمح بعرض الرسوم المتحركة المتجهة عبر iOS وAndroid والويب بدون ملفات فيديو ضخمة GIF أو MP4. لكن تصميم البرامج تطور من الرسوم المتحركة الزخرفية السلبية إلى تفاعلات واجهة المستخدم الديناميكية واللمسية:
- جدار التفاعل: لا يمكنك بسهولة جعل الرسوم المتحركة Lottie تستجيب لزخم السحب أو سرعة الإصبع.
- استنزاف البطارية ووحدة المعالجة المركزية: يؤدي تحليل أشجار JSON متعددة الميجابايت وتقييم منحنيات بيزيير في كل إطار إلى استنزاف البطارية على الأجهزة المحمولة.
- سلسلة الأدوات المعقدة: يجب على المصممين إتقان Adobe After Effects، وهو تطبيق مصمم للمؤثرات البصرية السينمائية والتلفزيونية، وليس منتجات البرامج الرقمية.
Topic Cluster Network
استكشف المفاهيم والأدوات المتصلة
هل لديك أسئلة؟
الأسئلة المتداولة
بناء مكونات حية بحركة حقيقية.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.