Rendervid Components - Các Loại Lớp, Thành Phần React & Trình Chỉnh Sửa Trực Quan

Rendervid được xây dựng trên kiến trúc dựa trên thành phần giúp việc tạo video trở nên mô-đun, có thể mở rộng và thân thiện với nhà phát triển. Mọi phần tử trong mẫu Rendervid đều là một lớp, và mỗi lớp có một loại cụ thể xác định cách nó được render. Với 8 loại lớp tích hợp sẵn, một thư viện ngày càng phát triển các thành phần React được xây dựng sẵn, một trình chỉnh sửa mẫu trực quan và một trình phát độc lập, Rendervid cung cấp cho bạn mọi thứ bạn cần để sản xuất nội dung video chuyên nghiệp theo chương trình.

Trang này bao gồm toàn bộ hệ sinh thái thành phần: từ các loại lớp nguyên thủy như text và shape, qua phát lại audio và video, đến các thành phần React tùy chỉnh hoàn toàn mở khóa khả năng sáng tạo không giới hạn. Cho dù bạn đang xây dựng một thẻ tiêu đề đơn giản hay một hoạt ảnh phức tạp dựa trên dữ liệu, việc hiểu các thành phần này là nền tảng.

Các Loại Lớp Tích Hợp Sẵn

Mỗi lớp trong mẫu Rendervid được định nghĩa là một đối tượng JSON với trường type. Loại xác định các thuộc tính có sẵn và hành vi render. Dưới đây là tài liệu tham khảo chi tiết cho từng loại trong 8 loại lớp tích hợp sẵn.

Lớp Text

Lớp text là nguyên thủy giàu tính năng nhất trong Rendervid. Nó render văn bản có kiểu với toàn quyền kiểm soát kiểu chữ, căn chỉnh, màu sắc, hiệu ứng và hoạt ảnh.

Thuộc tính kiểu chữ:

Rendervid đi kèm với hơn 100 Google Fonts tích hợp sẵn. Bạn có thể sử dụng bất kỳ font nào trong số đó bằng cách chỉ định thuộc tính fontFamily mà không cần tải các stylesheet bên ngoài.

Thuộc tính căn chỉnh:

Kiểu dáng và hiệu ứng:

• color và backgroundColor cho tô màu cơ bản
• textShadow cho đổ bóng
• textStroke cho văn bản có viền
• textDecoration cho gạch chân, gạch ngang
• textTransform cho chữ hoa, chữ thường, viết hoa chữ cái đầu
• maxLines với cắt ngắn dấu ba chấm tự động
• Hiệu ứng typewriter tích hợp sẵn cho hiệu ứng hiện chữ từng ký tự

{
  "type": "text",
  "text": "Welcome to 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)"
}

Đối với hoạt ảnh văn bản nâng cao như hiệu ứng typewriter, hãy kết hợp lớp text với hoạt ảnh keyframe hoặc sử dụng thành phần TypewriterEffect chuyên dụng.

Lớp Image

Lớp image hiển thị hình ảnh raster và vector với các tùy chọn định kích thước và cắt xén linh hoạt.

Thuộc tính chính:

Định dạng được hỗ trợ: 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"
}

Thuộc tính fit hoạt động giống như CSS object-fit:

• cover – thu phóng hình ảnh để lấp đầy lớp, cắt phần thừa
• contain – thu phóng để vừa hoàn toàn trong lớp, có thể có letterboxing
• fill – kéo giãn hình ảnh để khớp chính xác kích thước lớp
• none – render hình ảnh ở độ phân giải gốc của nó

Lớp Video

Lớp video nhúng các clip video vào composition của bạn với toàn quyền kiểm soát phát lại.

Thuộc tính chính:

{
  "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
}

Sử dụng startTime để bỏ qua phần giới thiệu hoặc nhảy đến một điểm cụ thể trong cảnh quay nguồn. Kết hợp với playbackRate cho hiệu ứng chuyển động chậm (0.5) hoặc time-lapse (2.0).

Lớp Shape

Lớp shape vẽ các hình vector với fill, stroke, gradient và góc bo tròn.

Các loại hình:

Thuộc tính kiểu dáng:

• fill – màu đặc hoặc gradient
• stroke – màu viền
• strokeWidth – độ dày viền
• borderRadius – góc bo tròn cho hình chữ nhật
• Gradients: cả fill gradient linear và 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
}

Đối với các hình tùy chỉnh, sử dụng loại path với dữ liệu đường dẫn SVG chuẩn:

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

Lớp Audio

Lớp audio thêm các track âm thanh vào composition của bạn với điều khiển âm lượng, fade và chuỗi hiệu ứng đầy đủ.

Thuộc tính chính:

Chuỗi hiệu ứng âm thanh:

Rendervid bao gồm một pipeline xử lý hiệu ứng tích hợp sẵn. Các hiệu ứng có sẵn:

• EQ – cân bằng cho định hình âm sắc
• Compressor – nén dải động
• Reverb – tiếng vang không gian
• Delay – hiệu ứng echo/delay
• Gain – tăng hoặc giảm âm lượng
• High-pass filter – loại bỏ tần số thấp
• Low-pass filter – loại bỏ tần số cao
• Panning – định vị stereo (trái/phải)

{
  "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
}

Các hiệu ứng được xử lý theo thứ tự, cho phép bạn xây dựng các chuỗi xử lý âm thanh phức tạp. Sử dụng giá trị pan từ -1 (hoàn toàn bên trái) đến 1 (hoàn toàn bên phải) cho định vị stereo.

Lớp Group

Lớp group là một container chứa các lớp con. Các phép biến đổi áp dụng cho group sẽ ảnh hưởng đến tất cả các lớp con, giúp dễ dàng di chuyển, thu phóng, xoay hoặc tạo hoạt ảnh cho các composition nhiều lớp phức tạp như một đơn vị duy nhất.

Thuộc tính chính:

{
  "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": "Card Title",
      "x": 24,
      "y": 24,
      "fontSize": 28,
      "fontWeight": 600,
      "color": "#F8FAFC"
    },
    {
      "type": "text",
      "text": "Supporting description text goes here.",
      "x": 24,
      "y": 64,
      "fontSize": 16,
      "color": "#94A3B8"
    }
  ]
}

Các group rất có giá trị cho việc tổ chức các mẫu phức tạp. Sử dụng chúng để tạo các layout thẻ có thể tái sử dụng, lower-thirds, overlays và các phần tử tổng hợp khác. Tọa độ con là tương đối so với vị trí của group.

Lớp Lottie

Lớp lottie render các hoạt ảnh Lottie được xuất từ After Effects, Figma hoặc các công cụ hoạt ảnh khác.

Thuộc tính chính:

{
  "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
}

Các lớp Lottie lý tưởng để thêm đồ họa chuyển động bóng bẩy, biểu tượng, chỉ báo tải và hoạt ảnh thương hiệu mà không cần viết mã từng khung hình. Các thuộc tính startFrame và endFrame cho phép bạn cắt hoạt ảnh để chỉ phát một phân đoạn cụ thể.

Lớp Custom

Lớp custom là loại lớp mạnh mẽ nhất trong Rendervid. Nó cho phép bạn viết các thành phần React tùy ý render từng khung hình, cho bạn toàn quyền kiểm soát đầu ra trực quan.

Có ba loại triển khai cho các thành phần tùy chỉnh:

Triển Khai Inline

Nhúng mã JavaScript trực tiếp vào mẫu JSON của bạn. Tốt nhất cho các thành phần nhỏ, độc lập.

{
  "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"
  }
}

Triển Khai URL

Tải một thành phần từ một URL bên ngoài như CDN. Tốt nhất cho các thành phần có thể tái sử dụng được chia sẻ giữa các mẫu.

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

Triển Khai Reference

Sử dụng một thành phần đã đăng ký trước theo tên. Tốt nhất cho các thành phần từ gói @rendervid/components hoặc các registry tùy chỉnh.

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

Mỗi thành phần tùy chỉnh nhận một tập hợp props chuẩn:

Các thành phần tùy chỉnh cũng hỗ trợ xác thực schema cho props, đảm bảo rằng các mẫu truyền đúng kiểu dữ liệu và các trường bắt buộc cho mỗi thành phần.

Các Thành Phần React Được Xây Dựng Sẵn

Gói @rendervid/components đi kèm với một tập hợp các thành phần sẵn sàng sản xuất mà bạn có thể sử dụng ngay lập tức trong các mẫu của mình.

AnimatedLineChart

Render các biểu đồ đường hoạt ảnh với fill gradient mượt mà, các điểm dữ liệu có thể cấu hình, nhãn trục và hiệu ứng vẽ vào hoạt ảnh. Lý tưởng cho nội dung video dựa trên dữ liệu như báo cáo, bảng điều khiển và bài thuyết trình.

Props chính: data, lineColor, gradientOpacity, strokeWidth, labels, animationStyle

AuroraBackground

Tạo hiệu ứng cực quang (aurora borealis) mê hoặc bằng cách sử dụng các gradient phân lớp và chuyển động chất lỏng. Hoàn hảo cho nền khí quyển, chuỗi giới thiệu và hình ảnh môi trường xung quanh.

Props chính: colors, speed, intensity, blur

WaveBackground

Tạo hoạt ảnh sóng chất lỏng với màu sắc, biên độ và tần số có thể cấu hình. Sử dụng nó cho nền thời trang, trình trực quan hóa âm nhạc hoặc nội dung chủ đề đại dương.

Props chính: waveCount, colors, amplitude, frequency, speed

SceneTransition

Cung cấp 17 loại chuyển cảnh chuyên nghiệp để di chuyển giữa các cảnh. Bao gồm wipes, fades, zooms, slides và nhiều hơn nữa. Mỗi chuyển cảnh đều chính xác theo khung hình và có thể cấu hình.

Props chính: transitionType, duration, direction, easing

TypewriterEffect

Render hiệu ứng hiện chữ từng ký tự với con trỏ nhấp nháy. Hỗ trợ tốc độ gõ có thể cấu hình, kiểu con trỏ và độ trễ giữa các từ. Tuyệt vời cho demo code, mô phỏng chat và hiệu ứng hiện chữ kịch tính.

Props chính: text, typingSpeed, cursorChar, cursorBlinkRate, startDelay

Phát Triển Thành Phần Tùy Chỉnh

Xây dựng các thành phần tùy chỉnh của riêng bạn là nơi Rendervid thực sự tỏa sáng. Bất kỳ hiệu ứng trực quan nào bạn có thể tạo bằng JavaScript và CSS đều có thể trở thành một thành phần Rendervid.

Cấu Trúc Thành Phần

Một thành phần tùy chỉnh Rendervid là một hàm JavaScript chuẩn nhận props và trả về một phần tử React. Sự khác biệt chính so với các thành phần React thông thường là việc render được điều khiển theo khung hình thay vì điều khiển theo sự kiện.

function MyComponent({ frame, fps, sceneDuration, layerSize, props }) {
  // Tính toán tiến trình hoạt ảnh (0 đến 1)
  const totalFrames = fps * sceneDuration;
  const progress = frame / totalFrames;

  // Sử dụng progress để điều khiển hoạt ảnh
  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 || "Hello, Rendervid!");
}

Các Props Có Sẵn

Mỗi thành phần tùy chỉnh nhận các props chuẩn sau:

• frame – Số khung hình hiện tại, bắt đầu từ 0. Đây là trình điều khiển hoạt ảnh chính của bạn.
• fps – Số khung hình trên giây (thường là 30 hoặc 60). Sử dụng nó để chuyển đổi khung hình sang giây.
• sceneDuration – Thời lượng của cảnh hiện tại tính bằng giây. Nhân với fps để có tổng số khung hình.
• layerSize – Một đối tượng với width và height tính bằng pixel, khớp với kích thước lớp được định nghĩa trong mẫu.
• props – Một đối tượng chứa bất kỳ thuộc tính tùy chỉnh nào được định nghĩa trong JSON mẫu.

Mẫu React.createElement()

Vì các thành phần Rendervid chạy trong môi trường render, chúng sử dụng React.createElement() thay vì JSX. Mẫu này rất đơn giản:

// Tương đương JSX: <div className="container"><span>Hello</span></div>
React.createElement("div", { className: "container" },
  React.createElement("span", null, "Hello")
);

Xác Thực Schema Props

Bạn có thể định nghĩa một schema cho props của thành phần để xác thực dữ liệu tại thời điểm tải mẫu:

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 },
};

Ví Dụ: Hệ Thống Hạt

Một thành phần hệ thống hạt mô phỏng hơn 150 hạt với vật lý:

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);
}

Ví Dụ: Bộ Đếm Hoạt Ảnh

Một hoạt ảnh đếm số nội suy giữa các giá trị bắt đầu và kết thúc:

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 || ""));
}

Để biết thêm về cách các thành phần tùy chỉnh phù hợp với cấu trúc mẫu rộng hơn, hãy xem tài liệu Hệ thống Mẫu .

Trình Chỉnh Sửa Mẫu

Gói @rendervid/editor cung cấp một trình chỉnh sửa mẫu trực quan đầy đủ tính năng, cho phép cả người không phải nhà phát triển và nhà phát triển xây dựng các mẫu Rendervid mà không cần viết JSON thủ công.

Chỉnh Sửa Dựa Trên Timeline

Trình chỉnh sửa có timeline đa track trong đó mỗi lớp được biểu diễn dưới dạng một khối có thể kéo, thay đổi kích thước và định vị lại. Điều chỉnh thời gian bắt đầu, thời lượng và thứ tự lớp một cách trực quan. Phóng to để có độ chính xác cấp khung hình hoặc thu nhỏ để có cái nhìn tổng quan cấp cao.

Bảng Quản Lý Lớp

Một bảng chuyên dụng liệt kê tất cả các lớp trong composition với sắp xếp lại kéo và thả, chuyển đổi khả năng hiển thị, điều khiển khóa và nhóm. Thêm các lớp mới từ bảng thành phần bao gồm tất cả 8 loại tích hợp sẵn và bất kỳ thành phần tùy chỉnh đã đăng ký nào.

Bảng Thuộc Tính

Chọn bất kỳ lớp nào để xem và chỉnh sửa các thuộc tính của nó trong một biểu mẫu có cấu trúc. Bảng thuộc tính thích ứng với loại lớp, chỉ hiển thị các trường liên quan. Bộ chọn màu, thanh trượt, menu thả xuống và đầu vào văn bản giúp dễ dàng điều chỉnh mọi chi tiết. Các thay đổi được phản ánh ngay lập tức trong bản xem trước.

Lịch Sử Undo/Redo

Mỗi thay đổi được ghi lại trong một ngăn xếp lịch sử với hỗ trợ undo và redo đầy đủ. Điều hướng qua lịch sử chỉnh sửa của bạn một cách tự tin, biết rằng bạn luôn có thể hoàn nguyên về trạng thái trước đó.

Xem Trước Theo Thời Gian Thực

Trình chỉnh sửa bao gồm một thành phần Player nhúng render mẫu theo thời gian thực khi bạn thực hiện thay đổi. Xem trước toàn bộ composition tại bất kỳ điểm nào trong quá trình chỉnh sửa mà không cần xuất hoặc render.

Thành Phần Player

Gói @rendervid/player cung cấp một thành phần React độc lập để xem trước các mẫu Rendervid trong trình duyệt.

Tích Hợp React

Cài đặt và nhúng player vào bất kỳ ứng dụng React nào:

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

function Preview({ template }) {
  return (
    <Player
      template={template}
      width={1920}
      height={1080}
      onComplete={() => console.log("Playback finished")}
    />
  );
}

Phím Tắt

Player hỗ trợ các điều khiển bàn phím tích hợp sẵn để xem trước hiệu quả:

Điều Khiển Tốc Độ

Điều chỉnh tốc độ phát lại từ 0.25x (một phần tư tốc độ) đến 4x (gấp bốn lần tốc độ). Phát lại chuyển động chậm hữu ích để xem lại hoạt ảnh từng khung hình, trong khi tua nhanh giúp quét qua các composition dài hơn.

Callbacks và Events

Player cung cấp các callback cho điều khiển theo chương trình:

Sử dụng các callback này để đồng bộ hóa player với các phần tử UI bên ngoài, phân tích hoặc trải nghiệm tương tác.

Thư Viện Thành Phần

Các thành phần tùy chỉnh ví dụ này minh họa phạm vi những gì có thể với loại lớp tùy chỉnh của Rendervid. Mỗi thành phần được xây dựng bằng cách sử dụng cùng một mẫu React.createElement() được mô tả ở trên.

Nổ Hạt

Một hệ thống hạt dựa trên vật lý với hơn 150 hạt, trọng lực, màu sắc và bán kính nổ có thể cấu hình. Các hạt xuất hiện từ một điểm trung tâm và vòng cung ra ngoài với chuyển động thực tế.

Trực Quan Hóa Sóng

Các mẫu sóng phản ứng âm thanh phản hồi dữ liệu tần số. Nhiều lớp sóng với biên độ, tần số và màu sắc có thể cấu hình tạo ra hình ảnh động và hữu cơ.

Hiệu Ứng Văn Bản Neon

Văn bản phát sáng với hiệu ứng đèn neon hoạt ảnh, bao gồm nhấp nháy, nhịp đập và chu kỳ màu. Bán kính phát sáng, màu sắc và tốc độ hoạt ảnh có thể tùy chỉnh.

Giao Diện Holographic

Một giao diện người dùng holographic lấy cảm hứng từ khoa học viễn tưởng với các đường quét, đọc dữ liệu, lớp phủ lưới và các phần tử UI hoạt ảnh. Lý tưởng cho video chủ đề công nghệ và phần giới thiệu tương lai.

Xoay Khối 3D

Một khối 3D CSS được tăng tốc phần cứng với các mặt có kết cấu và xoay mượt mà. Sử dụng CSS perspective và transform3d để render 3D hiệu suất cao mà không cần WebGL.

Bảng Điều Khiển Trực Quan Hóa Dữ Liệu

Một thành phần bảng điều khiển đa biểu đồ có biểu đồ thanh hoạt ảnh, biểu đồ đường và bộ đếm thống kê. Dựa trên dữ liệu và có thể cấu hình cho báo cáo, bài thuyết trình và kể chuyện dữ liệu.

Các ví dụ thành phần tùy chỉnh bổ sung bao gồm:

• Animated Counter – hoạt ảnh đếm số với các hàm easing
• Progress Ring – chỉ báo tiến trình hình tròn với cung và màu sắc có thể cấu hình
• Typewriter – hoạt ảnh gõ văn bản với con trỏ và tốc độ thay đổi

Các Bước Tiếp Theo

• Tìm hiểu về Hệ thống Mẫu Rendervid để cấu trúc cảnh và composition
• Khám phá Tích hợp AI để tạo mẫu bằng ngôn ngữ tự nhiên
• Xem hướng dẫn Triển khai để render và xuất video cuối cùng
• Quay lại tổng quan Rendervid để có phần giới thiệu cấp cao