介紹

granim.js是一個在網頁中建立流暢的互動式流體動畫的小型JavaScript庫，granim.js可以實現各種你想要的漸變的動畫效果，是網頁色彩更加豐富，視覺效果更佳！

Github

https://github.com/sarcadass/granim.js

快速上手以下是基本漸變動畫（以下是Gif動圖）

具有2種顏色組成的佇列中的3個漸變的基本漸變動畫。

<canvas id="canvas-basic"></canvas>

#canvas-basic {    position: absolute;    display: block;    width: 100%;    height: 100%;    top: 0;    right: 0;    bottom: 0;    left: 0;}

var granimInstance = new Granim({    element: '#canvas-basic',    direction: 'left-right',    isPausedWhenNotInView: true,    states : {        "default-state": {            gradients: [                ['#ff9966', '#ff5e62'],                ['#00F260', '#0575E6'],                ['#e1eec3', '#f05053']            ]        }    }});

複雜漸變動畫

複雜的漸變動畫，佇列中有2個漸變，不同位置由3種顏色組成。

<canvas id="canvas-complex"></canvas>

var granimInstance = new Granim({    element: '#canvas-complex',    direction: 'left-right',    isPausedWhenNotInView: true,    states : {        "default-state": {            gradients: [                [                    { color: '#833ab4', pos: .2 },                    { color: '#fd1d1d', pos: .8 },                    { color: '#38ef7d', pos: 1 }                ], [                    { color: '#40e0d0', pos: 0 },                    { color: '#ff8c00', pos: .2 },                    { color: '#ff0080', pos: .75 }                ],            ]        }    }});

具有影象和混合模式的漸變動畫

具有2種顏色，背景影象和混合模式設定的漸變動畫。

var granimInstance = new Granim({    element: '#canvas-image-blending',    direction: 'top-bottom',    isPausedWhenNotInView: true,    image : {        source: '../assets/img/bg-forest.jpg',        blendingMode: 'multiply'    },    states : {        "default-state": {            gradients: [                ['#29323c', '#485563'],                ['#FF6B6B', '#556270'],                ['#80d3fe', '#7ea0c4'],                ['#f0ab51', '#eceba3']            ],            transitionSpeed: 7000        }    }});

帶有影象蒙版的漸變

帶有影象蒙版的漸變動畫，可在形狀下建立漸變動畫。