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

javascript 网页开发如果使用正确的颜色组合，渐变可以立即改善网站的外观和感觉。在对任何元素应用渐变并为其设置动画方面， css也取得了长足的进步。在本教程中，我们将远离 CSS 并使用名为Granim.js的JavaScript库创建渐变动画。

该库根据您在创建 Granim 实例时设置的参数在给定的画布上绘制渐变并为其设置动画。有不同的方法可以用来让你的渐变响应不同的用户事件，比如按钮点击。在本教程中，我们将详细了解这个库并创建一些简单但漂亮的渐变动画效果。

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

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

创建纯色渐变动画

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

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

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

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

该elToSetClassOn属性不能自行工作。您还必须为Granim使用 name 属性创建的实例指定一个名称。如果您将名称设置为类似first-gradient，则应用于容器元素的类的名称将变为first-gradient-light或first-gradient-dark基于当前渐变的明暗程度。这样，任何需要根据渐变的亮度或暗度来改变颜色的元素都可以轻松完成。

可以使用该direction属性指定绘制渐变的方向。它有四个有效值：diagonal、left-right、top-bottom和radial。您创建的渐变不会在这些特定方向上移动——它们只会以这种方式绘制。渐变的位置在动画期间不会改变；只有它的颜色。

还有一个states属性，它接受一个对象作为它的值。对象内部指定的每个状态states都有一个名称和一组键值对。您可以使用该gradients属性来指定应构成特定渐变的不同颜色。您可以将此属性的值设置为等于渐变数组。

Granim.js 将自动创建一个动画，其中渐变的颜色从一组变为另一组。默认情况下，不同渐变之间的过渡需要 5,000 毫秒。transitionSpeed但是，您可以通过为该属性设置适当的值来加快或减慢动画的速度。

渐变开始动画后，它们将不得不在某一点或另一点结束。loop您可以使用该属性指定渐变是否应该停在那里或从头开始重新设置动画。这是true默认设置的，这意味着渐变将保持动画。

渐变中的每种颜色都可以有不同的不透明度，可以使用opacity属性指定。此属性接受一个数组来确定每种颜色的不透明程度。对于两种渐变颜色，该值可以是 [0.1, 0.8]。对于三种渐变色，值可以是[1, 0.5, 0.75]等。

您还可以选择使用stateTransitionSpeed. 这与 transitionSpeed属性不同，它控制同一状态内的动画速度。

在下面的代码片段中，我创建了两个不同的Granim实例来绘制不同的渐变。在第一种情况下，我们只指定了一个渐变，所以没有任何实际的动画，颜色根本没有变化。

var firstGranim = new Granim({
  element: "#first",
  name: "first-gradient",
  direction: "diagonal",
  opacity: [1, 1],
  states: {
    "default-state": {
      gradients: [["#8BC34A", "#FF9800"]]
    }
  }
});

var secondGranim = new Granim({
  element: "#second",
  name: "second-gradient",
  elToSetClassOn: ".wrapper",
  direction: "top-bottom",
  opacity: [1, 1],
  states: {
    "default-state": {
      gradients: [["#9C27B0", "#E91E63"], ["#009688", "#8BC34A"]],
      transitionSpeed: 2000
    }
  }
});

在图像上设置渐变动画

Granim.js 库的另一个常见用途是在画布上绘制的图像上设置渐变动画。您可以使用该属性指定不同的属性来控制图像在画布上的绘制方式image。它接受具有键值对的对象作为其值。您可以使用该source属性来指定库应该从中获取图像以在画布上绘制它的路径。

您在画布上绘制的任何图像都将被绘制，使其中心与画布的中心重合。但是，您可以使用该position属性指定不同的位置来绘制图像。此属性接受一个包含两个元素的数组作为其值。第一个元素的值可以是left、center和right。第二个元素的值可以是top、center和bottom。

当您知道画布和图像的大小不匹配时，这些属性通常很有用。在这些情况下，您可以使用此属性来指定应该出现在画布上的图像部分。

如果图像和画布具有不同的尺寸，您还可以拉伸图像以使其正确适合画布。该stretchMode属性还接受一个包含两个元素的数组作为其值。这两个元素的三个有效值是 stretch、stretch-if-smaller和stretch-if-larger。

混合模式设置为的渐变normal将完全隐藏其下方的图像。在纯色渐变下显示图像的唯一方法是选择不同的混合模式。您可以在MDN上阅读有关画布的所有可能混合模式值的信息。

我想指出的是，仅在 Granim.js 库的 1.1 版中添加了在图像上设置渐变动画的功能。因此，如果您希望此功能正常工作，则必须使用高于该版本的任何版本。

var firstGranim = new Granim({
  element: "#first",
  name: "first-gradient",
  direction: "diagonal",
  opacity: [1, 1],
  image: {
    source: "path/to/rose_image.jpg",
    position: ["center", "center"],
    blendingMode: "lighten"
  },
  states: {
    "default-state": {
      gradients: [["#8BC34A", "#FF9800"], ["#FF0000", "#000000"]]
    }
  }
});

var secondGranim = new Granim({
  element: "#second",
  name: "second-gradient",
  elToSetClassOn: ".wrapper",
  direction: "top-bottom",
  opacity: [1, 1],
  image: {
    source: "path/to/landscape.jpg",
    stretchMode: ["stretch", "stretch"],
    blendingMode: "overlay"
  },
  states: {
    "default-state": {
      gradients: [["#9C27B0", "#E91E63"], ["#009688", "#8BC34A"]],
      transitionSpeed: 2000
    }
  }
});

控制渐变动画播放的方法

到目前为止，我们无法控制渐变动画在实例化后的播放。我们不能暂停/播放它或改变它的状态、方向等。Granim.js 库有不同的方法可以让你轻松完成所有这些任务。

play()您可以使用andpause()方法播放或暂停任何动画。changeState('state-name')同样，您可以使用该方法更改渐变动画的状态。这里state-name必须是您在实例化Granim实例时定义的状态名称之一。

changeDirection('direction-name')1.1 版中添加了更多方法，允许您使用和 changeBlendingMode('blending-mode-name')方法动态更改动画的方向和混合模式。

在下面的代码片段中，我使用按钮单击事件来调用所有这些方法，但您可以使用任何其他事件来调用它们。

var firstGranim = new Granim({
  element: "#first",
  name: "first-gradient",
  elToSetClassOn: ".wrapper",
  direction: "top-bottom",
  opacity: [1, 1],
  isPausedWhenNotInView: true,
  image : {
        source: 'path/to/landscape.jpg',
        stretchMode: ["stretch", "stretch"],
        blendingMode: 'overlay'
  },
  states: {
    "default-state": {
      gradients: [["#9C27B0", "#E91E63"], ["#009688", "#8BC34A"]],
      transitionSpeed: 2000
    },
    "green-state": {
      gradients: [["#4CAF50", "#CDDC39"], ["#FFEB3B", "#8BC34A"]],
      transitionSpeed: 2000
    },
    "red-state": {
      gradients: [["#E91E63", "#FF5722"], ["#F44336", "#FF9800"]],
      transitionSpeed: 2000
    }
  }
});

$(".play").on("click", function(){
  firstGranim.play();
});

$(".pause").on("click", function(){
  firstGranim.pause();
});

$(".diagonal").on("click", function(){
  firstGranim.changeDirection('diagonal');
});

$(".radial").on("click", function(){
  firstGranim.changeDirection('radial');
});

$(".red-state").on("click", function(){
  firstGranim.changeState('red-state');
});

$(".green-state").on("click", function(){
  firstGranim.changeState('green-state');
});

$(".color-dodge").on("click", function(){
  firstGranim.changeBlendingMode('color-dodge');
});

$(".color-burn").on("click", function(){
  firstGranim.changeBlendingMode('color-burn');
});

$(".lighten").on("click", function(){
  firstGranim.changeBlendingMode('lighten');
});

$(".darken").on("click", function(){
  firstGranim.changeBlendingMode('darken');
});