简介
granim是一个轻量级的JavaScript库，用于创建流体渐变动画。它可以实现许多吸引人的动态背景效果，适用于网站、应用程序等前端项目。该库通过在Canvas上绘制渐变来实现背景动画。
安装
使用npm安装：
npm install granim --save
或使用yarn：
yarn add granim
引入
import Granim from 'granim';
使用方法
创建一个渐变对象
首先需要创建一个Granim对象，以便进行配置和控制动画。以下是创建一个简单渐变对象的方法：
-- -------------------- ---- -------
----- -------------- - --- --------
-------- -----------------
---------- -------------
---------------------- -----
------ - -
---------------- -
---------- -
----------- -----------
----------- ----------
-
-
-
---element：指定要渲染渐变背景的Canvas元素的选择器或HTML元素。direction：指定动画运动方向，可选值为'diagonal', 'top-bottom', 'bottom-top', 'left-right', 或'right-left'。isPausedWhenNotInView：指定当Canvas不在视图中时是否暂停动画。states：定义不同状态的渐变效果，这是一个包含多个状态对象的数组。默认状态为"default-state"。
渐变效果配置
在上面的代码中，我们定义了一个渐变效果，在states属性中，设置了两个渐变。每个渐变使用一个包含两个颜色值的数组定义。更复杂的配置可以使用以下选项：
-- -------------------- ---- -------
----- -------------- - --- --------
-------- -----------------
---------- -----------
-------- --- ---
------ - -
---------------- -
---------- -
----------- -----------
----------- ----------
--
---------------- -----
----- ----
--
------------- -
---------- -
----------- -----------
----------- ----------
--
---------------- -----
----- -----
-
-
---opacity：设置背景透明度，可以是单个数字或一个数组，其中第一个数字表示初始不透明度，第二个数字表示最终不透明度。transitionSpeed：指定过渡速度（毫秒数）。loop：指定是否循环动画。
控制动画
可以通过调用Granim对象的方法来控制动画。下面是一些示例：
// 暂停动画
granimInstance.pause();
// 继续动画
granimInstance.play();
// 切换到另一个状态
granimInstance.changeState('dark-state');完整示例
下面是一个完整的HTML文件，包括一个渐变Canvas和一些控制按钮，您可以在此基础上进行修改和扩展：
-- -------------------- ---- -------
--------- -----
------
------
------------- ------------
------- ----------------------------------------------------------------------
-------
------
------- ----------------------------
------- --------------------------------
------- ------------------------------
------- ------------------------------ --------------
--------
----- -------------- - --- --------
-------- -----------------
---------- -----------
-------- --- ---
------ - -
---------------- -
---------- -
----------- -----------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------