Granim.js

当需要为网站背景、登录页或产品展示页添加流畅且可交互的渐变动画时，Granim.js 提供基于 HTML5 Canvas 的轻量级解决方案，体积约 17KB，无需依赖任何框架。

它能做什么

Granim.js 专注于在 Canvas 上生成多色平滑过渡的渐变动画，并支持图片叠加与混合模式，营造层次感。

• 多色渐变过渡：在任意多组颜色之间平滑流动，形成柔和动态背景
• 图片叠加混合：在渐变动画上叠加图片，并设置混合模式（如 multiply、overlay）增强视觉效果
• 多状态切换：定义多个动画状态（如 default-state、hover-state），通过事件或方法在不同场景间切换渐变配色
• 方向与透明度控制：支持 diagonal（对角线）、radial（径向）、left-right（左右）等渐变方向，可独立调整各颜色透明度与分布
• 事件回调：监听动画开始、变化、结束等事件，实现与用户交互的联动控制

适合谁用

主要面向前端开发者与 UI 设计师，用于快速为网页添加现代感视觉元素，无需编写复杂的 Canvas 绘图逻辑。

• 前端开发者：通过 npm 安装（npm install granim --save）或 CDN 引入，几行代码即可初始化实例
• UI/UX 设计师：利用多状态切换与图片叠加功能，为品牌页面或登录页创造动态视觉焦点
• 数据可视化项目：作为背景动画提升页面质感，不干扰数据图表的主体展示

怎么上手

基础使用只需三步：创建 Canvas 容器、引入库文件、初始化 Granim 实例并配置颜色与方向。

• 创建 Canvas 元素：在 HTML 中添加 <canvas id="granim-canvas"></canvas>
• 引入库：通过 CDN 加载 dist/granim.min.js 或使用 import Granim from 'granim'
• 初始化实例：new Granim({ element: '#granim-canvas', direction: 'diagonal', opacity: [1,1], states: { 'default-state': { gradients: [['#834D9B','#D04ED6'], ['#1CD8','...']] } } })
• 控制动画：调用 granimInstance.changeState('new-state') 切换配色方案，或使用 play/pause 方法控制动画启停

收费与限制

Granim.js 采用 MIT 开源协议，完全免费使用，无商业限制。

• 许可证：MIT，可自由用于商业项目
• 体积：约 17KB（压缩后），性能开销低
• 依赖：零依赖，纯原生 JavaScript 实现
• 浏览器支持：基于 HTML5 Canvas，兼容现代浏览器（Chrome、Firefox、Safari、Edge）

常见问题

Q1：Granim.js 能否在渐变动画上叠加图片？

A1：可以。Granim.js 支持在渐变动画上叠加图片，并允许设置混合模式（如 multiply、overlay），从而营造更具层次感的视觉效果。

Q2：Granim.js 如何切换不同的渐变配色方案？

A2：通过定义多个 states（如 'default-state'、'hover-state'），每个 state 内设置独立的 gradients 数组。调用 granimInstance.changeState('state-name') 即可在运行时切换配色，实现动态视觉变化。

Q3：Granim.js 的渐变方向有哪些可选？

A3：支持 diagonal（对角线）、radial（径向）、left-right（左右）等方向，开发者可在初始化时通过 direction 参数指定。

更多同类工具与网站,可在动画库分类继续挑选。

信息核实于 2026年7月,具体以官网为准。