Methods

グラデーションを操作する関数。

// アニメーション再生
granimInstance.play();

// アニメーション停止
granimInstance.pause();

// アニメーションを停止し、グラデーションを初期化します。
granimInstance.clear();

// 引数に指定した名称の状態(state)に変更します。
granimInstance.changeState('state-name');

// [v1.1.0] directionを変更します。
granimInstance.changeDirection('direction-name');

// [v1.1.0] blendingModeを変更します。(画像を使う場合のみ有効です。)
granimInstance.changeBlendingMode('blending-mode-name');

// [v1.1.0] インスタンスを削除し、イベントリスナーを解除します。*1
granimInstance.destroy();

デモ

各ボタンで動作を確認することができます。

* clearの後にplayで再生することはできますが、 destroyの後にplayを押しても再生することはできません。

再生 / 停止 / リセット / 破棄

状態(state)選択

グラデーション方向選択

画像合成タイプ選択

JavaScript

var granimInstance = new Granim({
  element: '#granim-canvas',
  opacity: [1, 1],
  states : {
    'default-state': {
      gradients: [
        ['#834D9B', '#D04ED6'],
        ['#1CD8D2', '#93EDC7']
      ],
    },
    'orange-state': {
      gradients: [
        ['#FF4E50', '#F9D423']
      ],
    }
  },
  image: {
    source: './img/1.jpg',
    position: ['center', 'center'],
    stretchMode: ['stretch-if-smaller', 'stretch'],
  },
});

// 再生
document.querySelector('.play').addEventListener('click', function() {
  granimInstance.play();
});

// 停止
document.querySelector('.pause').addEventListener('click', function() {
  granimInstance.pause();
});

// リセット
document.querySelector('.clear').addEventListener('click', function() {
  granimInstance.clear();
});

// state切り替え
document.querySelector('.default-state').addEventListener('click', function() {
  granimInstance.changeState('default-state');
});
document.querySelector('.orange-state').addEventListener('click', function() {
  granimInstance.changeState('orange-state');
});

// direction切り替え
document.querySelector('.diagonal').addEventListener('click', function() {
  granimInstance.changeDirection('diagonal');
});
document.querySelector('.radial').addEventListener('click', function() {
  granimInstance.changeDirection('radial');
});

// blendingMode切り替え
document.querySelector('.normal').addEventListener('click', function() {
  granimInstance.changeBlendingMode('normal');
});
document.querySelector('.multiply').addEventListener('click', function() {
  granimInstance.changeBlendingMode('multiply');
});

// 破棄
document.querySelector('.destroy').addEventListener('click', function() {
  granimInstance.destroy();
});

HTML

<canvas id="granim-canvas" style="width:100%;"></canvas>
<p>再生 / 停止 / リセット / 破棄</p>
<div class="buttons">
  <div class="button play">play</div>
  <div class="button pause">pause</div>
  <div class="button clear">clear</div>
  <div class="button destroy">destroy</div>
</div>
<p>状態(state)選択</p>
<div class="buttons">
  <div class="button default-state">default-state</div>
  <div class="button orange-state">orange-state</div>
</div>
<p>グラデーション方向選択</p>
<div class="buttons">
  <div class="button diagonal">diagonal</div>
  <div class="button radial">radial</div>
</div>
<p>画像合成タイプ選択</p>
<div class="buttons">
  <div class="button normal">normal</div>
  <div class="button multiply">multiply</div>
</div>

CSS

.buttons {
  display: flex;
  justify-content: center;
}

.buttons .button {
  margin: 8px;
  border: 1px solid #000;
  color: #000;
  padding: 8px;
  text-align: center;
  width: 8em;
  transition: all 300ms ease;
}

.buttons .button:hover {
  cursor: pointer;
  background-color: #000;
  color: #fff;
  transition: all 300ms ease;
}