<RemotionRiveCanvas>v3.3.75

此组件可以渲染 Rive 动画，使其与 Remotion 的时间同步。

示例

tsx
import {RemotionRiveCanvas} from '@remotion/rive';
 
function App() {
  return <RemotionRiveCanvas src="https://example.com/myAnimation.riv" />;
}

tsx
import {RemotionRiveCanvas} from '@remotion/rive';
 
function App() {
  return <RemotionRiveCanvas src="https://example.com/myAnimation.riv" />;
}

属性

`src`

要加载的 rive 文件的有效 URL。可以是使用 staticFile() 加载的本地文件，也可以是远程 URL，如 "https://cdn.rive.app/animations/vehicles.riv"。

`fit?`

`alignment?`

`artboard?`

要使用的画板名称的 string，要使用的画板索引的 number，否则将使用默认画板。

`animation?`

要使用的动画名称的 string，要使用的动画索引的 number，否则将使用默认动画。

`onLoad?`v4.0.58

Rive Runtime 加载完成时将执行的回调函数。回调参数是 Rive File 类型的对象。

`enableRiveAssetCdn?`v4.0.181

是否启用 Rive 资产 CDN。默认值为 true。

`assetLoader?`v4.0.181

自定义资产加载器。有关更多信息，请参阅此处。

note

使用 useCallback 对 assetLoader 函数进行记忆化处理。

tsx
import {useCallback} from 'react';
import {RemotionRiveCanvas} from '@remotion/rive';
import {FileAsset, ImageAsset} from '@rive-app/canvas-advanced';
import {decodeImage} from '@rive-app/react-canvas';
export const MyComp: React.FC = () => {
  const assetLoader = useCallback((asset: FileAsset, bytes: Uint8Array) => {
    console.log('Asset properties to query', {
      name: asset.name,
      fileExtension: asset.fileExtension,
      cdnUuid: asset.cdnUuid,
      isFont: asset.isFont,
      isImage: asset.isImage,
      isAudio: asset.isAudio,
      bytes,
    });
    // If the asset has a `cdnUuid`, return false to let the runtime handle
    // loading it in from a CDN. Or if there are bytes found for the asset
    // (aka, it was embedded), return false as there's no work needed here
    if (asset.cdnUuid.length > 0 || bytes.length > 0) {
      return false;
    }
    if (asset.isImage) {
      fetch('https://picsum.photos/300/500').then(async (res) => {
        console.log('doing this');
        const image = await decodeImage(
          new Uint8Array(await res.arrayBuffer()),
        );
        (asset as ImageAsset).setRenderImage(image);
        // You could maintain a reference and update the image dynamically at any time.
        // But be sure to call unref to release any references when no longer needed.
        // This allows the engine to clean it up when it is not used by any more animations.
        image.unref();
      });
      return true;
    }
    return false;
  }, []);
  return (
    <RemotionRiveCanvas
      src="https://example.com/myAnimation.riv"
      assetLoader={assetLoader}
    />
  );
};

tsx
import {useCallback} from 'react';
import {RemotionRiveCanvas} from '@remotion/rive';
import {FileAsset, ImageAsset} from '@rive-app/canvas-advanced';
import {decodeImage} from '@rive-app/react-canvas';
export const MyComp: React.FC = () => {
  const assetLoader = useCallback((asset: FileAsset, bytes: Uint8Array) => {
    console.log('Asset properties to query', {
      name: asset.name,
      fileExtension: asset.fileExtension,
      cdnUuid: asset.cdnUuid,
      isFont: asset.isFont,
      isImage: asset.isImage,
      isAudio: asset.isAudio,
      bytes,
    });
    // If the asset has a `cdnUuid`, return false to let the runtime handle
    // loading it in from a CDN. Or if there are bytes found for the asset
    // (aka, it was embedded), return false as there's no work needed here
    if (asset.cdnUuid.length > 0 || bytes.length > 0) {
      return false;
    }
    if (asset.isImage) {
      fetch('https://picsum.photos/300/500').then(async (res) => {
        console.log('doing this');
        const image = await decodeImage(
          new Uint8Array(await res.arrayBuffer()),
        );
        (asset as ImageAsset).setRenderImage(image);
        // You could maintain a reference and update the image dynamically at any time.
        // But be sure to call unref to release any references when no longer needed.
        // This allows the engine to clean it up when it is not used by any more animations.
        image.unref();
      });
      return true;
    }
    return false;
  }, []);
  return (
    <RemotionRiveCanvas
      src="https://example.com/myAnimation.riv"
      assetLoader={assetLoader}
    />
  );
};

Refv4.0.180

您可以附加一个 ref 到组件以访问 Rive Canvas 实例。

MyComp.tsx
tsx
import {RemotionRiveCanvas, RiveCanvasRef} from '@remotion/rive';
import {useEffect} from 'react';
 
const MyComp: React.FC = () => {
  const canvasRef = React.useRef<RiveCanvasRef>(null);
 
  useEffect(() => {
    if (!canvasRef.current) {
      return;
    }
 
    canvasRef.current.getAnimationInstance(); // import("@rive-app/canvas-advanced").LinearAnimationInstance
    canvasRef.current.getArtboard(); // import("@rive-app/canvas-advanced").Artboard
    canvasRef.current.getRenderer(); // import("@rive-app/canvas-advanced").CanvasRenderer
    canvasRef.current.getCanvas(); // import("@rive-app/canvas-advanced").RiveCanvas
  }, [canvasRef]);
 
  return (
    <RemotionRiveCanvas
      src="https://example.com/myAnimation.riv"
      ref={canvasRef}
    />
  );
};

MyComp.tsx
tsx
import {RemotionRiveCanvas, RiveCanvasRef} from '@remotion/rive';
import {useEffect} from 'react';
 
const MyComp: React.FC = () => {
  const canvasRef = React.useRef<RiveCanvasRef>(null);
 
  useEffect(() => {
    if (!canvasRef.current) {
      return;
    }
 
    canvasRef.current.getAnimationInstance(); // import("@rive-app/canvas-advanced").LinearAnimationInstance
    canvasRef.current.getArtboard(); // import("@rive-app/canvas-advanced").Artboard
    canvasRef.current.getRenderer(); // import("@rive-app/canvas-advanced").CanvasRenderer
    canvasRef.current.getCanvas(); // import("@rive-app/canvas-advanced").RiveCanvas
  }, [canvasRef]);
 
  return (
    <RemotionRiveCanvas
      src="https://example.com/myAnimation.riv"
      ref={canvasRef}
    />
  );
};

该 ref 公开以下方法：

`getAnimationInstance()`

从 Rive Runtime 返回一个 LinearAnimationInstance。

`getArtboard()`

从 Rive 运行时返回一个Artboard。

`getRenderer()`

从 Rive 运行时返回一个CanvasRenderer。

`getCanvas()`

从 Rive 运行时返回一个RiveCanvas。

在运行时设置文本运行示例

此示例假定您的 Rive 动画有一个名为 "city" 的文本运行。有关 Rive 上的文本运行的更多信息，请参见此处。

tsx
import {RemotionRiveCanvas} from '@remotion/rive';
import {File} from '@rive-app/canvas-advanced';
import {useCallback} from 'react';
 
// Make sure to wrap your onLoad handler on `useCallback` to avoid re-rendering this component every single time
const onLoadHandler = useCallback((file: File) => {
  const artboard = file.defaultArtboard();
  const textRun = artboard.textRun('city');
  textRun.text = 'Tokyo';
}, []);
 
function App() {
  return (
    <RemotionRiveCanvas
      src="https://example.com/myAnimation.riv"
      onLoad={onLoadHandler}
    />
  );
}

tsx
import {RemotionRiveCanvas} from '@remotion/rive';
import {File} from '@rive-app/canvas-advanced';
import {useCallback} from 'react';
 
// Make sure to wrap your onLoad handler on `useCallback` to avoid re-rendering this component every single time
const onLoadHandler = useCallback((file: File) => {
  const artboard = file.defaultArtboard();
  const textRun = artboard.textRun('city');
  textRun.text = 'Tokyo';
}, []);
 
function App() {
  return (
    <RemotionRiveCanvas
      src="https://example.com/myAnimation.riv"
      onLoad={onLoadHandler}
    />
  );
}

另请参阅

@remotion/lottie

<RemotionRiveCanvas>v3.3.75

示例​

属性​

src​

fit?​

alignment?​

artboard?​

animation?​

onLoad?v4.0.58​

enableRiveAssetCdn?v4.0.181​

assetLoader?v4.0.181​

Refv4.0.180​

getAnimationInstance()​

getArtboard()​

getRenderer()​

getCanvas()​

在运行时设置文本运行示例​

另请参阅​

示例

属性