Granim.js 示例解析：打造流畅渐变动画效果-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00888/article/details/148505735

Granim.js 示例解析：打造流畅渐变动画效果

granim.js Create fluid and interactive gradient animations with this small javascript library. 项目地址: https://gitcode.com/gh_mirrors/gr/granim.js

什么是 Granim.js

Granim.js 是一个轻量级的 JavaScript 库，专门用于创建流畅且交互式的渐变动画效果。它可以帮助开发者轻松实现各种动态渐变背景，为网页增添视觉吸引力。

基础渐变动画实现

基本配置

创建一个基本的渐变动画非常简单，只需要几行代码：

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

关键参数解析

element: 指定要应用渐变的 canvas 元素
direction: 控制渐变方向，可选值包括：
- left-right (从左到右)
- diagonal (对角线)
- top-bottom (从上到下)
- radial (径向渐变)
- custom (自定义方向)
isPausedWhenNotInView: 当元素不在视口中时暂停动画
states: 定义动画状态，可以包含多个状态

高级渐变效果

复杂渐变配置

Granim.js 支持更复杂的渐变配置，可以精确控制每个颜色的位置：

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 }
    ]
]

这种配置方式允许开发者精确控制每个颜色在渐变中的位置，创建更精细的渐变效果。

图像与渐变混合

图像背景与渐变混合

Granim.js 支持将渐变与背景图像混合，通过设置不同的混合模式可以创建独特的效果：

image: {
    source: '../assets/img/bg-forest.jpg',
    blendingMode: 'multiply'
}

支持的混合模式

Granim.js 提供了多种混合模式选项，包括：

multiply (正片叠底)
screen (滤色)
normal (正常)
overlay (叠加)
darken (变暗)
lighten (变亮)
以及其他多种 Photoshop 风格的混合模式

图像遮罩应用

创建形状渐变

使用图像遮罩可以创建特定形状内的渐变效果，如示例中的 Logo 效果：

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

HTML 和 CSS 配合

<div class="bloc-logo">
    <canvas id="logo-canvas"></canvas>
    <a href="index.html" class="logo-mask">Granim.js</a>
</div>

.bloc-logo .logo-mask {
    background-image: url("../img/logo-mask.png");
    text-indent: -9999px;
}

交互式渐变控制

状态切换

Granim.js 支持通过代码控制渐变状态切换：

granimInstance.changeState('violet-state');

完整交互示例

var granimInstance = new Granim({
    element: '#canvas-interactive',
    name: 'interactive-gradient',
    elToSetClassOn: '.canvas-interactive-wrapper',
    direction: 'diagonal',
    states: {
        "default-state": {
            gradients: [
                ['#B3FFAB', '#12FFF7'],
                ['#ADD100', '#7B920A']
            ],
            transitionSpeed: 10000
        },
        "violet-state": {
            gradients: [
                ['#9D50BB', '#6E48AA']
            ],
            transitionSpeed: 2000
        }
    }
});

// 状态切换
$('#violet-state-cta').on('click', function(event) {
    event.preventDefault();
    granimInstance.changeState('violet-state');
});