基于canvas的背景颜色渐变动画插件

当前位置:主页 > Html5库 > html5 canvas > 基于canvas的背景颜色渐变动画插件
基于canvas的背景颜色渐变动画插件
分享:

    插件介绍

    这是一款基于canvas的背景颜色渐变动画插件。该插件通过配置几组不同的颜色方案,使指定元素在这些颜色中执行平滑的渐变色过渡效果。

    浏览器兼容性

    浏览器兼容性
    时间:2018-09-14
    阅读:
简要教程

这是一款基于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();                    
                

该基于canvas的背景颜色渐变动画插件的github地址为:https://github.com/sarcadass/granim.js