(原始内容存档于2013-10-12). Rive-Solid-Canvas

这是Rive Canvas为SolidJS制作的"跑步时间"的非正式包装. 在战术上,它的设计类似于官方的Rive Runtime for React;这被说成不是一比一. 见 比较 详细情况.

1. 开始
2. 高级使用
3. 文档
4. 比较

开始

1. 安装依赖性 .

npm install @aerofoil/rive-solid-canvas

2. 给一个Rive组件.

Rive-Solid-Canvas提供了与官方Rive React库一样的基本组件. 和官方的图书馆一样,这个是设计为简单动画的简单用例.

import Rive from "@aerofoil/rive-solid-canvas";

export default function Simple() {
    return <Rive src="https://cdn.rive.app/animations/vehicles.riv" />;
}

高级使用

应使用更先进的病例 createRive 以创建自定义组件。 这使得可以对动画,画布,以及基础活性物体进行更多的控制.

import { createRive } from "@aerofoil/rive-solid-canvas";

export default function Advanced() {
    const { rive, RiveComponent } = createRive(() => ({
        src: "https://cdn.rive.app/animations/vehicles.riv",
        autoplay: false,
    }));

    return (
        <div
            onMouseEnter={() => rive() && rive().play()}
            onMouseLeave={() => rive() && rive().pause()}
        >
            <RiveComponent width="1000" height="500" />
        </div>
    );
}

就像Rive React官方图书馆一样 createRive 函数会运行,一旦将 dom 作为基础 <canvas> 元素需要在 DOM 中存在.

文档

<Rive /> 组件( 默认导出)

在画布上制作简单的 Rive 动画的简单组件. 实际上,这只是一个包裹 createRive。 。 。 .

道具

• src: string - 要装入的 rive 文件的 src
• artboard?: string - 要使用的艺术板名称
• animations?: string | string[] - 要播放的动画名称或列表
• statateMachines?: string | string[] - 要播放的国有机器名称或列表
• layout?: Layout - 定义动画在画布上的位置的布局对象。 见 正式文件 需要更多信息.
• useOffscreenRenderer?: boolean - 是否使用屏幕外的渲染器。 见 正式文件 需要更多信息.
• 画布道具 - 任何其他道具都会被传递到下面 <canvas> 元素

此组件的打字符道具类型可以使用

import type { RiveProps } from "@aerofoil/rive-solid-canvas";

createRive()

此函数需要单个参数, 一个 solidjs 访问器返回全部 RiveParameters 来源于官方网络 rive 库,但 canvas 由内部创建和管理.

为了方便,类型 CreateRiveParameters 并可以使用

import type { CreateRiveParameters } from "@aerofoil/rive-solid-canvas";

返回值是一个具有以下属性的对象 canvas - 内部帆布元素的调试器 rive - 猎物的进入器 RiveComponent - 制作和管理画布元素的组件。 可以使用与默认相同的道具 <canvas> 元素,但参考文献除外.

createRiveInput()

基于 Rive 访问器生成的 rive 输入,此函数用于快速获取 rive 输入 createRive。 。 。 .

参数

• rive: rive accessor - 由下列因素生成的 rive 存取器: createRive
• stateMachineName: string - 用于获取输入的状态机器名称
• inputName: string - 要获取的输入名称

返回访问器 StateMachineInput 对象。 此访问器可用于设定输入值.

createRiveInputMap()

此函数用于快速获取给定状态机器的所有活性输入的映射.

参数

• rive: rive accessor - 由下列因素生成的 rive 存取器: createRive
• stateMachineName: string - 用于获取输入的状态机器名称

返回地图访问器,其中键为输入名称,值为输入访问器.

比较

可能的路线图

这是一个满足我们需要的快速项目。 没有什么错的 或很多维持。 这应更多地作为待办事宜清单;没有规定何时着手处理这些待办事项的时间表

• 添加类型安全。 目前,这取决于Rive的种类安全,最好是能够定义现有的动画、国家机器、国家机器输入等。 防止无效名称传入输入生成器 .

贷项

• 固态JS
• 纵横
  • Rive 文档

许可证

麻省理工学院