Blotter.js 是一款用于创建高质量、炫酷的字体动画效果的 JavaScript 库。Blotter.js 提供了多种渲染效果和样式，可以轻松实现惊人的视觉效果，轻松实现各种创新性的设计。
Blotter.js 的基本使用方法
安装 Blotter.js
使用 npm 安装 Blotter.js：
npm install blotter --save
或者，可以在 HTML 中直接引用 Blotter.js 的 CDN 地址：
<script src="https://unpkg.com/blotter@0.3.1/dist/blotter.min.js"></script>
创建 Blotter 对象
创建一个 Blotter 对象，这个对象将用于创建文字效果：
var text = new Blotter.Text("Hello World!", {
family: "Roboto",
size: 120,
fill: "#ffffff"
});
var material = new Blotter.ChannelSplitMaterial();
var blotter = new Blotter(material, { texts: text });在这个例子中，我们创建了一个包含 "Hello World!" 文字的 Blotter 对象，设置了字体族、大小和颜色。然后，我们创建了一个使用 ChannelSplitMaterial 材质的 Blotter 对象。
将 Blotter 对象绑定到 DOM 元素
将 Blotter 对象绑定到 DOM 元素，在该元素中显示我们刚刚创建的文字：
var elem = document.getElementById("my-text");
blotter.appendTo(elem);在这个例子中，我们将 Blotter 对象绑定到一个 ID 为 "my-text" 的 DOM 元素上。
创建动画效果
现在，我们可以使用 Blotter.js 提供的多种渲染效果和样式来创建炫酷的动画效果了。例如，我们可以使用 LiquidDistortMaterial 材质来创建一个液态扭曲效果：
var material = new Blotter.LiquidDistortMaterial();
material.uniforms.uSpeed.value = 0.2;
material.uniforms.uVolatility.value = 0.10;
var blotter = new Blotter(material, { texts: text });在这个例子中，我们创建了一个使用 LiquidDistortMaterial 材质的 Blotter 对象，并设置了一些材质的参数。然后，我们将该 Blotter 对象绑定到 DOM 元素上，最终实现了一个液态扭曲效果的文字动画效果。
Blotter.js 的进阶使用方法
自定义 Shader 材质
除了使用 Blotter.js 提供的材质外，我们还可以自定义 Shader 材质，实现更加复杂和独特的效果。
-- -------------------- ---- -------
--- -------- - --- ------------------
------- ---- ----
------- --------- ---------
---- ------ -
---- ----- - ------------------- -----
------------ - --------------- --- - ---------
-
---
--- ------- - --- ----------------- - ------ ---- ---在这个例子中，我们定义了一个自定义的 Shader 材质，将文字颜色反转。
使用 GUI 工具创建动画效果
Blotter.js 还提供了一个内置的 GUI 工具，可以方便地创建动画效果，并实时预览效果。
-- -------------------- ---- ------- --- --- - --- ---------- --- -------- - --- ------------------------ --- ---- - --- ------------------- -------- - ------- --------- ----- ---- ----- --------- --- --- ------- - --- ----------------- - ------ ---- --- --- ---- - ----------------------------------- ----------------------- ------------------------------------------ -------- ----- ---------- - ---------------------------------------------------------- -------- --------------------------------------------------------------------------------