简介
gravity-aurora 是一个前端动画库，它允许用户创建出各种漂亮的交互式动画效果。它可以很好的被用于构建一些独立的 UI 动画，也可以被用在游戏设计等领域上。
安装
该库采用 npm 包的方式发布，所以 npm 安装和引入 gravity-aurora 就变得特别的容易。
npm install gravity-aurora
使用
引入
有两种方式可以引入 gravity-aurora 库：标准的 script 或者 import 包的方法。
- 标准
script方式
-- -------------------- ---- -------
--------- -----
------
------
------- --------------------------------------------------------------------------------------
-------
------
--------
-- --- ---- ------ ------ ------
----- ------ - ---------------------------------
----- ------ - --- -------------------------
---------
-------
-------import包的方式，一般来说，如果您需要部分引用gravity-aurora库，或者项目本身是由构建工具打包，那么推荐您采用该方式：
import Aurora from 'gravity-aurora';
const canvas = document.createElement('canvas');
const aurora = new Aurora.Animation(canvas);创建动画
创建一个简单的兔子在墙上跑的动画
-- -------------------- ---- -------
--------- -----
------
------
------- --------------
------ ------ ---- -------------------------------------------------------------------------
----- ------ - --------------------------------
----- ------ - --- -------------------------
----- --------- - --- --------
------------- - ---------------------
---------------- - ---------- -
----- ------ - ---------------
---- ----------
-- --
-- --
-- ---
-- ---
----------- -
---- --- -- -- ---
--
---
--------------------------- --- ------
----------------------------- -- -
-------- -- -- - ----------
-- --------- - ------------- -
-------- - ----------
-
---
--
---------
-------
------
------- -------------------
-------
-------接口
Animation(canvas, options)
构造函数。canvas 为渲染的画布对象，options 包含着一些基础的配置信息。
const aurora = new Aurora.Animation(canvas, {
width: 960, // canvas 的宽度，默认值 480
height: 540, // canvas 的高度，默认值 270
backgroundColor: '#000', // 画布背景色，默认值 '#fff'
debug: false, // 是否开启调试模式，默认值 false
});sprite(options)
创建精灵对象。
-- -------------------- ---- -------
----- ------ - ---------------
---- ---------- -- ---------- ----- -- ------- ----
-- -- -- --- - ------ -
-- -- -- --- - ------ -
-- --- -- -------- --
-- --- -- -------- --
----------- - -- ----
---- --- -- -- ---
----- --- -- -- ---
-- -- ----------------
----------------- ------ -- ------------- ------
--------------- -- -- ------------ -- ----------
----- ----- -- -------------- ----
---texture(img)
创建纹理对象。img 为预加载好的图片对象。
const rabbitTexture = aurora.texture(rabbitImg);
ticker.add(func)
渲染循环事件注册方法。func 为渲染循环周期执行的函数回调
aurora.ticker.add((deltaTime) => {
// 画布渲染周期
});总结
gravity-aurora 是一个简单而强大的动画库。随着它的日益完善，它具有的功能和性能也在逐渐增强，越来越适合开发使用。这篇文章由浅入深地详细介绍了这个库的安装、基本使用、接口以及方法等方面，相信大家已经有了足够的知识储备来开始使用这个库进行自己的项目开发了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5651ab1864dac66bba