数据属性的渐变颜色答案

【问题标题】：Gradient colors from data attribute数据属性的渐变颜色
【发布时间】：2017-07-01 05:38:20
【问题描述】：

我正在尝试使用 granim.js 插件从数据属性中获取渐变颜色； https://sarcadass.github.io/granim.js/examples.html

<canvas id="canvas-basic" class="granim" data-granim-opacity="[1, 1]" data-granim-colors="[ ['#AA076B', '#61045F'],['#02AAB0', '#00CDAC'],['#DA22FF', '#9733EE'] ]"></canvas>

这里是变体；

$('.granim').each(function(){
        var item = $(this),
        granimOpacity = $(item).data('granim-opacity'),
        granimColors = $(item).data('granim-colors');
        var granimInstance = new Granim({
            element: '.granim',
            name: 'basic-gradient',
            direction: 'left-right',
            opacity: granimOpacity,
            isPausedWhenNotInView: true,
            states : {
                "default-state": {
                    gradients: granimColors
                }
            }
        });
    });

不透明度效果很好，但渐变颜色不起作用。

演示； https://codepen.io/anon/pen/owqbaK

【问题讨论】：

你能提供demo吗，我可以帮你
嘿...我只是在这里猜。但opacity 是一个整数数组。美好的。但是你在哪里使用granimColors...它只是一个数组或对象作为一个字符串...你的“graanimColors”字符串周围缺少一些要包装的东西。
这里有一个演示； codepen.io/anon/pen/owqbaK我从这个codepen.io/JonathanSchndr/pen/KgVmLo创建它

标签： javascript jquery canvas gradient variations

【解决方案1】：

使用granimColors 作为数组。

gradients 属性 is expecting 一个数组数组。

$('.granim').each(function(){
  var item = $(this),
    granimOpacity = $(item).data('granim-opacity'),
    granimColors = $(item).data('granim-colors');

  var granimInstance = new Granim({
    element: '.granim',
    name: 'basic-gradient',
    direction: 'left-right',
    opacity: granimOpacity,
    isPausedWhenNotInView: true,
    states : {
      "default-state": {
        gradients: [granimColors] // Change this
      }
    }
  });
});

【讨论】：

所以预期的是一个数组数组。您能否提供一个指向证明这一点的文档的链接（对未来的读者有用）？
感谢您的回复。我试过了，但找不到解决方案。更新了它的问题。