借助Granimjs制作绚丽的流体动画

本文介绍了如何利用Granimjs库制作流体动画，包括基础用法、实现按钮hover时的动画效果，以及如何在React中封装成可复用的动画按钮组件。通过实例展示了Granimjs在前端开发中的应用。

前言

Granim是什么？Granim是一个流体动画库，那么流体动画又是什么？流体动画就是渐变色不断地移动，我们看一个案例就知道了：

我们想要做一个流体动画按钮，有三种方式：

1.设计师制作lottie文件，前端直接播放
2.设计师制作GIF播放
3.前端用css模拟流体动画或者用canvas绘制动画

但是如果设计师不愿意做的话，我们只能自己想办法，用css模拟流体动画性能较好，但是代码成本很高，调试效果成本也很高，所以使用现成的动画库可能更符合我们的需求，那么我们就找到了Granimjs（怎么找到的Granimjs我们在文章最后揭晓）

Granimjs

官网效果很炫酷：sarcadass.github.io/granim.js/

官方文档：sarcadass.github.io/granim.js/a…

基础用法：

var granimInstance = new Granim({element: '#root',states : {"default-state": {gradients: [['#834d9b', '#d04ed6'],['#1CD8D2', '#93EDC7']],transitionSpeed: 5000,loop: true}}
);

如果想像背景图一样写渐变色可以这样写,将之前的颜色字符串变为一个对象，这个对象里面有一个pos代表从上一个pos到这个pos是当前这个颜色

 gradients: 
[[{ color: 'rgba(255, 153, 102, .33)', pos: .5 },{ color: '#ff5e62', pos: 1 }, ...], [{ color: 'hsla(144, 100%, 47%, .75)', pos: .1 },{ color: 'hsl(210, 96%, 46%)', pos: .6 }, ...],...
]

下面我们用Granim实现一个小需求

需求1：hover按钮时做动画

我们先实现一个小需求，这里有一个按钮，还有一块画布，我们现在需要hover按钮的时候让画布动起来

hover对应的事件是onmouseenter和onmouseleave，那么我们就在按钮触发onmouseenter时初始化一个Granim对象：

<button onmouseenter="startGranim(this)">按钮</button>
<canvas id="root"></canvas>
<script src="https://cdn.bootcdn.net/ajax/libs/granim/2.0.0/granim.min.js"></script>
<script> window.onload = function () {var granimInstance;const root = document.getElementById('root')window.startGranim = () => {granimInstance = new Granim({element: root,states: {"default-state": {gradients: [["#834d9b", "#d04ed6"],["#1CD8D2", "#93EDC7"],],transitionSpeed: 5000,loop: true,},},});};}; </script>

效果如下：

这样的话我们还需要处理鼠标离开事件，我们知道hover时状态会进行一个切换，当离开之后状态立马回归到原始状态了，所以我们在鼠标离开时需要将动画销毁，其实也就是清除画布，这里我们有一个API可以直接调用

window.destroyGranim = () => {granimInstance.destroy();
};

紧接着我们想把这个动画效果添加到当前按钮身上去，这就是我们的需求2

需求2：将动画效果应用到按钮上

我们先稍微美化一下我们的按钮：

<style> .box{position: relative;width: 140px;height: 50px;line-height: 50px;text-align: center;background-image: linear-gradient(90deg,#834d9b,#d04ed6);color: white;font-size: 16px;border-radius: 8px;overflow: hidden;}.box span{position: relative;z-index: 1;}canvas{position: absolute;left: 0;top: 0;width: 140px;height: 50px;} </style>
<div class="box" onmouseenter="startGranim(this)" onmouseleave="destroyGranim()"><span>hover出现动画</span><canvas id="root"></canvas>
</div>

美化之后效果如图：