Emitted events

Granimには大事な瞬間を逃さないよう、取得可能なイベントがあります。

// 以下のイベントを取得することができます。
// - granim:start
// - granim:end
// - granim:loop *1
// - granim:gradientChange

// js
var canvasElement = document.querySelector('#granim-canvas');
canvasElement.addEventListener('granim:start', function(event) {
    console.log(event);
});

// jQueryでは
$('#granim-canvas').on('granim:start', function(event) {
    console.log(event);
})

*1 granim:loopイベントは定義されていないようです。

デモ

アニメーション開始時に'アニメーション開始'と表示し、 アニメーション終了時に'アニメーション終了'と表示します。

* granim:startイベントは、インスタンス生成前に定義する必要があります。

JavaScript

var canvasElement = document.getElementById('granim-canvas');
canvasElement.addEventListener('granim:start', function(event) {
  document.querySelector('#result > .start').innerText = 'アニメーション開始';
});

canvasElement.addEventListener('granim:end', function(event) {
  document.querySelector('#result > .end').innerText = 'アニメーション終了';
});

var granimInstance = new Granim({
  element: '#granim-canvas',
  opacity: [1, 1],
  states : {
    'default-state': {
      gradients: [
        ['#834D9B', '#D04ED6'],
        ['#1CD8D2', '#93EDC7']
      ],
      loop: false,
    },
  },
});

HTML

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