Typical.js 使用教程

Typical.js 使用教程

typical Animated typing in ~400 bytes 🐡 of JavaScript 项目地址: https://gitcode.com/gh_mirrors/typica/typical

1. 项目介绍

Typical.js 是一个仅有约400字节大小的JavaScript库，用于在网页上创建类似打字机的动画效果。它无需任何依赖，遵循MIT协议开源，提供了高度可定制的打字动画效果，包括支持表情符号、智能删除、暂停、循环、等待Promise解决以及模拟人类打字速度等功能。

2. 项目快速启动

首先，您需要将 Typical.js 库引入到您的项目中。以下是两种常见的引入方式：

使用npm安装

在您的项目目录中打开终端，执行以下命令：

npm install @camwiegert/typical

然后，在您的JavaScript文件中，您可以这样导入 Typical.js：

import { type } from '@camwiegert/typical';

直接引入

从GitHub下载 typical.js 文件，然后在您的HTML文件中通过 <script> 标签直接引入：

<script src="path/to/typical.js"></script>

或者在HTML文件中通过CDN引入：

<script src="https://unpkg.com/@camwiegert/typical"></script>

接下来，您可以使用以下代码在页面上的元素中创建打字动画：

const element = document.getElementById('typing-target');
type(element, 'Hello, World!');

确保您有一个ID为 typing-target 的HTML元素，如下所示：

<div id="typing-target"></div>

3. 应用案例和最佳实践

以下是一些使用 Typical.js 的案例和最佳实践：

暂停动画

在打字之间添加暂停效果，可以通过传递一个数字（毫秒数）来实现：

type(element, 'Hello', 1000, 'World!');

循环动画

要循环动画，您可以在动画的某个点再次调用 type 函数：

import { type as loopType } from '@camwiegert/typical';

const steps = ['Hello', 1000, 'World', 1000, loopType];
loopType(element, ...steps);

等待Promise

如果您希望在某个异步操作完成后继续打字，可以传递一个Promise对象：

const promise = new Promise((resolve) => setTimeout(resolve, 2000));
type(element, 'Loading...', promise, 'Done!');

操作DOM

您可以在步骤中传递一个函数来操作DOM：

const toggleClass = (element) => element.classList.toggle('highlight');
type(element, toggleClass, ' Highlighted!');

确保您有对应的CSS类 .highlight 来改变元素的样式。

4. 典型生态项目

目前，Typical.js 社区已经开发了一些与 Typical.js 相关的项目，以下是一些典型的生态项目：

• react-typical：一个React组件，用于在React应用中实现打字动画。
• vue-typical：一个Vue组件，用于在Vue应用中实现打字动画。

您可以根据自己的项目需求选择合适的项目进行集成和使用。

typical Animated typing in ~400 bytes 🐡 of JavaScript 项目地址: https://gitcode.com/gh_mirrors/typica/typical