Skip to main content

<RemotionRiveCanvas>v3.3.75

此组件可以渲染一个 Rive 动画，以便与 Remotion 的时间同步。

🌐 This component can render a Rive animation so it synchronizes with Remotion's time.

示例​

🌐 Example

import React from 'react';
import {RemotionRiveCanvas} from '@remotion/rive';

function App() {
  return <RemotionRiveCanvas src="https://example.com/myAnimation.riv" />;
}

属性​

🌐 Props

src​

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

🌐 a valid URL of the rive file to load. Can be a local file loaded using staticFile() or a remote URL like "https://cdn.rive.app/animations/vehicles.riv".

fit?​

其中之一："contain" | "cover" | "fill" | "fit-height" | "none" | "scale-down" | "fit-width"。默认是 "contain"。

🌐 One of: "contain" | "cover" | "fill" | "fit-height" | "none" | "scale-down" | "fit-width". Default is "contain".

alignment?​

选项之一："center" | "bottom-center" | "bottom-left" | "bottom-right" | "center-left" | "center-right" | "top-center" | "top-left" | "top-right"。默认值是 "center"。

🌐 One of: "center" | "bottom-center" | "bottom-left" | "bottom-right" | "center-left" | "center-right" | "top-center" | "top-left" | "top-right". Default is "center".

artboard?​

要么是指定画板名称的 string，要么是指定画板索引的 number，否则使用默认画板。

🌐 Either a string specifying the artboard name, a number specifying the artboard index, otherwise the default artboard is being used.

animation?​

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

🌐 Either a string specifying the animation name, a number specifying the animation index, otherwise the default animation is being used.

onLoad?v4.0.58​

Rive 运行时加载时将执行的回调函数。参数 callback 是类型为 Rive File 的对象

🌐 A callback function that will be executed when the Rive Runtime is loaded. The argument callback is an object of type Rive File

enableRiveAssetCdn?v4.0.181​

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

🌐 Whether to enable the Rive Asset CDN. Default is true.

assetLoader?v4.0.181​

自定义资源加载器。更多信息请参见这里。

🌐 A custom asset loader. See here for more information.

note

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

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

参考文献v4.0.180​

🌐 Refv4.0.180

你可以将 ref 附加到组件以访问 Rive Canvas 实例。

🌐 You can attach a ref to the component to access the Rive Canvas instance.

MyComp.tsx
import React from 'react';
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暴露了以下方法：

🌐 The ref exposes the following methods:

getAnimationInstance()​

从 Rive 运行时返回一个 LinearAnimationInstance。

🌐 Returns a LinearAnimationInstance from the Rive Runtime.

getArtboard()​

从 Rive 运行时返回一个 Artboard。

🌐 Returns a Artboard from the Rive Runtime.

getRenderer()​

从 Rive 运行时返回一个 CanvasRenderer。

🌐 Returns a CanvasRenderer from the Rive Runtime.

getCanvas()​

从 Rive 运行时返回一个 RiveCanvas。

🌐 Returns a RiveCanvas from the Rive Runtime.

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

🌐 Set Text Run at Runtime Example

此示例假设你的 Rive 动画中有一个名为“city”的文本运行。有关 Rive 中文本运行的更多信息，请参见这里。

🌐 This example assumes that your Rive animation has a text run named "city". See here for more information about Text Runs on Rive.

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

另请参阅​

🌐 See also

Last updated on