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 可以做的神奇事情!
- 形状和旋涡(教程)
- 爆炸(教程)
- 由 mo.js 驱动的图标动画(Codrops 教程)
- mo.js 简介(CSS tricks 教程)
- 使用 @mojs/player 和 @mojs/curve-editor(Vimeo 视频)
- Web 动画和 mo.js(YouTube 视频)
开发者
获取技术信息、提交问题/拉取请求或加入(令人惊叹的)社区!
展示
- Web 动画图形
- 泡泡布局
- 睡眼惺忪的鼹鼠
- Animocons
- 喜欢或讨厌模态框
- Mograph
- 单词揭示
- 跳跃和压扁
- 物理球
- 灰尘轨迹
- 泡泡模态框
- 泡泡
- 爆炸(点击查看)
- 简单爆炸(点击查看)
- 灰尘爆炸(点击查看)
- Twitter 收藏(点击查看)
- Twitter 收藏(星星)(点击查看)
- Twitter 收藏烟花(点击查看)
- 简单涟漪(点击查看)
浏览器支持
- Chrome 49+
- Firefox 70+
- Opera 36+
- Safari 8+
- Edge 79+
许多其他浏览器可能也能正常工作,但未经过广泛测试。
维护者
自 2019 年以来,mojs 生态系统由以下人员维护和开发:
贡献
如果您想报告错误或请求新功能/改进,请在此之前阅读项目贡献者指南。感谢您抽出时间做出贡献。