Granim.js 开源项目教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00560/article/details/142082634

Granim.js 开源项目教程

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

1. 项目介绍

Granim.js 是一个轻量级的 JavaScript 库，用于创建流畅且交互式的渐变动画。它允许开发者轻松地在网页中实现各种渐变效果，并且支持多种渐变方向和动画效果。Granim.js 适用于各种网页设计场景，如背景动画、按钮效果、LOGO 动画等。

2. 项目快速启动

2.1 安装

首先，通过 npm 或直接下载的方式安装 Granim.js：

npm install granim

或者直接下载 Granim.js 并引入到你的项目中：

<script src="path/to/granim.min.js"></script>

2.2 基本使用

以下是一个简单的示例，展示如何在网页中创建一个基本的渐变动画：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Granim.js 示例</title>
    <style>
        #canvas-basic {
            position: absolute;
            display: block;
            width: 100%;
            height: 100%;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <canvas id="canvas-basic"></canvas>
    <script src="path/to/granim.min.js"></script>
    <script>
        var granimInstance = new Granim({
            element: '#canvas-basic',
            direction: 'left-right',
            isPausedWhenNotInView: true,
            states: {
                "default-state": {
                    gradients: [
                        ['#ff9966', '#ff5e62'],
                        ['#00F260', '#0575E6'],
                        ['#e1eec3', '#f05053']
                    ]
                }
            }
        });
    </script>
</body>
</html>

2.3 配置参数

Granim.js 提供了丰富的配置参数，以下是一些常用的参数：

element: 指定渐变动画的容器元素。
direction: 渐变动画的方向，如 left-right, top-bottom, diagonal, radial 等。
isPausedWhenNotInView: 当元素不在视图中时是否暂停动画。
states: 定义不同的状态及其对应的渐变颜色。

3. 应用案例和最佳实践

3.1 背景动画

Granim.js 常用于网页背景动画，通过设置不同的渐变颜色和方向，可以为网页增添动态效果。

<canvas id="canvas-background"></canvas>
<script>
    var granimInstance = new Granim({
        element: '#canvas-background',
        direction: 'radial',
        states: {
            "default-state": {
                gradients: [
                    ['#833ab4', '#fd1d1d', '#38ef7d'],
                    ['#40e0d0', '#ff8c00', '#ff0080']
                ]
            }
        }
    });
</script>

3.2 按钮效果

通过 Granim.js 可以为按钮添加渐变动画效果，提升用户体验。

<button id="gradient-button">点击我</button>
<script>
    var granimInstance = new Granim({
        element: '#gradient-button',
        direction: 'left-right',
        states: {
            "default-state": {
                gradients: [
                    ['#EB3349', '#F45C43'],
                    ['#FF8008', '#FFC837']
                ]
            }
        }
    });
</script>