مكونات Rendervid - أنواع الطبقات ومكونات React ومحرر مرئي

تم بناء Rendervid على بنية قائمة على المكونات تجعل إنشاء الفيديو نموذجياً وقابلاً للتوسع وصديقاً للمطورين. كل عنصر في قالب Rendervid هو طبقة، وكل طبقة لها نوع محدد يحدد كيفية عرضها. مع 8 أنواع طبقات مدمجة، ومكتبة متنامية من مكونات React الجاهزة، ومحرر قوالب مرئي، ومشغل مستقل، يمنحك Rendervid كل ما تحتاجه لإنتاج محتوى فيديو احترافي برمجياً.

تغطي هذه الصفحة النظام البيئي الكامل للمكونات: من أنواع الطبقات الأساسية مثل النص والشكل، مروراً بتشغيل الصوت والفيديو، إلى مكونات React المخصصة بالكامل التي تفتح إمكانيات إبداعية غير محدودة. سواء كنت تبني بطاقة عنوان بسيطة أو رسماً متحركاً معقداً يعتمد على البيانات، فإن فهم هذه المكونات هو الأساس.

أنواع الطبقات المدمجة

يتم تعريف كل طبقة في قالب Rendervid ككائن JSON مع حقل type. يحدد النوع الخصائص المتاحة وسلوك العرض. فيما يلي مرجع مفصل لكل من أنواع الطبقات الثمانية المدمجة.

طبقة النص

طبقة text هي الطبقة الأساسية الأكثر ثراءً بالميزات في Rendervid. تعرض نصاً منسقاً مع تحكم كامل في الطباعة والمحاذاة واللون والتأثيرات والرسوم المتحركة.

خصائص الطباعة:

يأتي Rendervid مع أكثر من 100 خط من Google Fonts مدمج. يمكنك استخدام أي منها عن طريق تحديد خاصية fontFamily دون الحاجة إلى تحميل أوراق أنماط خارجية.

خصائص المحاذاة:

التنسيق والتأثيرات:

• color وbackgroundColor للتلوين الأساسي
• textShadow لظلال الإسقاط
• textStroke للنص المحدد
• textDecoration للتسطير والشطب
• textTransform للأحرف الكبيرة والصغيرة والكبيرة الأولى
• maxLines مع اقتطاع تلقائي بعلامة الحذف
• تأثير الآلة الكاتبة المدمج لإظهار النص حرفاً بحرف

{
  "type": "text",
  "text": "مرحباً بك في Rendervid",
  "x": 100,
  "y": 200,
  "width": 800,
  "height": 100,
  "fontSize": 64,
  "fontFamily": "Montserrat",
  "fontWeight": 700,
  "color": "#FFFFFF",
  "textAlign": "center",
  "verticalAlign": "middle",
  "textShadow": "2px 2px 8px rgba(0,0,0,0.5)"
}

للرسوم المتحركة المتقدمة للنص مثل تأثير الآلة الكاتبة، ادمج طبقة النص مع رسوم متحركة للإطارات الرئيسية أو استخدم مكون TypewriterEffect المخصص.

طبقة الصورة

تعرض طبقة image الصور النقطية والمتجهة مع خيارات تغيير حجم واقتصاص مرنة.

الخصائص الرئيسية:

التنسيقات المدعومة: PNG، JPEG، WebP، SVG، GIF

{
  "type": "image",
  "source": "https://example.com/hero-banner.png",
  "x": 0,
  "y": 0,
  "width": 1920,
  "height": 1080,
  "fit": "cover",
  "position": "center center"
}

تعمل خاصية fit مثل CSS object-fit:

• cover – تقوم بتكبير الصورة لملء الطبقة، مع اقتصاص الزائد
• contain – تقوم بالتكبير لتناسب بالكامل داخل الطبقة، مع إمكانية وجود إطارات سوداء
• fill – تمدد الصورة لتطابق أبعاد الطبقة تماماً
• none – تعرض الصورة بدقتها الأصلية

طبقة الفيديو

تدمج طبقة video مقاطع الفيديو في التكوين الخاص بك مع تحكم كامل في التشغيل.

الخصائص الرئيسية:

{
  "type": "video",
  "source": "https://cdn.example.com/background-clip.mp4",
  "x": 0,
  "y": 0,
  "width": 1920,
  "height": 1080,
  "startTime": 5.0,
  "playbackRate": 1.0,
  "muted": true,
  "loop": true
}

استخدم startTime لتخطي المقدمات أو الانتقال إلى نقطة محددة في اللقطات المصدر. ادمج مع playbackRate لتأثيرات الحركة البطيئة (0.5) أو الفاصل الزمني (2.0).

طبقة الشكل

ترسم طبقة shape أشكالاً متجهة مع تعبئات وحدود وتدرجات وزوايا مستديرة.

أنواع الأشكال:

خصائص التنسيق:

• fill – لون صلب أو تدرج
• stroke – لون الحدود
• strokeWidth – سمك الحدود
• borderRadius – زوايا مستديرة للمستطيلات
• التدرجات: كل من تعبئات التدرج linear وradial

{
  "type": "shape",
  "shapeType": "rectangle",
  "x": 100,
  "y": 100,
  "width": 400,
  "height": 300,
  "borderRadius": 16,
  "fill": {
    "type": "linear",
    "colors": ["#6366F1", "#8B5CF6"],
    "angle": 135
  },
  "stroke": "#FFFFFF",
  "strokeWidth": 2
}

للأشكال المخصصة، استخدم نوع path مع بيانات مسار SVG القياسية:

{
  "type": "shape",
  "shapeType": "path",
  "path": "M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80",
  "fill": "#EC4899",
  "stroke": "none"
}

طبقة الصوت

تضيف طبقة audio مسارات صوتية إلى التكوين الخاص بك مع التحكم في مستوى الصوت والتلاشي وسلسلة تأثيرات كاملة.

الخصائص الرئيسية:

سلسلة تأثيرات الصوت:

يتضمن Rendervid خط معالجة تأثيرات مدمج. التأثيرات المتاحة:

• EQ – معادلة لتشكيل النغمة
• Compressor – ضغط النطاق الديناميكي
• Reverb – صدى مكاني
• Delay – تأثير الصدى/التأخير
• Gain – تعزيز أو تخفيف مستوى الصوت
• High-pass filter – إزالة الترددات المنخفضة
• Low-pass filter – إزالة الترددات العالية
• Panning – تحديد الموضع الاستريو (يسار/يمين)

{
  "type": "audio",
  "source": "https://cdn.example.com/background-music.mp3",
  "volume": 0.7,
  "fadeIn": 2.0,
  "fadeOut": 3.0,
  "effects": [
    { "type": "highpass", "frequency": 200 },
    { "type": "compressor", "threshold": -24, "ratio": 4 },
    { "type": "reverb", "wet": 0.3, "decay": 2.5 },
    { "type": "gain", "value": 0.8 }
  ],
  "pan": -0.3
}

تتم معالجة التأثيرات بالترتيب، مما يسمح لك ببناء سلاسل معالجة صوتية متطورة. استخدم قيم pan من -1 (يسار كامل) إلى 1 (يمين كامل) لتحديد الموضع الاستريو.

طبقة المجموعة

طبقة group هي حاوية تحتوي على طبقات فرعية. يتم تطبيق التحويلات المطبقة على المجموعة على جميع الطبقات الفرعية، مما يسهل نقل أو تغيير حجم أو تدوير أو تحريك تكوينات معقدة متعددة الطبقات كوحدة واحدة.

الخصائص الرئيسية:

{
  "type": "group",
  "x": 200,
  "y": 150,
  "rotation": 5,
  "opacity": 0.9,
  "children": [
    {
      "type": "shape",
      "shapeType": "rectangle",
      "x": 0,
      "y": 0,
      "width": 500,
      "height": 300,
      "fill": "#1E293B",
      "borderRadius": 12
    },
    {
      "type": "text",
      "text": "عنوان البطاقة",
      "x": 24,
      "y": 24,
      "fontSize": 28,
      "fontWeight": 600,
      "color": "#F8FAFC"
    },
    {
      "type": "text",
      "text": "نص وصف داعم يذهب هنا.",
      "x": 24,
      "y": 64,
      "fontSize": 16,
      "color": "#94A3B8"
    }
  ]
}

المجموعات لا تقدر بثمن لتنظيم القوالب المعقدة. استخدمها لإنشاء تخطيطات بطاقات قابلة لإعادة الاستخدام، وعناوين سفلية، وتراكبات، وعناصر مركبة أخرى. إحداثيات الطبقات الفرعية نسبية إلى موضع المجموعة.

طبقة Lottie

تعرض طبقة lottie رسوماً متحركة Lottie المصدرة من After Effects أو Figma أو أدوات رسوم متحركة أخرى.

الخصائص الرئيسية:

{
  "type": "lottie",
  "source": "https://cdn.example.com/loading-spinner.json",
  "x": 860,
  "y": 440,
  "width": 200,
  "height": 200,
  "speed": 1.5,
  "loop": true,
  "startFrame": 0,
  "endFrame": 60
}

طبقات Lottie مثالية لإضافة رسومات حركة مصقولة وأيقونات ومؤشرات تحميل ورسوم متحركة للعلامة التجارية دون كتابة كود إطار بإطار. تتيح لك خصائص startFrame وendFrame اقتصاص الرسوم المتحركة لتشغيل جزء محدد فقط.

الطبقة المخصصة

طبقة custom هي نوع الطبقة الأكثر قوة في Rendervid. تتيح لك كتابة مكونات React عشوائية تعرض إطاراً بإطار، مما يمنحك التحكم الكامل في الإخراج المرئي.

هناك ثلاثة أنواع نشر للمكونات المخصصة:

النشر المضمن

قم بتضمين كود JavaScript مباشرة في قالب JSON الخاص بك. الأفضل للمكونات الصغيرة المستقلة.

{
  "type": "custom",
  "deployment": {
    "type": "inline",
    "code": "function Component({ frame, fps, sceneDuration, layerSize, props }) { const progress = frame / (fps * sceneDuration); const size = 50 + progress * 100; return React.createElement('div', { style: { width: size, height: size, borderRadius: '50%', backgroundColor: props.color || '#6366F1', display: 'flex', alignItems: 'center', justifyContent: 'center' } }); }"
  },
  "props": {
    "color": "#EC4899"
  }
}

نشر عنوان URL

قم بتحميل مكون من عنوان URL خارجي مثل CDN. الأفضل للمكونات القابلة لإعادة الاستخدام المشتركة عبر القوالب.

{
  "type": "custom",
  "deployment": {
    "type": "url",
    "url": "https://cdn.example.com/components/animated-counter.js"
  },
  "props": {
    "startValue": 0,
    "endValue": 1000,
    "prefix": "$",
    "color": "#10B981"
  }
}

نشر المرجع

استخدم مكوناً مسجلاً مسبقاً بالاسم. الأفضل للمكونات من حزمة @rendervid/components أو السجلات المخصصة.

{
  "type": "custom",
  "deployment": {
    "type": "reference",
    "name": "AnimatedLineChart"
  },
  "props": {
    "data": [10, 25, 40, 35, 60, 80, 72, 95],
    "lineColor": "#6366F1",
    "gradientOpacity": 0.3
  }
}

يتلقى كل مكون مخصص مجموعة قياسية من الخصائص:

تدعم المكونات المخصصة أيضاً التحقق من صحة المخطط للخصائص، مما يضمن أن القوالب تمرر أنواع البيانات الصحيحة والحقول المطلوبة لكل مكون.

مكونات React الجاهزة

تأتي حزمة @rendervid/components مع مجموعة من المكونات الجاهزة للإنتاج يمكنك استخدامها فوراً في قوالبك.

AnimatedLineChart

يعرض مخططات خطية متحركة مع تعبئات تدرج سلسة، ونقاط بيانات قابلة للتكوين، وتسميات محاور، وتأثيرات رسم متحركة. مثالي لمحتوى الفيديو القائم على البيانات مثل التقارير ولوحات المعلومات والعروض التقديمية.

الخصائص الرئيسية: data، lineColor، gradientOpacity، strokeWidth، labels، animationStyle

AuroraBackground

ينشئ تأثير شفق قطبي ساحر (aurora borealis) باستخدام تدرجات متعددة الطبقات وحركة سائلة. مثالي للخلفيات الجوية وتسلسلات المقدمة والمرئيات المحيطة.

الخصائص الرئيسية: colors، speed، intensity، blur

WaveBackground

ينتج رسوماً متحركة للأمواج السائلة مع ألوان وسعات وترددات قابلة للتكوين. استخدمه للخلفيات الأنيقة ومرئيات الموسيقى أو المحتوى ذي الطابع البحري.

الخصائص الرئيسية: waveCount، colors، amplitude، frequency، speed

SceneTransition

يوفر 17 نوعاً من الانتقالات الاحترافية للانتقال بين المشاهد. يتضمن مسحات وتلاشيات وتكبيرات وانزلاقات والمزيد. كل انتقال دقيق للإطار وقابل للتكوين.

الخصائص الرئيسية: transitionType، duration، direction، easing

TypewriterEffect

يعرض إظهار نص حرفاً بحرف مع مؤشر وامض. يدعم سرعة الكتابة القابلة للتكوين ونمط المؤشر والتأخير بين الكلمات. رائع لعروض الكود ومحاكاة الدردشة وإظهار النص الدرامي.

الخصائص الرئيسية: text، typingSpeed، cursorChar، cursorBlinkRate، startDelay

تطوير المكونات المخصصة

بناء مكوناتك المخصصة الخاصة هو المكان الذي يتألق فيه Rendervid حقاً. يمكن أن يصبح أي تأثير مرئي يمكنك إنشاؤه باستخدام JavaScript وCSS مكون Rendervid.

بنية المكون

مكون Rendervid المخصص هو دالة JavaScript قياسية تتلقى خصائص وتعيد عنصر React. الفرق الرئيسي عن مكونات React النموذجية هو أن العرض يعتمد على الإطار بدلاً من الحدث.

function MyComponent({ frame, fps, sceneDuration, layerSize, props }) {
  // حساب تقدم الرسوم المتحركة (0 إلى 1)
  const totalFrames = fps * sceneDuration;
  const progress = frame / totalFrames;

  // استخدم التقدم لدفع الرسوم المتحركة
  const opacity = Math.min(progress * 2, 1);
  const scale = 0.5 + progress * 0.5;

  return React.createElement("div", {
    style: {
      width: layerSize.width,
      height: layerSize.height,
      opacity: opacity,
      transform: `scale(${scale})`,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      color: props.color || "#FFFFFF",
      fontSize: props.fontSize || 48,
      fontWeight: 700,
    },
  }, props.text || "مرحباً، Rendervid!");
}

الخصائص المتاحة

يتلقى كل مكون مخصص هذه الخصائص القياسية:

• frame – رقم الإطار الحالي، يبدأ من 0. هذا هو محرك الرسوم المتحركة الأساسي الخاص بك.
• fps – الإطارات في الثانية (عادة 30 أو 60). استخدمه لتحويل الإطارات إلى ثوانٍ.
• sceneDuration – مدة المشهد الحالي بالثواني. اضرب في fps للحصول على إجمالي عدد الإطارات.
• layerSize – كائن مع width وheight بالبكسل، يطابق أبعاد الطبقة المحددة في القالب.
• props – كائن يحتوي على أي خصائص مخصصة محددة في قالب JSON.

نمط React.createElement()

نظراً لأن مكونات Rendervid تعمل في بيئة عرض، فإنها تستخدم React.createElement() بدلاً من JSX. النمط واضح ومباشر:

// ما يعادل JSX: <div className="container"><span>مرحباً</span></div>
React.createElement("div", { className: "container" },
  React.createElement("span", null, "مرحباً")
);

التحقق من صحة مخطط الخصائص

يمكنك تعريف مخطط لخصائص مكونك للتحقق من صحة البيانات في وقت تحميل القالب:

MyComponent.schema = {
  text: { type: "string", required: true },
  color: { type: "string", default: "#FFFFFF" },
  fontSize: { type: "number", default: 48, min: 8, max: 200 },
  animate: { type: "boolean", default: true },
};

مثال: نظام الجسيمات

مكون نظام جسيمات يحاكي أكثر من 150 جسيماً مع الفيزياء:

function ParticleExplosion({ frame, fps, sceneDuration, layerSize, props }) {
  const particleCount = props.particleCount || 150;
  const gravity = props.gravity || 0.5;
  const time = frame / fps;

  const particles = [];
  for (let i = 0; i < particleCount; i++) {
    const angle = (i / particleCount) * Math.PI * 2;
    const speed = 2 + Math.random() * 4;
    const x = layerSize.width / 2 + Math.cos(angle) * speed * time * 60;
    const y = layerSize.height / 2 + Math.sin(angle) * speed * time * 60
              + gravity * time * time * 100;
    const opacity = Math.max(0, 1 - time / sceneDuration);
    const size = 3 + Math.random() * 5;

    particles.push(
      React.createElement("div", {
        key: i,
        style: {
          position: "absolute",
          left: x,
          top: y,
          width: size,
          height: size,
          borderRadius: "50%",
          backgroundColor: props.color || "#F59E0B",
          opacity: opacity,
        },
      })
    );
  }

  return React.createElement("div", {
    style: {
      position: "relative",
      width: layerSize.width,
      height: layerSize.height,
      overflow: "hidden",
    },
  }, ...particles);
}

مثال: عداد متحرك

رسم متحرك لعد الأرقام يستكمل بين قيم البداية والنهاية:

function AnimatedCounter({ frame, fps, sceneDuration, layerSize, props }) {
  const progress = Math.min(frame / (fps * sceneDuration), 1);
  const eased = 1 - Math.pow(1 - progress, 3); // ease-out cubic
  const value = Math.round(
    props.startValue + (props.endValue - props.startValue) * eased
  );
  const formatted = value.toLocaleString();

  return React.createElement("div", {
    style: {
      width: layerSize.width,
      height: layerSize.height,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      fontSize: props.fontSize || 72,
      fontWeight: 800,
      color: props.color || "#FFFFFF",
      fontFamily: "Inter, sans-serif",
    },
  }, (props.prefix || "") + formatted + (props.suffix || ""));
}

لمزيد من المعلومات حول كيفية تناسب المكونات المخصصة مع بنية القالب الأوسع، راجع وثائق نظام القوالب .

محرر القوالب

توفر حزمة @rendervid/editor محرر قوالب مرئي كامل الميزات، مما يمكّن غير المطورين والمطورين على حد سواء من بناء قوالب Rendervid دون كتابة JSON يدوياً.

التحرير القائم على المخطط الزمني

يتميز المحرر بمخطط زمني متعدد المسارات حيث يتم تمثيل كل طبقة ككتلة يمكن سحبها وتغيير حجمها وإعادة وضعها. اضبط أوقات البدء والمدد وترتيب الطبقات بصرياً. قم بالتكبير للحصول على دقة على مستوى الإطار أو التصغير للحصول على نظرة عامة عالية المستوى.

لوحة إدارة الطبقات

لوحة مخصصة تسرد جميع الطبقات في التكوين مع إعادة ترتيب السحب والإفلات، ومفاتيح الرؤية، وعناصر التحكم في القفل، والتجميع. أضف طبقات جديدة من لوحة المكونات التي تتضمن جميع الأنواع الثمانية المدمجة وأي مكونات مخصصة مسجلة.

لوحة الخصائص

حدد أي طبقة لعرض وتحرير خصائصها في نموذج منظم. تتكيف لوحة الخصائص مع نوع الطبقة، وتعرض الحقول ذات الصلة فقط. منتقيات الألوان والمنزلقات والقوائم المنسدلة ومدخلات النص تجعل من السهل تعديل كل التفاصيل. تنعكس التغييرات فوراً في المعاينة.

سجل التراجع/الإعادة

يتم تسجيل كل تغيير في مكدس السجل مع دعم كامل للتراجع والإعادة. تنقل عبر سجل التحرير الخاص بك بثقة، مع العلم أنه يمكنك دائماً العودة إلى حالة سابقة.

معاينة في الوقت الفعلي

يتضمن المحرر مكون Player مضمناً يعرض القالب في الوقت الفعلي أثناء إجراء التغييرات. قم بمعاينة التكوين الكامل في أي نقطة أثناء التحرير دون الحاجة إلى التصدير أو العرض.

مكون المشغل

توفر حزمة @rendervid/player مكون React مستقل لمعاينة قوالب Rendervid في المتصفح.

تكامل React

قم بتثبيت وتضمين المشغل في أي تطبيق React:

import { Player } from "@rendervid/player";

function Preview({ template }) {
  return (
    <Player
      template={template}
      width={1920}
      height={1080}
      onComplete={() => console.log("انتهى التشغيل")}
    />
  );
}

اختصارات لوحة المفاتيح

يدعم المشغل عناصر تحكم مدمجة بلوحة المفاتيح للمعاينة الفعالة:

التحكم في السرعة

اضبط سرعة التشغيل من 0.25x (ربع السرعة) إلى 4x (أربعة أضعاف السرعة). يكون التشغيل البطيء مفيداً لمراجعة الرسوم المتحركة إطاراً بإطار، بينما يساعد التقديم السريع في المسح عبر التكوينات الأطول.

عمليات الاستدعاء والأحداث

يعرض المشغل عمليات استدعاء للتحكم البرمجي:

استخدم عمليات الاستدعاء هذه لمزامنة المشغل مع عناصر واجهة المستخدم الخارجية أو التحليلات أو التجارب التفاعلية.

معرض المكونات

توضح أمثلة المكونات المخصصة هذه نطاق ما هو ممكن مع نوع الطبقة المخصصة في Rendervid. تم بناء كل واحد باستخدام نفس نمط React.createElement() الموضح أعلاه.

انفجار الجسيمات

نظام جسيمات قائم على الفيزياء مع أكثر من 150 جسيماً، وجاذبية ولون ونصف قطر انفجار قابل للتكوين. تنبثق الجسيمات من نقطة مركزية وتنحني للخارج بحركة واقعية.

تصور الموجة

أنماط موجية تتفاعل مع الصوت وتستجيب لبيانات التردد. طبقات موجية متعددة مع سعة وتردد ولون قابل للتكوين تخلق مرئياً ديناميكياً عضوياً.

تأثيرات النص النيون

نص متوهج مع تأثيرات ضوء نيون متحركة، بما في ذلك الوميض والنبض ودورة الألوان. نصف قطر التوهج والألوان وسرعة الرسوم المتحركة قابلة للتخصيص.

واجهة هولوغرافية

واجهة مستخدم هولوغرافية مستوحاة من الخيال العلمي مع خطوط مسح وقراءات بيانات وتراكبات شبكة وعناصر واجهة مستخدم متحركة. مثالي لمقاطع الفيديو ذات الطابع التقني والمقدمات المستقبلية.

دوران المكعب ثلاثي الأبعاد

مكعب CSS ثلاثي الأبعاد معجل بالأجهزة مع وجوه ذات نسيج ودوران سلس. يستخدم CSS perspective وtransform3d للعرض ثلاثي الأبعاد الفعال دون WebGL.

لوحة معلومات تصور البيانات

مكون لوحة معلومات متعدد المخططات يتميز بمخططات شريطية متحركة ورسوم بيانية خطية وعدادات إحصائيات. يعتمد على البيانات وقابل للتكوين للتقارير والعروض التقديمية وسرد قصص البيانات.

تتضمن أمثلة المكونات المخصصة الإضافية:

• عداد متحرك – رسم متحرك لعد الأرقام مع دوال التخفيف
• حلقة التقدم – مؤشر تقدم دائري مع قوس وألوان قابلة للتكوين
• آلة كاتبة – رسم متحرك لكتابة النص مع مؤشر وسرعة متغيرة

الخطوات التالية

• تعرف على نظام قوالب Rendervid لهيكلة المشاهد والتكوينات
• استكشف تكامل الذكاء الاصطناعي لإنشاء قوالب باللغة الطبيعية
• راجع دليل النشر لعرض وتصدير مقاطع الفيديو النهائية
• عد إلى نظرة عامة على Rendervid للحصول على مقدمة عالية المستوى