Granim.js：为网页背景、元素和文字添加交互式渐变效果

Granim.js 是一个开源的 JavaScript 库，专门用于创建流畅、交互式的渐变动画。通过 Granim.js，你可以为网页的背景、元素、文字添加动态的渐变效果，为用户带来更具吸引力的视觉体验。它支持丰富的渐变配置，并提供易用的 API，可以用于简单的背景动画、复杂的渐变效果、图像蒙层等场景。

示例代码

基础渐变动画

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

复杂渐变动画

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 }
                ],
            ]
        }
    }
});

带图像和混合模式的渐变动画

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
        }
    }
});

文字图像蒙层渐变

var granimInstance = new Granim({
    element: '#logo-canvas',
    direction: 'left-right',
    states : {
        "default-state": {
            gradients: [
                ['#EB3349', '#F45C43'],
                ['#FF8008', '#FFC837'],
                ['#4CB8C4', '#3CD3AD'],
                ['#24C6DC', '#514A9D'],
                ['#FF512F', '#DD2476'],
                ['#DA22FF', '#9733EE']
            ],
            transitionSpeed: 2000
        }
    }
});

API 介绍

选项 (Options)

• element: 指定用于渐变动画的 canvas 元素的 CSS 选择器或 HTMLCanvasElement。（必需）
• direction: 渐变的方向，支持 'diagonal'、'left-right'、'top-bottom'、'radial' 或 'custom'。
• isPausedWhenNotInView: 当动画不在视窗内时是否暂停。
• states: 包含所有渐变状态的对象，定义颜色、位置等内容。（必需）

状态 (States)

• gradients: 定义渐变颜色及其位置的数组。
• transitionSpeed: 每个渐变之间的过渡时间。
• loop: 动画是否循环。

图像 (Image)

• source: 图像的源地址，用作蒙层。
• blendingMode: 图像与渐变之间的混合模式。

回调函数 (Callbacks)

• onStart: 动画开始时触发。
• onGradientChange: 渐变发生变化时触发。
• onEnd: 动画结束时触发。

事件 (Emitted Events)

• 监听如 'granim:start'、'granim:end'、'granim:loop'、'granim:gradientChange' 等事件。

方法 (Methods)

• play(): 播放动画。
• pause(): 暂停动画。
• clear(): 停止动画并清除渐变。
• changeState(stateName): 更改当前的渐变状态。
• changeDirection(directionName): 更改渐变的方向。
• destroy(): 销毁实例并移除所有事件监听器。

相关链接

• GitHub 项目地址：https://github.com/sarcadass/granim.js
• 官方文档：https://sarcadass.github.io/granim.js/index.html

总结

Granim.js 是一个简单易用且功能强大的渐变动画库，它可以轻松地为网页背景、元素、文字添加交互式的渐变效果。无论是简单的背景渐变，还是复杂的图像蒙层效果，Granim.js 都能提供流畅的动画效果，并且具有高度可定制性，适合在各类网页项目中使用。