アニメーション

セルの数値が変更された際にスムーズなアニメーションを表示する方法を説明します。

有効化

オプションで有効化

const grid = createReogrid({
  workspace: '#grid',
  animation: true,
  animationDuration: 500,
  animationEasing: 'easeOutCubic',
});

React / Vue で有効化

<Reogrid
  options={{
    animation: true,
    animationDuration: 500,
    animationEasing: 'easeOutCubic',
  }}
  style={{ flex: 1 }}
/>

実行時に切替

const ws = grid.worksheet;

ws.setAnimation(true);
ws.setAnimation(false);

// 状態の確認
ws.getAnimationEnabled(); // boolean

アニメーション設定

時間

ws.setAnimationDuration(300); // ミリ秒

イージング

// プリセット名で指定
ws.setAnimationEasing('easeOutCubic');

// カスタム関数
ws.setAnimationEasing((t) => t * (2 - t)); // easeOutQuad

利用可能なイージング名

動作の仕組み

アニメーションが有効な場合、セルの数値が変更されると以下が起こります。

1. 旧値から新値への補間アニメーションが開始
2. 指定されたイージング関数に従って値が徐々に変化
3. アニメーション中はフレームごとに Canvas が再描画
4. プログレスバーなどのセルタイプも数値変化に追従

数式の再計算で値が変わった場合も自動的にアニメーションが発生します。

手動アニメーション

ws.animateCellValue(row, col, oldValue, newValue);

AnimationManager

const manager = ws.getAnimationManager();

使用例：リアルタイムダッシュボード

const ws = grid.worksheet;
ws.setAnimation(true);
ws.setAnimationDuration(500);
ws.setAnimationEasing('easeOutCubic');

// プログレスバー付きデータ
ws.setCellType(1, 2, { type: 'progress', max: 100 });
ws.cell('C2').value = '=B2/A2*100';

// 値を更新するとプログレスバーがスムーズにアニメーション
ws.cell('B2').value = '75';

// 定期更新
setInterval(() => {
  const newValue = Math.floor(Math.random() * 100);
  ws.cell('B2').value = String(newValue);
}, 3000);