onGradientChange

onGradientChange

グラデーションの変化と、ループ発生時にトリガーされます。

• 初期値 : false
• type : function

デモ

グラデーションの色が切り替わったタイミングとループ発生時にオブジェクトの内容を表示します。

JavaScript

var granimInstance = new Granim({
  element: '#granim-canvas',
  opacity: [1, 1],
  states : {
    'default-state': {
      gradients: [
        ['#834D9B', '#D04ED6'],
        ['#1CD8D2', '#93EDC7']
      ],
    },
  },
  onGradientChange: function(colorDetails) {
    var result   = document.getElementById('result'),
        ul, li;
    ul = document.createElement('ul');
    Object.keys(colorDetails).forEach(function(i) {
      li = document.createElement('li');
      li.textContent = i + ' : '+ colorDetails[i];
      ul.appendChild(li);
    });
    if (result.firstChild !== null) {
      result.removeChild(result.firstChild);
    }
    result.appendChild(ul);
  }
});

HTML

<div id="result"></div>
<canvas id="granim-canvas" style="width:100%;"></canvas>