这是一款基于canvas的背景颜色渐变动画插件。该插件通过配置几组不同的颜色方案，使指定元素在这些颜色中执行平滑的渐变色过渡效果。
使用方法
在页面中引入granim.min.js文件。
<script src="granim.min.js"></script>
HTML结构
在使用背景颜色渐变的地方放置一个HTML5 canvas元素。
<canvas id="canvas-demo"></canvas>
初始化插件
在页面DOM元素加载完毕之后，通过下面的方法来初始化该插件。
var granimInstance = new Granim({
element: '#canvas-demo',
states : {
"default-state": {
gradients: [
['#485563', '#29323c', '#29323c'],
['#00c6ff', '#0072ff', '#0072ff']
],
transitionSpeed: 10000
}
}
});
方法
// Change state by putting its name in the argument
granimInstance.changeState('state-name');
// Play the animation
granimInstance.play();
// Pause the animation
granimInstance.pause();
// Stop the animation and clear the gradient
granimInstance.clear();
// Change the direction
granimInstance.changeDirection('direction-name');
// Change the blending mode (useful only if you use an image)
granimInstance.changeBlendingMode('blending-mode-name');
// Destroy an instance and remove its events listeners
granimInstance.destroy();
源码来源：https://github.com/sarcadass/granim.js
