Cardinal 点 让你相对于其角和边定位节点

import ...

export default makeScene2D(function* (view) {
  const rect = createRef<Rect>();

  view.add(
    <>
      <Rect
        ref={rect}
        width={200}
        height={100}
        rotation={-10}
        fill={'#333333'}
      />
      <Rect
        size={50}
        fill={'#e6a700'}
        rotation={rect().rotation}
        // Try changing "right" to "top"
        right={rect().left}
      />
      <Rect
        size={100}
        fill={'#e13238'}
        rotation={10}
        bottomLeft={rect().bottomRight}
      />
    </>,
  );

  yield* rect().rotation(10, 1).to(-10, 1);
});

新的

节点让你可以轻松定义两点之间的简单线。

将动画链接在一起的新方法:

yield* circle().scale(0.5, 0.2)
// 补间到另一个值
.to(2, 0.2)
// 等待一秒
.wait(1)
// 补间回初始值
.back(0.2)
// 执行回调
.do(() => circle().fill('red'))
// 运行给定的生成器
.run(circle().position.y(100, 2));

新的

和

流程函数。

对图片的外部更改现在自动反映在预览中。

新的

,

和

Vector2 方法。

曲线的新

和

属性。

新的

和

常量用于在度和弧度之间转换。

你现在可以在代码

、编辑器

和预览

模式之间切换 fiddles(你可以在上面的示例中尝试)。

解决后清除 DependencyContext promises。

修复 fiddle 可访问性。

修复 cardinal 点中的循环依赖。

正确地将 Txt 节点附加到视图。

修复拍摄快照。

修复视口 ID 中的拼写错误。

新的

节点让你可以轻松创建仅由一段组成的样条:

import ...

export default makeScene2D(function* (view) {
  const bezier = createRef<CubicBezier>();

  view.add(
    <CubicBezier
      ref={bezier}
      lineWidth={6}
      stroke={'lightseagreen'}
      p0={[-200, 0]}
      p1={[50, -200]}
      p2={[-50, 200]}
      p3={[200, 0]}
    />,
  );

  yield* bezier().start(1, 1);
  yield* bezier().start(0).end(0).end(1, 1);
});

新的

属性: #601

• play

  自动播放视频

• loop

  到达结束时重新启动视频

Fiddles 现在支持多个示例。你可以使用右侧的下拉菜单在它们之间切换。

UPDATE AVAILABLE 现在链接到 GitHub 发布页面。

视频在演示模式下流畅播放。

重用的异步资源现在正确等待。

样条的箭头方向正确计算。

展示编辑器已修复。

新的

节点让你可以绘制由贝塞尔曲线组成的线:

<Spline lineWidth={6} stroke={'lightseagreen'}>
<Knot position={[-100, 30]} />
<Knot position={[0, -50]} startHandle={[-70, 0]} />
<Knot position={[100, 30]} />
</Spline>

已扩展新方法:

,

,

项目选择视图中显示的名称现在从元文件中检索。

引入插件的初始 API。

编辑器中的字段现在根据元文件的结构自动生成。

支持一页上的多个 fiddles。

修复 CodeBlock 类型。

克隆节点时复制大小。

缩放以适应对较小的画布正常工作。

新的 Fiddle 编辑器 让你可以直接在浏览器中试用 Motion Canvas。

关于当前缩放级别的信息现在显示在视口的左上角。你可以选择预定义的缩放级别之一或切换"缩放以适应"。

按场景分组 渲染选项让你可以将场景渲染到单独的图像序列中。

按钮标题现在包括其对应的快捷方式。

Vite 已更新到 v4。

Tree shaking 现在正常工作。

添加到元文件的自定义字段现在会被保留。

复选框使用自定义样式。

缓存画布的大小限制为项目的大小。

现在在 Firefox 中工作。

Motion Canvas 服务的端口现在可以更改。

编辑器正确检测新版本。

输入文本时现在忽略键盘快捷键。

运行时错误不再破坏编辑器的状态。

新的状态栏列出了当前悬停面板中可用的快捷方式。

当前版本现在显示在状态栏上。点击它将复制当前使用的所有包的版本。

缓存现在使用世界空间坐标存储。放大

d 节点不再导致质量损失。

的所有方法现在接受

作为参数,使你可以编写这样的代码:

vector.add([100, 200]).mul(2);

新的

节点让你可以快速创建正多边形:

<Polygon
sides={6}
size={300}
fill={'lightseagreen'}
/>

上面的代码将生成一个六边形。

修复线弧长。

修复无效的源代码链接。

新的 演示模式 让你可以实时展示动画。

新的

属性。

BBox 类型的新

方法。

修复播放状态。

修复线的缓存 bbox。

修复相对时间。

支持多个异步播放器。

修复 letterSpacing。

新的播放架构:

• 项目设置现在存储在元文件中。
• 预览和渲染设置分开配置。
• 动画范围使用秒而不是帧存储。

• 你可以按住 SHIFT 并左右拖动波形来调整音频偏移

• 渲染不再锁定到帧率,使过程更快一些。

此更改也为许多新功能打开了大门,包括

,

和

。

渲染设置包括四分之一分辨率 (x0.25)。

新的

属性用于 RTL/LTR 文本。

修复 Vector2.exactlyEquals。

仅在范围内渲染。

修复 endOffset 的初始值。

正确重置缩放。

修复音轨的性能问题。

清除半透明背景。

你现在可以

并在稍后恢复它。

新的

和

Flexbox 属性。

新的

属性允许你更改子节点的渲染顺序,而无需重新排列层次结构。

新的

节点:

<Icon icon={"mdi:typewriter"} size={200} color="white" />

查看 Icônes 获取所有可能的图标列表。

图片现在可以从互联网加载。对于具有不兼容 CORS headers 的图片,可以启用新的 CORS 代理 。

发布博客的新外观。

处理线中的除零错误

新的

插值方法。

属性让你可以使用 Circle 创建楔形。

新的

。

函数现在接受一个额外的 step 参数。

View2D 现在扩展 Rect,允许你使用 fill 属性更改场景的背景颜色。

支持 Color 到 null 的补间。

堵塞内存泄漏。

修复信号初始化。

处理 acos 中的浮点错误。