stateTransitionSpeed

stateTransitionSpeed

状態変化時間を指定します。

• 初期値 : 1000
• type : int

状態(state)変化時のアニメーションの長さを指定します。

デモ

ボタンを押してからstateが切り替わるまでの時間を指定しています。 左はすぐに切り替わりますが、右は少しだけ時間がかかります。

JavaScript

var states = {
  'default-state': {
    gradients: [
      ['#834D9B', '#D04ED6'],
      ['#1CD8D2', '#93EDC7']
    ],
  },
  'orange-state': {
    gradients: [
      ['#FF4E50', '#F9D423']
    ],
  }
}

var granimInstance = new Granim({
  element: '#granim-canvas',
  stateTransitionSpeed: 10,
  opacity: [1, 1],
  states : states,
});

var granimInstance2 = new Granim({
  element: '#granim-canvas2',
  stateTransitionSpeed: 1000,
  opacity: [1, 1],
  states : states,
});

document.querySelector('.default-state').addEventListener('click', function() {
  granimInstance.changeState('default-state');
  granimInstance2.changeState('default-state');
});

document.querySelector('.orange-state').addEventListener('click', function() {
  granimInstance.changeState('orange-state');
  granimInstance2.changeState('orange-state');
});

HTML

<div class="canvas">
  <canvas id="granim-canvas" style="width:100%;"></canvas>
  <canvas id="granim-canvas2" style="width:100%;"></canvas>
</div>
<div class="buttons">
  <div class="button orange-state">orange-state</div>
  <div class="button default-state">default</div>
</div>

CSS

.canvas,
.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;
}