项目信息

相关源文件

• CNAME
• README.md
• assets/images/animejs-v4-logo-animation-dark.gif
• assets/images/animejs-v4-logo-animation.gif
• assets/images/usage-example-result.gif
• assets/sponsors/huly-logomark-dark.svg
• assets/sponsors/huly-logomark.svg
• assets/sponsors/ice-open-network-logomark-dark.svg
• assets/sponsors/ice-open-network-logomark.svg
• assets/sponsors/placeholder-dark.svg
• assets/sponsors/placeholder.svg

本页面提供关于 anime.js 项目、其历史、社区支持和高级结构的全面信息。有关具体的 API 详情，请参阅API 参考；有关贡献指南，请参阅贡献给 anime.js。

项目概述

Anime.js 是 Julian Garnier 开发的一个轻量级、多用途的 JavaScript 动画库。它提供了一个简单而强大的 API，用于创建针对各种目标的动画。

• CSS 属性
• SVG 元素和路径
• DOM 属性
• JavaScript 对象

该库在 JavaScript 生态系统中获得了显著的普及，npm 和 jsDelivr 的 README 徽章中显示的高下载量证明了这一点。

来源: README.md:11-14, README.md:17-20

项目架构

anime.js 库由几个关键组件组成，这些组件以分层结构组织

公共 API 暴露了两个主要函数

• animate()：创建动画的主要函数
• stagger()：一个辅助函数，用于创建具有受控时间偏移的序列动画

来源: README.md:31-46

核心类层次结构

Anime.js 实现了清晰的面向对象架构，具有明确的继承结构

Clock 类提供了基础计时功能，Engine（用于动画循环管理）和 Timer 类都扩展了它。JSAnimation 类处理单个动画，而 Timeline 类管理动画序列。

动画管线

当使用 animate() 函数创建动画时，它会经历以下过程

这个流程高效地处理动画请求，更新值，并管理从创建到完成的动画生命周期。

分发格式

Anime.js 以多种格式分发，以支持不同的 JavaScript 环境

这种多格式方法确保了在现代 JavaScript 生态系统中的广泛兼容性。

来源: README.md:25-46

开发与贡献

项目提供了一些用于开发任务的 NPM 脚本

脚本	目的
dev	监视 src/ 中的更改并将 ESM 版本编译到 lib/anime.esm.js
dev-types	在监视源代码更改时生成 TypeScript 类型
build	生成类型定义并编译所有分发格式
test-browser	运行浏览器测试
test-node	运行 Node.js 测试
open-examples	启动本地服务器以浏览示例

来源: README.md:63-76

使用示例

anime.js 的当前 V4 版本使用 ES 模块

来源: README.md:31-46

社区与赞助

Anime.js 是完全开源且免费使用的。正如 README 中所述：“Anime.js 100% 免费，其存在仅得益于赞助商的帮助。”

当前白金赞助商包括

• Huly
• Ice Open Network

该项目可以通过 GitHub Sponsors 获得支持。

来源: README.md:77-122, assets/sponsors/huly-logomark.svg, assets/sponsors/ice-open-network-logomark.svg

文档与资源

• 完整文档可在 animejs.com/documentation 获取
• 从 v3 到 v4 的迁移指南可在 GitHub Wiki 中找到
• 项目网站托管在 animejs.com

来源: README.md:55-61, CNAME:1

版本信息

当前的主要版本是 V4，它代表了相对于先前 V3 版本的一次重大更新。提供了一份迁移指南来帮助用户更新他们的实现。

来源: README.md:55-61

许可和版权

Anime.js 在 MIT 许可下发布。版权所有 © Julian Garnier

来源: README.md:124