@ editframe/ 反应

对 Editframe Elements 的响应绑定 .

安装

npm install @editframe/react

反应 18 或以后 react-dom 需要这样做。 也导入约束 注册“元素”自定义元素.

组成道具

收发器接受基本元素的 JavaScript 属性, 加 标准反应道具,例如 children, (中文(简体) ), className, (中文(简体) ), style,以及 ref。 。 。 . 使用 playbackRate 用于源速度和通过 volumeAtTime 作为函数 :

import { Configuration, Text, Timegroup, TimelineRoot, Video } from "@editframe/react";

const fade = (localTime: number) =>
  Math.max(0, Math.min(1, localTime / 0.25, (4 - localTime) / 0.25));

function Cut({ id }: { id: string }) {
  return (
    <Timegroup id={id} mode="fixed" duration="4s"
      style={{ position: "relative", width: 640, height: 360 }}>
      <Video src="/take.mp4" sourcein="2s" sourceout="10s"
        playbackRate={2} volume={0.8} volumeAtTime={fade}
        style={{ width: "100%", height: "100%" }} />
      <Text duration="4s"
        style={{ position: "absolute", top: 24, left: 24, lineHeight: 1.15 }}>
        A four-second cut
      </Text>
    </Timegroup>
  );
}

export function Composition() {
  return (
    <Configuration>
      <TimelineRoot id="cut" component={Cut} />
    </Configuration>
  );
}

这消耗了8个源秒的4个组成秒,保留 音频投出。 支助 playbackRate 值为 0.25 结束 4,与 1 作为默认。 无效的财产指派 RangeError。 。 。 . volumeAtTime 获取剪辑本地构成秒并返回 a 乘数 volume 从 0 改为 1。每个音频对信封进行评估 导出时的样本 。 见 内容读取 页:1 三进制规则和一个 compare- clone 导出示例.

TimelineRoot 登记用于导出和缩略图的 React 重载,所以 反应钩和帧回调在渲染克隆中运行. 内容 component 必须使 Timegroup 作为它的根。 对于播放,请附加挂载 带有时间组 EFConfigurationElement 裁判 attachPlayback(root)· ; Configuration 单靠它不附加控制器。 A 类 Workbench 包装 可以自动附加播放.

Configuration 财务报告和审定财务报表 Text 接受普通JSX道具和打入元素参考 0.60.34中直接使用;不需要apps侧重制版. 自定义事件处理器, 例如 Video是因为 onReadyStateChange,保留其特定组成部分 事件类型。 其他元素属性按名称而不是 (b) 参考基本要件类别 支持的数值.

见 文档 编辑 构成技能 为了更多 用途.