Blotter.js 是一款用于创建高质量、炫酷的字体动画效果的 JavaScript 库。Blotter.js 提供了多种渲染效果和样式，可以轻松实现惊人的视觉效果，轻松实现各种创新性的设计。
Blotter.js 的基本使用方法
安装 Blotter.js
使用 npm 安装 Blotter.js：
--- ------- ------- ------
或者，可以在 HTML 中直接引用 Blotter.js 的 CDN 地址：
------- -------------------------------------------------------------------
创建 Blotter 对象
创建一个 Blotter 对象，这个对象将用于创建文字效果：
--- ---- - --- ------------------- -------- - ------- --------- ----- ---- ----- --------- --- --- -------- - --- ------------------------------- --- ------- - --- ----------------- - ------ ---- ---
在这个例子中，我们创建了一个包含 "Hello World!" 文字的 Blotter 对象，设置了字体族、大小和颜色。然后，我们创建了一个使用 ChannelSplitMaterial 材质的 Blotter 对象。
将 Blotter 对象绑定到 DOM 元素
将 Blotter 对象绑定到 DOM 元素，在该元素中显示我们刚刚创建的文字：
--- ---- - ----------------------------------- -----------------------
在这个例子中，我们将 Blotter 对象绑定到一个 ID 为 "my-text" 的 DOM 元素上。
创建动画效果
现在，我们可以使用 Blotter.js 提供的多种渲染效果和样式来创建炫酷的动画效果了。例如，我们可以使用 LiquidDistortMaterial 材质来创建一个液态扭曲效果：
--- -------- - --- -------------------------------- ------------------------------ - ---- ----------------------------------- - ----- --- ------- - --- ----------------- - ------ ---- ---
在这个例子中，我们创建了一个使用 LiquidDistortMaterial 材质的 Blotter 对象，并设置了一些材质的参数。然后，我们将该 Blotter 对象绑定到 DOM 元素上，最终实现了一个液态扭曲效果的文字动画效果。
Blotter.js 的进阶使用方法
自定义 Shader 材质
除了使用 Blotter.js 提供的材质外，我们还可以自定义 Shader 材质，实现更加复杂和独特的效果。
--- -------- - --- ------------------
------- ---- ----
------- --------- ---------
---- ------ -
---- ----- - ------------------- -----
------------ - --------------- --- - ---------
-
---
--- ------- - --- ----------------- - ------ ---- ---在这个例子中，我们定义了一个自定义的 Shader 材质，将文字颜色反转。
使用 GUI 工具创建动画效果
Blotter.js 还提供了一个内置的 GUI 工具，可以方便地创建动画效果，并实时预览效果。
--- --- - --- ---------- --- -------- - --- ------------------------ --- ---- - --- ------------------- -------- - ------- --------- ----- ---- ----- --------- --- --- ------- - --- ----------------- - ------ ---- --- --- ---- - ----------------------------------- ----------------------- ------------------------------------------ -------- ----- ---------- ---------------------------------------------------------- ---------- -------------------------------------------------------------------------------------