@ botharness/ botui- core (英语)

BotUI 组件背后的框架不可知引擎——没有DOM库,没有框架,一个依赖性:没有.

这层决定 哪个单元格存在, (中文(简体) ), 光线在哪个方向移动, (中文(简体) ), 每个细胞在循环中有多亮,以及 如何绘制一个点。这些是独立的问题,所以它们是独立的表格,可以不相碰地延伸.

安装

你可能不需要这个包裹 建议的路径是将源代码复制到您的 repo 中:

npx @botharness/botui add dot-matrix

从 npm 安装它, 当您想要将引擎作为依赖性, 或者当您正在在上面建工具时 :

npm install @botharness/botui-core

使用

import { createDotMatrix } from "@botharness/botui-core";
import "@botharness/botui-core/style.css"; // required for renderer: "css"

const field = createDotMatrix(document.querySelector("#loading")!, {
  size: 32,
  cols: 5,
  rows: 5,
  silhouette: "circle",
  dot: "circle",
  preset: "spiral",
});

field.start();
// …later
field.destroy();

两个出品人

两者都是一样的驱动力 field(options, t),选项的纯函数和一个相. 这就是CSS路径值得信赖的整个原因:它不是第二次执行,因此它不能从SVG路径中漂移出.

cssRenderable(options) 在前面告诉你一个运动是否可以被表达成键框. 有些人不能.. columns 每个列的条目交错, 每个点 animation-delay 不建模——函数返回 false 而不是默默地做出别的事情.

这五层

你自己的转弯

这个 倾斜 层是网纹位置返回的平面函数 0…1这样 任何你能计算每个细胞的动能 通过它作为 order 它取代了 预设 :

// a chevron that speeds up toward its tip: the traversal value is eased, so successive
// dots along each arm start closer together in phase than a linear ramp would
const chevron = (col: number, row: number, cols: number, rows: number) => {
  const mid = (rows - 1) / 2;
  const arm = Math.abs(row - mid) / (mid || 1); // 0 at the spine, 1 at the tips
  const along = col / (cols - 1 || 1);
  const v = arm * 0.6 + along * 0.4; // down one arm, then along the other
  return v * v; // ease-in: faster toward the tip
};

createDotMatrix(el, { cols: 9, rows: 9, preset: "morph", order: chevron });

有两件事值得了解:

• 它在两个渲染器中都有作用. CSS主机生成每个单元格的 animation-delay 从 同样的价值,所以一个定制的倒转成本 零每个框架的JS,那里也.
• 这是一个函数,所以不能复制. 带有自定义曲面的组件是 动作是代码的组件——保持源代码。 游戏场的复制按钮 省略它,而不是假装一个函数是一个值.

direction 以一个 第五届 因此,一个没有方向感的转弯 保持四分法 忽略它 一个能读 dir?.includes("rightToLeft") 没有重新发现任何东西.

完整的选项列表以及大小代数背后的推理在 src/types.ts。 。 。 .

文档

{\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}哦.. –每个控制器的现场游乐场,在 联合国 财务报告和审定财务报表 页:1。 。 。 .

许可证

麻省理工学院 瓶调