Rendervid-komponentit - Kerrostyypit, React-komponentit ja visuaalinen editori

Rendervid on rakennettu komponenttipohjaiselle arkkitehtuurille, joka tekee videon luomisesta modulaarista, laajennettavaa ja kehittäjäystävällistä. Jokainen elementti Rendervid-mallissa on kerros, ja jokaisella kerroksella on tietty tyyppi, joka määrittää, miten se renderöidään. 8 sisäänrakennetulla kerrostyypillä, kasvavalla valmiiden React-komponenttien kirjastolla, visuaalisella mallineeditorilla ja itsenäisellä soittimella Rendervid antaa sinulle kaiken, mitä tarvitset ammattimaisen videosisällön tuottamiseen ohjelmallisesti.

Tämä sivu kattaa koko komponenttiekosysteemin: primitiivisistä kerrostyypeistä kuten teksti ja muoto, äänen ja videon toiston kautta täysin mukautettuihin React-komponentteihin, jotka avaavat rajattomat luovat mahdollisuudet. Rakennatpa yksinkertaista otsikkokorttia tai monimutkaista dataohjattua animaatiota, näiden komponenttien ymmärtäminen on perusta.

Sisäänrakennetut kerrostyypit

Jokainen kerros Rendervid-mallissa on määritelty JSON-objektina, jossa on type-kenttä. Tyyppi määrittää saatavilla olevat ominaisuudet ja renderöintikäyttäytymisen. Alla on yksityiskohtainen viite jokaiselle 8 sisäänrakennetulle kerrostyypille.

Tekstikerros

text-kerros on ominaisuusrikkain primitiivi Rendervidissä. Se renderöi tyyliteltyä tekstiä täydellä hallinnalla typografiaan, tasaukseen, väriin, efekteihin ja animaatioon.

Typografiaominaisuudet:

Rendervid sisältää yli 100 Google-fonttia valmiiksi. Voit käyttää mitä tahansa niistä määrittelemällä fontFamily-ominaisuuden ilman, että sinun tarvitsee ladata ulkoisia tyylitiedostoja.

Tasausominaisuudet:

Tyylit ja efektit:

• color ja backgroundColor perustason väritykseen
• textShadow varjoille
• textStroke ääriviivatulle tekstille
• textDecoration alleviivaukselle, yliviivaukselle
• textTransform isoille kirjaimille, pienille kirjaimille, alkukirjain isoksi
• maxLines automaattisella ellipsi-katkaisulla
• Sisäänrakennettu kirjoituskoneefekti merkki-merkiltä-tekstin paljastukseen

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

Edistyneisiin tekstianimaatioihin, kuten kirjoituskoneefektiin, yhdistä tekstikerros avainkehysanimaatioihin tai käytä omistettua TypewriterEffect-komponenttia .

Kuvakerros

image-kerros näyttää rasteri- ja vektorikuvia joustavilla koon muutos- ja rajausasetuksilla.

Keskeiset ominaisuudet:

Tuetut formaatit: 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-ominaisuus toimii kuten CSS object-fit:

• cover – skaalaa kuvan täyttämään kerroksen, rajaa ylimääräisen
• contain – skaalaa sopimaan kokonaan kerroksen sisään, mahdollisella letterboxingilla
• fill – venyttää kuvan vastaamaan kerroksen mittoja täsmälleen
• none – renderöi kuvan sen alkuperäisessä resoluutiossa

Videokerros

video-kerros upottaa videoleikkeet komposiitioon täydellä toiston hallinnalla.

Keskeiset ominaisuudet:

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

Käytä startTime-arvoa introja ohittaaksesi tai hypätäksesi tiettyyn kohtaan lähdemateriaalissa. Yhdistä playbackRate-arvoon hidastettuja (0.5) tai aikakiihdytettyjä (2.0) efektejä varten.

Muotokerros

shape-kerros piirtää vektorimuotoja täytöillä, viivoilla, liukuväreillä ja pyöristetyillä kulmilla.

Muototyypit:

Tyyliominaisuudet:

• fill – tasainen väri tai liukuväri
• stroke – reunaväri
• strokeWidth – reunan paksuus
• borderRadius – pyöristetyt kulmat suorakulmioille
• Liukuvärit: sekä linear että radial liukuväritäytöt

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

Mukautetuille muodoille käytä path-tyyppiä standardin SVG-polkudatan kanssa:

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

Äänikerros

audio-kerros lisää ääniraitoja komposiitioon äänenvoimakkuuden hallinnalla, häivytyksellä ja täydellä efektiketjulla.

Keskeiset ominaisuudet:

Ääniefektiketju:

Rendervid sisältää sisäänrakennetun efektien prosessointiputken. Saatavilla olevat efektit:

• EQ – taajuuskorjaus sävyn muokkaukseen
• Compressor – dynaamisen alueen kompressio
• Reverb – tilallinen kaiunta
• Delay – kaiku/viive-efekti
• Gain – äänenvoimakkuuden vahvistus tai vaimennus
• High-pass filter – poista matalat taajuudet
• Low-pass filter – poista korkeat taajuudet
• Panning – stereopaikantaminen (vasen/oikea)

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

Efektit prosessoidaan järjestyksessä, mikä mahdollistaa hienostuneiden äänenkäsittelyketjujen rakentamisen. Käytä pan-arvoja -1:stä (täysin vasemmalla) 1:een (täysin oikealla) stereopaikantamista varten.

Ryhmäkerros

group-kerros on säiliö, joka sisältää lapsikerroksia. Ryhmään kohdistetut muunnokset vaikuttavat kaikkiin lapsiin, mikä tekee helpoksi siirtää, skaalata, kiertää tai animoida monimutkaisia monikerroksisia kompositioita yhtenä yksikkönä.

Keskeiset ominaisuudet:

{
  "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": "Kortin otsikko",
      "x": 24,
      "y": 24,
      "fontSize": 28,
      "fontWeight": 600,
      "color": "#F8FAFC"
    },
    {
      "type": "text",
      "text": "Tukeva kuvausteksti tulee tähän.",
      "x": 24,
      "y": 64,
      "fontSize": 16,
      "color": "#94A3B8"
    }
  ]
}

Ryhmät ovat korvaamattomia monimutkaisten mallien järjestämisessä. Käytä niitä luodaksesi uudelleenkäytettäviä korttipohjia, alaviitteitä, peittokuvia ja muita yhdistelmäelementtejä. Lapsen koordinaatit ovat suhteessa ryhmän sijaintiin.

Lottie-kerros

lottie-kerros renderöi Lottie-animaatioita, jotka on viety After Effectsistä, Figmasta tai muista animaatiotyökaluista.

Keskeiset ominaisuudet:

{
  "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-kerrokset ovat ihanteellisia hiottujen liikegrafiikoiden, kuvakkeiden, latausilmaisimien ja brändättyjen animaatioiden lisäämiseen ilman ruutu-ruudulta-koodin kirjoittamista. startFrame- ja endFrame-ominaisuudet antavat sinun leikata animaation toistaaksesi vain tietyn segmentin.

Mukautettu kerros

custom-kerros on tehokkain kerrostyyppi Rendervidissä. Sen avulla voit kirjoittaa mielivaltaisia React-komponentteja, jotka renderöivät ruutu-ruudulta, antaen sinulle täydellisen hallinnan visuaaliseen tulosteeseen.

Mukautetuille komponenteille on kolme käyttöönottotapaa:

Inline-käyttöönotto

Upota JavaScript-koodi suoraan JSON-malliisi. Paras pienille, itsenäisille komponenteille.

{
  "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-käyttöönotto

Lataa komponentti ulkoisesta URL-osoitteesta, kuten CDN:stä. Paras uudelleenkäytettäville komponenteille, joita jaetaan malleissa.

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

Viittauskäyttöönotto

Käytä esirekisteröityä komponenttia nimellä. Paras @rendervid/components-paketin tai mukautettujen rekisterien komponenteille.

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

Jokainen mukautettu komponentti saa standardin propsit:

Mukautetut komponentit tukevat myös skeemavalidointia propseille, varmistaen, että mallit välittävät oikeat datatyypit ja pakolliset kentät jokaiselle komponentille.

Valmiit React-komponentit

@rendervid/components-paketti sisältää joukon tuotantovalmiita komponentteja, joita voit käyttää heti malleissasi.

AnimatedLineChart

Renderöi animoituja viivakaavioita pehmeillä liukuväritäytöillä, konfiguroitavilla datapisteillä, akselien merkinnöillä ja animoiduilla piirtoefekteillä. Ihanteellinen dataohjattuun videosisältöön, kuten raportteihin, koontinäyttöihin ja esityksiin.

Keskeiset propsit: data, lineColor, gradientOpacity, strokeWidth, labels, animationStyle

AuroraBackground

Luo lumoavan revontuliefektin (aurora borealis) käyttäen kerrostettuja liukuvärejä ja nestemäistä liikettä. Täydellinen tunnelmallisiin taustoihin, intro-sekvensseihin ja ambient-visuaaleihin.

Keskeiset propsit: colors, speed, intensity, blur

WaveBackground

Tuottaa nestemäisiä aaltoanimaatioita konfiguroitavilla väreillä, amplitudeilla ja taajuuksilla. Käytä sitä tyylikkäisiin taustoihin, musiikkivisualisoijiin tai merenteemaiseen sisältöön.

Keskeiset propsit: waveCount, colors, amplitude, frequency, speed

SceneTransition

Tarjoaa 17 ammattimaista siirtymätyyppiä kohtausten välillä siirtymiseen. Sisältää pyyhkäisyt, häivytykset, zoomaukset, liukumiset ja paljon muuta. Jokainen siirtymä on ruututarkka ja konfiguroitava.

Keskeiset propsit: transitionType, duration, direction, easing

TypewriterEffect

Renderöi merkki-merkiltä-tekstin paljastuksen vilkkuvalla kursorilla. Tukee konfiguroitavaa kirjoitusnopeutta, kursorin tyyliä ja viivettä sanojen välillä. Loistava koodidemoihin, chat-simulaatioihin ja dramaattisiin tekstin paljastuksiin.

Keskeiset propsit: text, typingSpeed, cursorChar, cursorBlinkRate, startDelay

Mukautettujen komponenttien kehitys

Omien mukautettujen komponenttien rakentaminen on se, missä Rendervid todella loistaa. Mikä tahansa visuaalinen efekti, jonka voit luoda JavaScriptillä ja CSS:llä, voi tulla Rendervid-komponentiksi.

Komponentin rakenne

Rendervid-mukautettu komponentti on tavallinen JavaScript-funktio, joka vastaanottaa propsit ja palauttaa React-elementin. Keskeinen ero tyypillisiin React-komponentteihin on, että renderöinti on ruutuohjattua eikä tapahtumaohjattua.

function MyComponent({ frame, fps, sceneDuration, layerSize, props }) {
  // Laske animaation edistyminen (0 - 1)
  const totalFrames = fps * sceneDuration;
  const progress = frame / totalFrames;

  // Käytä edistymistä animaatioiden ohjaamiseen
  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 || "Hei, Rendervid!");
}

Saatavilla olevat propsit

Jokainen mukautettu komponentti saa nämä standardit propsit:

• frame – Nykyinen ruudun numero, alkaen 0:sta. Tämä on ensisijainen animaation ohjain.
• fps – Ruutua sekunnissa (yleisesti 30 tai 60). Käytä sitä muuntaaksesi ruudut sekunneiksi.
• sceneDuration – Nykyisen kohtauksen kesto sekunteina. Kerro fps:llä kokonaisruutumäärän saamiseksi.
• layerSize – Objekti, jossa on width ja height pikseleissä, vastaten mallissa määriteltyjä kerroksen mittoja.
• props – Objekti, joka sisältää kaikki mallin JSON:ssa määritellyt mukautetut ominaisuudet.

React.createElement()-malli

Koska Rendervid-komponentit toimivat renderöintiympäristössä, ne käyttävät React.createElement()-funktiota JSX:n sijaan. Malli on yksinkertainen:

// JSX-vastaava: <div className="container"><span>Hei</span></div>
React.createElement("div", { className: "container" },
  React.createElement("span", null, "Hei")
);

Propsien skeemavalidointi

Voit määritellä skeeman komponenttisi propseille validoidaksesi datan mallin lataushetkellä:

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

Esimerkki: Hiukkassysteemi

Hiukkassysteemikomponentti, joka simuloi yli 150 hiukkasta fysiikalla:

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

Esimerkki: Animoitu laskuri

Numerolaskenta-animaatio, joka interpoloi alku- ja loppuarvojen välillä:

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

Lisätietoja siitä, miten mukautetut komponentit sopivat laajempaan mallirakenteeseen, katso Mallisysteemidokumentaatio .

Mallineeditori

@rendervid/editor-paketti tarjoaa täysin varustetun visuaalisen mallineeditorin, joka mahdollistaa ei-kehittäjien ja kehittäjien rakentaa Rendervid-malleja ilman JSON:n kirjoittamista käsin.

Aikajanapohjainen muokkaus

Editori sisältää moniraitaisen aikajanan, jossa jokainen kerros on esitetty lohkona, jota voidaan vetää, muuttaa kokoa ja sijoittaa uudelleen. Säädä aloitusaikoja, kestoja ja kerrosten järjestystä visuaalisesti. Zoomaa sisään ruututason tarkkuutta varten tai ulos korkean tason yleiskatsausta varten.

Kerrosten hallintapaneeli

Omistettu paneeli listaa kaikki kompositiossa olevat kerrokset vedä-ja-pudota-uudelleenjärjestelyllä, näkyvyyskytkinillä, lukituskontrolleilla ja ryhmittelyllä. Lisää uusia kerroksia komponenttipaletista, joka sisältää kaikki 8 sisäänrakennettua tyyppiä ja kaikki rekisteröidyt mukautetut komponentit.

Ominaisuuspaneeli

Valitse mikä tahansa kerros nähdäksesi ja muokataksesi sen ominaisuuksia jäsennellyssä lomakkeessa. Ominaisuuspaneeli mukautuu kerrostyyppiin ja näyttää vain relevantit kentät. Värivalitsimet, liukusäätimet, pudotusvalikot ja tekstikentät tekevät helpoksi hienosäätää jokaisen yksityiskohdan. Muutokset näkyvät välittömästi esikatselussa.

Kumoa/Tee uudelleen -historia

Jokainen muutos tallennetaan historiapinoon täydellä kumoa- ja tee uudelleen -tuella. Navigoi muokkaushistoriassasi luottavaisesti tietäen, että voit aina palata edelliseen tilaan.

Reaaliaikainen esikatselu

Editori sisältää upotetun Player-komponentin , joka renderöi mallin reaaliajassa muutosten yhteydessä. Esikatsele koko kompositio milloin tahansa muokkauksen aikana ilman, että sinun tarvitsee viedä tai renderöidä.

Soitinkomponentti

@rendervid/player-paketti tarjoaa itsenäisen React-komponentin Rendervid-mallien esikatselua varten selaimessa.

React-integraatio

Asenna ja upota soitin mihin tahansa React-sovellukseen:

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

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

Pikanäppäimet

Soitin tukee sisäänrakennettuja näppäinohjauksia tehokasta esikatselua varten:

Nopeudenhallinta

Säädä toistonopeutta 0.25x:stä (neljännesnopeus) 4x:ään (nelinkertainen nopeus). Hidastustoisto on hyödyllinen animaatioiden tarkasteluun ruutu-ruudulta, kun taas pikakelaus auttaa skannaamaan pidempiä kompositioita.

Takaisinkutsut ja tapahtumat

Soitin tarjoaa takaisinkutsuja ohjelmallista hallintaa varten:

Käytä näitä takaisinkutsuja synkronoidaksesi soittimen ulkoisten käyttöliittymäelementtien, analytiikan tai interaktiivisten kokemusten kanssa.

Komponenttigalleria

Nämä esimerkkimukautetut komponentit demonstroivat sitä, mikä on mahdollista Rendervidin mukautetulla kerrostyypillä. Jokainen on rakennettu käyttäen samaa yllä kuvattua React.createElement()-mallia.

Hiukkasräjähdys

Fysiikkapohjainen hiukkassysteemi yli 150 hiukkasella, konfiguroitavalla painovoimalla, värillä ja räjähdyssäteellä. Hiukkaset syntyvät keskipisteestä ja kaareutuvat ulospäin realistisella liikkeellä.

Aaltovisualisointi

Äänireaktiiviset aaltokuviot, jotka reagoivat taajuusdataan. Useat aaltokerrokset konfiguroitavalla amplitudilla, taajuudella ja värillä luovat dynaamisen, orgaanisen visuaalin.

Neonitekstit

Hehkuva teksti animoiduilla neonvaloefekteillä, mukaan lukien välkkyminen, syke ja värien vaihtuminen. Mukautettava hehkusäde, värit ja animaationopeus.

Holografinen käyttöliittymä

Sci-fi-inspiroitu holografinen käyttöliittymä skannausviivoilla, datalukemilla, ruudukkopeittokuvilla ja animoiduilla käyttöliittymäelementeillä. Ihanteellinen teknologiateemaisiin videoihin ja futuristisiin introihin.

3D-kuution pyöritys

Laitteistokiihdytetty CSS 3D-kuutio teksturoiduilla pinnoilla ja pehmeällä pyörimisellä. Käyttää CSS perspective- ja transform3d-ominaisuuksia suorituskykyiseen 3D-renderöintiin ilman WebGL:ää.

Datan visualisoinnin koontinäyttö

Monikaavioinen koontinäyttökomponentti, jossa on animoituja pylväskaavioita, viivadiagrammeja ja tilastolaskureita. Dataohjattu ja konfiguroitava raportteihin, esityksiin ja datan tarinankerrontaan.

Lisää mukautettuja komponenttiesimerkkejä sisältää:

• Animoitu laskuri – numerolaskenta-animaatio easing-funktioilla
• Edistymisrengas – pyöreä edistymisilmaisin konfiguroitavalla kaarella ja väreillä
• Kirjoituskone – tekstin kirjoitusanimaatio kursorilla ja vaihtelevalla nopeudella

Seuraavat askeleet

• Opi Rendervid-mallisysteemistä kohtausten ja kompositioiden jäsentämiseen
• Tutustu AI-integraatioon luodaksesi malleja luonnollisella kielellä
• Katso Käyttöönottoopas lopullisten videoiden renderöintiin ja viemiseen
• Palaa Rendervid-yleiskatsaukseen korkean tason johdantoa varten