使用Granim.js创建交互式渐变动画

如果使用正确的颜色组合进行渐变，渐变可以立即改善网站的外观。 当在任何元素上应用渐变并设置动画效果时，CSS也走了很长一段路。 在本教程中，我们将离开CSS并使用一个名为Granim.jsJavaScript库创建渐变动画。

该库根据您在创建Granim实例时设置的参数在给定画布上绘制渐变并设置动画效果。 有多种方法可用于使您的渐变响应不同的用户事件，例如单击按钮。 在本教程中，我们将详细了解该库，并创建一些简单但不错的渐变动画效果。

创建纯色渐变动画

在我们开始创建任何渐变之前，您必须将库包含在您的项目中。 为此，您可以从GitHub下载Granim.js或直接链接到CDN 。 我在本教程中使用的库版本是1.1。 我们将在此处讨论的某些方法仅在1.1版中添加，因此在遵循本教程时使用较旧的库版本将无法始终提供预期的结果。 牢记这些要点，让我们使用Granim.js创建第一个渐变。

每次创建新的Granim实例时，都可以向其传递键-值对的对象，其中键是特定属性的名称，值是属性的值。 element属性用于指定CSS选择器或DOM节点，该节点将指向您要在其上应用特定渐变的画布。

当您创建渐变动画（其中颜色从相对较浅的值更改为较暗的值）时，可能无法读取您在画布上放置的某些文本。 例如，应用于元素的初始渐变可能是黄色和浅绿色的组合。 在这种情况下，画布的文本必须更暗，以使用户能够正确阅读它。

同样，渐变可能在其他位置由深红色和黑色组成，在这种情况下，深色文本将不容易阅读。 Granim.js通过允许您指定一个容器元素来解决此问题，您可以在该容器元素上添加明暗类来相应地设置文本或其他元素的样式。 默认情况下， elToSetClassOn属性的值设置为body ，但是您也可以指定任何其他容器元素。 深色和浅色类别名称会根据渐变的平均颜色自动更新。

elToSetClassOn属性本身无法运行。 您还必须为使用name属性创建的Granim实例指定名称。 如果将名称设置为first-gradient ，则基于当前first-gradient-dark程度，应用于容器元素的类的名称将变为first-gradient-light或first-gradient-dark 。 这样，任何需要根据渐变的明暗程度更改其颜色的元素都可以轻松地进行更改。

可以使用