dot-anime-react Playground - 交互式点阵动画预览工具

dot-anime-react 是一个轻量级的 React 点阵动画组件库，提供交互式 Playground 让用户可以实时预览和调整动画效果。本文详细介绍 Playground 的功能和使用方法。

Playground 概述

dot-anime-react Playground 是一个在线交互式工具，开发者可以在浏览器中实时调整组件参数，预览动画效果，并生成可直接使用的代码。无需安装任何依赖，即可体验所有组件功能。

访问地址：https://dotanime.dev/playground

支持的组件

Playground 目前支持以下三个核心组件的交互式预览：

1. DotMatrix - 点阵动画组件

DotMatrix 是核心组件，用于创建基于像素点的矩阵动画效果。

可调参数：

• Grid Size: 网格行列数（cols/rows）
• Dot Appearance: 点的大小（dotSize）和间距（gap）
• Shape: 点的形状（rounded/square/circle）
• Animation Interval: 动画间隔时间（毫秒）
• Sequence: 预设动画序列（Pulse/Loading/Spiral/Wave/Heartbeat）
• Color: 颜色主题（emerald/blue/purple/pink/amber/rose/cyan）
• Glow Effect: 发光效果开关

代码示例：

import { DotMatrix } from "dot-anime-react";

const sequence = [
  [24],
  [17, 23, 25, 31],
  [10, 16, 18, 24, 30, 32, 38],
];

<DotMatrix
  sequence={sequence}
  cols={7}
  rows={7}
  dotSize={10}
  gap={5}
  interval={120}
  color="#34d399"
/>

2. ScrambleText - 文字扰乱动画

ScrambleText 创建文字扰乱/解码动画效果，当文本内容变化时触发。

可调参数：

• Text: 显示的文本内容
• Duration: 动画持续时间（毫秒）
• Interval: 字符更新间隔
• Chars: 扰乱使用的字符集
• Animate: 是否启用动画

代码示例：

import { ScrambleText } from "dot-anime-react";

<ScrambleText
  text="Hello World"
  duration={400}
  interval={30}
/>

3. DotFlow - 复合流动动画

DotFlow 是组合组件，将 DotMatrix 和 ScrambleText 结合，支持自动轮播多个项目。

可调参数：

• Items: 项目数组（包含标题和动画帧）
• Auto Play: 自动轮播间隔（毫秒）
• Direction: 布局方向（horizontal/vertical）
• Spacing: 矩阵与文本间距
• Matrix Config: DotMatrix 配置
• Scramble Config: ScrambleText 配置
• Text Style: 文本大小、颜色、字重

代码示例：

import { DotFlow } from "dot-anime-react";

const items = [
  { title: "Loading", frames: [[24], [17, 23, 25, 31], [24]] },
  { title: "Processing", frames: [[21, 22, 23], [22, 23, 24], [23, 24, 25]] },
  { title: "Complete", frames: [[16, 18, 30, 32], [24]] },
];

<DotFlow items={items} autoPlay={2000} direction="horizontal" />

网格索引系统

DotMatrix 使用基于索引的系统来定义动画帧。对于 7×7 网格：

 0  1  2  3  4  5  6
 7  8  9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 [24] 25 26 27  ← 中心点
28 29 30 31 32 33 34
35 36 37 38 39 40 41
42 43 44 45 46 47 48

计算公式：index = row × cols + col

预设动画序列

Playground 提供多种预设动画序列：

代码生成

Playground 会根据当前参数配置自动生成可直接使用的 React 组件代码。点击 "[copy]" 按钮即可复制代码到剪贴板，直接粘贴到项目中使用。

项目特点

• 零依赖: 纯 React 实现，无外部依赖
• TypeScript: 完整的类型定义支持
• 轻量级: 仅 3KB gzipped
• MIT 许可证: 开源免费使用

相关链接

• 官方文档: https://dotanime.dev/docs
• 在线 Playground: https://dotanime.dev/playground
• GitHub 仓库: https://github.com/IveTian/dot-anime-react
• NPM 包: https://www.npmjs.com/package/dot-anime-react