Komponenty Rendervid - Typy warstw, komponenty React i edytor wizualny

Rendervid jest zbudowany na architekturze opartej na komponentach, która sprawia, że tworzenie wideo jest modułowe, rozszerzalne i przyjazne dla programistów. Każdy element w szablonie Rendervid jest warstwą, a każda warstwa ma określony typ, który determinuje sposób jej renderowania. Z 8 wbudowanymi typami warstw, rosnącą biblioteką gotowych komponentów React, wizualnym edytorem szablonów i samodzielnym odtwarzaczem, Rendervid daje Ci wszystko, czego potrzebujesz do programowego tworzenia profesjonalnych treści wideo.

Ta strona obejmuje cały ekosystem komponentów: od prymitywnych typów warstw takich jak tekst i kształt, przez odtwarzanie dźwięku i wideo, po w pełni niestandardowe komponenty React, które odblokowują nieograniczone możliwości twórcze. Niezależnie od tego, czy budujesz prostą kartę tytułową, czy złożoną animację opartą na danych, zrozumienie tych komponentów jest fundamentem.

Wbudowane typy warstw

Każda warstwa w szablonie Rendervid jest zdefiniowana jako obiekt JSON z polem type. Typ określa dostępne właściwości i zachowanie renderowania. Poniżej znajduje się szczegółowa dokumentacja dla każdego z 8 wbudowanych typów warstw.

Warstwa tekstowa

Warstwa text jest najbardziej zaawansowanym prymitywem w Rendervid. Renderuje stylizowany tekst z pełną kontrolą nad typografią, wyrównaniem, kolorem, efektami i animacją.

Właściwości typograficzne:

Rendervid jest dostarczany z ponad 100 czcionkami Google Fonts wbudowanymi. Możesz używać dowolnej z nich, określając właściwość fontFamily bez konieczności ładowania zewnętrznych arkuszy stylów.

Właściwości wyrównania:

Stylizacja i efekty:

• color i backgroundColor dla podstawowego kolorowania
• textShadow dla cieni
• textStroke dla tekstu z konturem
• textDecoration dla podkreślenia, przekreślenia
• textTransform dla wielkich liter, małych liter, kapitalizacji
• maxLines z automatycznym obcinaniem wielokropka
• Wbudowany efekt maszyny do pisania dla ujawniania tekstu znak po znaku

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

Dla zaawansowanych animacji tekstowych, takich jak efekt maszyny do pisania, połącz warstwę tekstową z animacjami klatek kluczowych lub użyj dedykowanego komponentu TypewriterEffect .

Warstwa obrazu

Warstwa image wyświetla obrazy rastrowe i wektorowe z elastycznymi opcjami rozmiaru i kadrowania.

Kluczowe właściwości:

Obsługiwane formaty: 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"
}

Właściwość fit działa jak CSS object-fit:

• cover – skaluje obraz, aby wypełnić warstwę, kadrując nadmiar
• contain – skaluje, aby zmieścić się całkowicie w warstwie, z możliwym letterboxingiem
• fill – rozciąga obraz, aby dokładnie dopasować wymiary warstwy
• none – renderuje obraz w jego natywnej rozdzielczości

Warstwa wideo

Warstwa video osadza klipy wideo w Twojej kompozycji z pełną kontrolą odtwarzania.

Kluczowe właściwości:

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

Użyj startTime, aby pominąć intro lub przeskoczyć do określonego punktu w źródłowym materiale. Połącz z playbackRate dla efektów zwolnionego tempa (0.5) lub przyspieszenia (2.0).

Warstwa kształtu

Warstwa shape rysuje kształty wektorowe z wypełnieniami, obramowaniami, gradientami i zaokrąglonymi rogami.

Typy kształtów:

Właściwości stylizacji:

• fill – jednolity kolor lub gradient
• stroke – kolor obramowania
• strokeWidth – grubość obramowania
• borderRadius – zaokrąglone rogi dla prostokątów
• Gradienty: zarówno wypełnienia gradientem linear jak i 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
}

Dla niestandardowych kształtów użyj typu path ze standardowymi danymi ścieżki SVG:

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

Warstwa dźwiękowa

Warstwa audio dodaje ścieżki dźwiękowe do Twojej kompozycji z kontrolą głośności, zanikaniem i pełnym łańcuchem efektów.

Kluczowe właściwości:

Łańcuch efektów dźwiękowych:

Rendervid zawiera wbudowany potok przetwarzania efektów. Dostępne efekty:

• EQ – korekcja dla kształtowania tonu
• Compressor – kompresja zakresu dynamicznego
• Reverb – pogłos przestrzenny
• Delay – efekt echa/opóźnienia
• Gain – wzmocnienie lub tłumienie głośności
• High-pass filter – usunięcie niskich częstotliwości
• Low-pass filter – usunięcie wysokich częstotliwości
• Panning – pozycjonowanie stereo (lewo/prawo)

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

Efekty są przetwarzane w kolejności, co pozwala budować zaawansowane łańcuchy przetwarzania dźwięku. Użyj wartości pan od -1 (całkowicie w lewo) do 1 (całkowicie w prawo) dla pozycjonowania stereo.

Warstwa grupy

Warstwa group jest kontenerem, który zawiera warstwy potomne. Transformacje zastosowane do grupy wpływają na wszystkie dzieci, co ułatwia przesuwanie, skalowanie, obracanie lub animowanie złożonych kompozycji wielowarstwowych jako pojedynczej jednostki.

Kluczowe właściwości:

{
  "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": "Tytuł karty",
      "x": 24,
      "y": 24,
      "fontSize": 28,
      "fontWeight": 600,
      "color": "#F8FAFC"
    },
    {
      "type": "text",
      "text": "Tutaj znajduje się tekst opisowy.",
      "x": 24,
      "y": 64,
      "fontSize": 16,
      "color": "#94A3B8"
    }
  ]
}

Grupy są nieocenione do organizowania złożonych szablonów. Użyj ich do tworzenia wielokrotnego użytku układów kart, napisów dolnych, nakładek i innych elementów złożonych. Współrzędne potomne są względne do pozycji grupy.

Warstwa Lottie

Warstwa lottie renderuje animacje Lottie wyeksportowane z After Effects, Figma lub innych narzędzi animacyjnych.

Kluczowe właściwości:

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

Warstwy Lottie są idealne do dodawania dopracowanej grafiki ruchomej, ikon, wskaźników ładowania i markowych animacji bez pisania kodu klatka po klatce. Właściwości startFrame i endFrame pozwalają przyciąć animację, aby odtworzyć tylko określony segment.

Warstwa niestandardowa

Warstwa custom jest najpotężniejszym typem warstwy w Rendervid. Pozwala pisać dowolne komponenty React, które renderują klatka po klatce, dając Ci pełną kontrolę nad wyjściem wizualnym.

Istnieją trzy typy wdrażania komponentów niestandardowych:

Wdrożenie inline

Osadź kod JavaScript bezpośrednio w szablonie JSON. Najlepsze dla małych, samodzielnych komponentów.

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

Wdrożenie URL

Załaduj komponent z zewnętrznego URL, takiego jak CDN. Najlepsze dla komponentów wielokrotnego użytku współdzielonych między szablonami.

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

Wdrożenie referencyjne

Użyj wstępnie zarejestrowanego komponentu według nazwy. Najlepsze dla komponentów z pakietu @rendervid/components lub niestandardowych rejestrów.

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

Każdy komponent niestandardowy otrzymuje standardowy zestaw właściwości:

Komponenty niestandardowe obsługują również walidację schematu dla właściwości, zapewniając, że szablony przekazują prawidłowe typy danych i wymagane pola do każdego komponentu.

Gotowe komponenty React

Pakiet @rendervid/components jest dostarczany z zestawem gotowych do produkcji komponentów, których możesz natychmiast użyć w swoich szablonach.

AnimatedLineChart

Renderuje animowane wykresy liniowe z płynnymi wypełnieniami gradientowymi, konfigurowalnymi punktami danych, etykietami osi i animowanymi efektami rysowania. Idealny do treści wideo opartych na danych, takich jak raporty, pulpity nawigacyjne i prezentacje.

Kluczowe właściwości: data, lineColor, gradientOpacity, strokeWidth, labels, animationStyle

AuroraBackground

Tworzy hipnotyzujący efekt zorzy polarnej (aurora borealis) przy użyciu warstwowych gradientów i płynnego ruchu. Idealny do atmosferycznych teł, sekwencji intro i wizualizacji otoczenia.

Kluczowe właściwości: colors, speed, intensity, blur

WaveBackground

Generuje płynne animacje fal z konfigurowalnymi kolorami, amplitudami i częstotliwościami. Użyj go do stylowych teł, wizualizatorów muzyki lub treści o tematyce oceanicznej.

Kluczowe właściwości: waveCount, colors, amplitude, frequency, speed

SceneTransition

Zapewnia 17 profesjonalnych typów przejść do przechodzenia między scenami. Obejmuje wycierania, zanikania, powiększenia, przesunięcia i więcej. Każde przejście jest dokładne co do klatki i konfigurowalne.

Kluczowe właściwości: transitionType, duration, direction, easing

TypewriterEffect

Renderuje ujawnianie tekstu znak po znaku z migającym kursorem. Obsługuje konfigurowalną prędkość pisania, styl kursora i opóźnienie między słowami. Świetny do demonstracji kodu, symulacji czatu i dramatycznych ujawnień tekstu.

Kluczowe właściwości: text, typingSpeed, cursorChar, cursorBlinkRate, startDelay

Tworzenie komponentów niestandardowych

Budowanie własnych komponentów niestandardowych to miejsce, w którym Rendervid naprawdę błyszczy. Każdy efekt wizualny, który możesz stworzyć za pomocą JavaScript i CSS, może stać się komponentem Rendervid.

Struktura komponentu

Niestandardowy komponent Rendervid to standardowa funkcja JavaScript, która otrzymuje właściwości i zwraca element React. Kluczowa różnica w porównaniu z typowymi komponentami React polega na tym, że renderowanie jest sterowane klatkami, a nie zdarzeniami.

function MyComponent({ frame, fps, sceneDuration, layerSize, props }) {
  // Oblicz postęp animacji (od 0 do 1)
  const totalFrames = fps * sceneDuration;
  const progress = frame / totalFrames;

  // Użyj postępu do sterowania animacjami
  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 || "Witaj, Rendervid!");
}

Dostępne właściwości

Każdy komponent niestandardowy otrzymuje te standardowe właściwości:

• frame – Bieżący numer klatki, zaczynający się od 0. To Twój główny sterownik animacji.
• fps – Liczba klatek na sekundę (zwykle 30 lub 60). Użyj go do konwersji klatek na sekundy.
• sceneDuration – Czas trwania bieżącej sceny w sekundach. Pomnóż przez fps, aby uzyskać całkowitą liczbę klatek.
• layerSize – Obiekt z width i height w pikselach, pasujący do wymiarów warstwy zdefiniowanych w szablonie.
• props – Obiekt zawierający dowolne niestandardowe właściwości zdefiniowane w JSON szablonu.

Wzorzec React.createElement()

Ponieważ komponenty Rendervid działają w środowisku renderowania, używają React.createElement() zamiast JSX. Wzorzec jest prosty:

// Równoważnik JSX: <div className="container"><span>Witaj</span></div>
React.createElement("div", { className: "container" },
  React.createElement("span", null, "Witaj")
);

Walidacja schematu właściwości

Możesz zdefiniować schemat dla właściwości swojego komponentu, aby walidować dane w czasie ładowania szablonu:

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

Przykład: System cząstek

Komponent systemu cząstek, który symuluje ponad 150 cząstek z fizyką:

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

Przykład: Animowany licznik

Animacja liczenia liczb, która interpoluje między wartościami początkowymi i końcowymi:

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

Aby dowiedzieć się więcej o tym, jak komponenty niestandardowe wpasowują się w szerszą strukturę szablonu, zobacz dokumentację systemu szablonów .

Edytor szablonów

Pakiet @rendervid/editor zapewnia w pełni funkcjonalny wizualny edytor szablonów, umożliwiając zarówno nieprogramistom, jak i programistom budowanie szablonów Rendervid bez ręcznego pisania JSON.

Edycja oparta na osi czasu

Edytor zawiera wielościeżkową oś czasu, na której każda warstwa jest reprezentowana jako blok, który można przeciągać, zmieniać rozmiar i zmieniać położenie. Dostosuj czasy rozpoczęcia, czas trwania i kolejność warstw wizualnie. Powiększ dla precyzji na poziomie klatki lub pomniejsz dla przeglądu wysokiego poziomu.

Panel zarządzania warstwami

Dedykowany panel zawiera listę wszystkich warstw w kompozycji z możliwością zmiany kolejności przez przeciąganie i upuszczanie, przełącznikami widoczności, kontrolkami blokady i grupowaniem. Dodawaj nowe warstwy z palety komponentów, która zawiera wszystkie 8 wbudowanych typów i wszelkie zarejestrowane komponenty niestandardowe.

Panel właściwości

Wybierz dowolną warstwę, aby wyświetlić i edytować jej właściwości w ustrukturyzowanym formularzu. Panel właściwości dostosowuje się do typu warstwy, pokazując tylko odpowiednie pola. Selektory kolorów, suwaki, listy rozwijane i pola tekstowe ułatwiają dostosowanie każdego szczegółu. Zmiany są natychmiast odzwierciedlane w podglądzie.

Historia Cofnij/Ponów

Każda zmiana jest rejestrowana w stosie historii z pełną obsługą cofania i ponawiania. Nawiguj przez historię edycji z pewnością, wiedząc, że zawsze możesz wrócić do poprzedniego stanu.

Podgląd w czasie rzeczywistym

Edytor zawiera wbudowany komponent Player , który renderuje szablon w czasie rzeczywistym podczas wprowadzania zmian. Podglądaj pełną kompozycję w dowolnym momencie podczas edycji bez konieczności eksportowania lub renderowania.

Komponent Player

Pakiet @rendervid/player zapewnia samodzielny komponent React do podglądu szablonów Rendervid w przeglądarce.

Integracja z React

Zainstaluj i osadź odtwarzacz w dowolnej aplikacji React:

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

function Preview({ template }) {
  return (
    <Player
      template={template}
      width={1920}
      height={1080}
      onComplete={() => console.log("Odtwarzanie zakończone")}
    />
  );
}

Skróty klawiaturowe

Odtwarzacz obsługuje wbudowane sterowanie klawiaturą dla efektywnego podglądu:

Kontrola prędkości

Dostosuj prędkość odtwarzania od 0.25x (ćwierć prędkości) do 4x (czterokrotna prędkość). Odtwarzanie w zwolnionym tempie jest przydatne do przeglądania animacji klatka po klatce, podczas gdy przewijanie do przodu pomaga skanować dłuższe kompozycje.

Wywołania zwrotne i zdarzenia

Odtwarzacz udostępnia wywołania zwrotne do programowej kontroli:

Użyj tych wywołań zwrotnych do synchronizacji odtwarzacza z zewnętrznymi elementami interfejsu użytkownika, analityką lub interaktywnymi doświadczeniami.

Galeria komponentów

Te przykładowe komponenty niestandardowe demonstrują zakres tego, co jest możliwe z typem warstwy niestandardowej Rendervid. Każdy z nich jest zbudowany przy użyciu tego samego wzorca React.createElement() opisanego powyżej.

Eksplozja cząstek

System cząstek oparty na fizyce z ponad 150 cząstkami, konfigurowalna grawitacja, kolor i promień eksplozji. Cząstki pojawiają się z centralnego punktu i wylatują na zewnątrz z realistycznym ruchem.

Wizualizacja fal

Wzory fal reagujące na dźwięk, które odpowiadają na dane częstotliwości. Wiele warstw fal z konfigurowalnymi amplitudami, częstotliwościami i kolorami tworzy dynamiczny, organiczny obraz.

Efekty tekstu neonowego

Świecący tekst z animowanymi efektami światła neonowego, w tym migotaniem, pulsowaniem i cykliczną zmianą kolorów. Konfigurowalny promień świecenia, kolory i prędkość animacji.

Interfejs holograficzny

Interfejs użytkownika inspirowany science fiction z liniami skanującymi, odczytami danych, nakładkami siatki i animowanymi elementami interfejsu. Idealny do filmów o tematyce technologicznej i futurystycznych intro.

Rotacja sześcianu 3D

Sześcian CSS 3D przyspieszany sprzętowo z teksturowanymi ścianami i płynną rotacją. Używa CSS perspective i transform3d do wydajnego renderowania 3D bez WebGL.

Pulpit wizualizacji danych

Komponent pulpitu wielowykresowego zawierający animowane wykresy słupkowe, wykresy liniowe i liczniki statystyk. Oparty na danych i konfigurowalny do raportów, prezentacji i opowiadania historii danymi.

Dodatkowe przykłady komponentów niestandardowych obejmują:

• Animated Counter – animacja liczenia liczb z funkcjami łagodzenia
• Progress Ring – kołowy wskaźnik postępu z konfigurowalnym łukiem i kolorami
• Typewriter – animacja pisania tekstu z kursorem i zmienną prędkością

Następne kroki

• Dowiedz się o systemie szablonów Rendervid do strukturyzowania scen i kompozycji
• Poznaj integrację AI do generowania szablonów za pomocą języka naturalnego
• Zobacz przewodnik wdrażania do renderowania i eksportowania ostatecznych filmów
• Wróć do przeglądu Rendervid dla wprowadzenia na wysokim poziomie