mo · js –

网页动画图形工具集。

简介

mo · js 是一个 JavaScript 动画图形库，具有快速、视网膜适配、模块化和开源的特点。与其他库相比，它有不同的语法和代码动画结构方法。声明式 API 为您提供对动画的完全控制，使其易于定制。

该库提供内置组件，如 html、形状、旋涡、爆炸和交错，让您从零开始创建动画，同时还提供工具帮助您以最自然的方式制作动画。在您的网站上使用 mojs 将增强用户体验，丰富视觉内容，并精确创建令人愉悦的动画。

安装

与打包工具一起使用

Mojs 发布在 NPM 注册表上，因此您可以通过命令行解释器使用您喜欢的包管理器进行安装。如果您熟悉 JavaScript 打包工具（如 webpack 或 rollup），这是安装库的最佳方式。

# npm
npm install @mojs/core

# yarn
yarn add @mojs/core

然后在您的构建中像导入任何其他模块一样导入它：

import mojs from '@mojs/core';

new mojs.Html({
  // ...
});

使用打包工具有许多优势，如输出压缩、代码分割、树摇优化等，因此我们鼓励您将这类工具与 mojs 一起使用。

使用 CDN

要在网页中快速包含压缩的生产文件，请使用通用脚本标记从您喜欢的 CDN 加载最新版本：

<!-- unpkg -->
<script src="https://unpkg.com/@mojs/core"></script>

<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/@mojs/core"></script>

然后使用以下方式实例化：

<script>
  new mojs.Html({
    // ...
  });
</script>

默认情况下，如果未指定版本，CDN 将自动定位 mojs 的**@latest** 版本，并从 dist/mo.umd.js 加载 UMD 构建。

用户指南

开始使用 mojs 所需的基础文档。

• 入门指南
• @mojs/player
• @mojs/curve-editor
• @mojs/timeline-editor

学习

发现 mojs 可以做的神奇事情！

• 形状和旋涡（教程）
• 爆炸（教程）
• 由 mo.js 驱动的图标动画（Codrops 教程）
• mo.js 简介（CSS tricks 教程）
• 使用 @mojs/player 和 @mojs/curve-editor（Vimeo 视频）
• Web 动画和 mo.js（YouTube 视频）

开发者

获取技术信息、提交问题/拉取请求或加入（令人惊叹的）社区！

• API 文档
• GitHub
• Slack 工作区（还不在工作区？使用邀请链接 🔓）

展示

• Web 动画图形
• 泡泡布局
• 睡眼惺忪的鼹鼠
• Animocons
• 喜欢或讨厌模态框
• Mograph
• 单词揭示
• 跳跃和压扁
• 物理球
• 灰尘轨迹
• 泡泡模态框
• 泡泡
• 爆炸（点击查看）
• 简单爆炸（点击查看）
• 灰尘爆炸（点击查看）
• Twitter 收藏（点击查看）
• Twitter 收藏（星星）（点击查看）
• Twitter 收藏烟花（点击查看）
• 简单涟漪（点击查看）

浏览器支持

• Chrome 49+
• Firefox 70+
• Opera 36+
• Safari 8+
• Edge 79+

许多其他浏览器可能也能正常工作，但未经过广泛测试。

维护者

自 2019 年以来，mojs 生态系统由以下人员维护和开发：

• Xavier Foucrier
• Jonas Sandstedt

贡献

如果您想报告错误或请求新功能/改进，请在此之前阅读项目贡献者指南。感谢您抽出时间做出贡献。