アニメーション・トランジション

// Recharts: 各系列コンポーネントにアニメーション設定
<LineChart data={data}>
  <Line
    type="monotone"
    dataKey="value"
    isAnimationActive={true}      // アニメーション on/off
    animationDuration={800}        // 時間（ms）
    animationEasing="ease-out"    // イージング関数
    animationBegin={0}             // 開始遅延（ms）
  />
</LineChart>

// アニメーションを無効化（大量データのパフォーマンス最適化）
<Line isAnimationActive={false} />

// 棒グラフも同様
<Bar
  dataKey="value"
  isAnimationActive={true}
  animationDuration={600}
  animationEasing="ease-in-out"
/>

// ECharts: グローバル設定と系列別設定の両方が可能
const option = {
  animation: true,               // アニメーション on/off
  animationDuration: 1000,       // 初期描画時間（ms）
  animationEasing: 'cubicOut',   // イージング（cubicOut / linear / bounceOut など）
  animationDelay: 0,             // 開始遅延

  // データ更新時のアニメーション
  animationDurationUpdate: 300,
  animationEasingUpdate: 'cubicInOut',

  series: [{
    type: 'bar',
    animation: true,
    animationDuration: 800,
    // ステガーアニメーション（要素ごとに遅延をずらす）
    animationDelay: (idx) => idx * 50,
    data: [120, 200, 150, 80, 70],
  }],
};

// Plotly.js: Plotly.animate() でデータ更新時のトランジション
import Plotly from 'plotly.js-dist';

Plotly.animate('chart-id', {
  data: [{ y: newData }],
}, {
  transition: {
    duration: 500,
    easing: 'cubic-in-out',
  },
  frame: {
    duration: 500,
    redraw: false,
  },
});

// react-plotly.js: frames + transition で宣言的に設定
<Plot
  data={data}
  frames={frames}
  layout={{
    transition: { duration: 500, easing: 'cubic-in-out' },
    updatemenus: [{ type: 'buttons', buttons: [{ label: '再生', method: 'animate' }] }],
  }}
/>

// Chart.js: animation / transitions オプション
const options = {
  animation: {
    duration: 1000,          // アニメーション時間（ms）
    easing: 'easeOutQuart',  // イージング関数

    // プロパティ別のアニメーション
    x: { type: 'number', easing: 'linear', duration: 500 },
    y: { type: 'number', easing: 'easeOutBounce', duration: 800 },

    // コールバック
    onComplete: () => { console.log('animation done'); },
    onProgress: (animation) => { console.log(animation.currentStep); },
  },

  // データ更新時のトランジション
  transitions: {
    active: {
      animation: { duration: 400 },
    },
  },

  // アニメーション無効化
  // animation: false,
};

import { ResponsiveLine } from '@nivo/line';

<ResponsiveLine
  data={data}

  // アニメーション制御
  animate={true}              // on/off（デフォルトtrue）

  // motionConfig でバネアニメーションを制御
  motionConfig="gentle"
  // プリセット: 'default' | 'gentle' | 'wobbly' | 'stiff' | 'slow' | 'molasses'

  // カスタムspring設定
  // motionConfig={{ mass: 1, tension: 170, friction: 26 }}
/>

// motionConfig プリセット一覧:
// 'gentle'   → 穏やか（推奨）
// 'wobbly'   → バウンス感あり
// 'stiff'    → 速くてシャープ
// 'slow'     → ゆっくり
// 'molasses' → 非常にゆっくり

// ApexCharts: chart.animations オブジェクトで設定
const options = {
  chart: {
    animations: {
      enabled: true,              // on/off
      easing: 'easeinout',        // イージング
      speed: 800,                 // 初期描画時間（ms）

      animateGradually: {
        enabled: true,            // 段階的アニメーション（要素を順番に表示）
        delay: 150,               // 要素間の遅延（ms）
      },

      dynamicAnimation: {
        enabled: true,            // データ更新時のアニメーション
        speed: 350,               // 更新アニメーション時間（ms）
      },
    },
  },
};

// 利用可能なイージング:
// 'linear' | 'easein' | 'easeout' | 'easeinout'
// 'swing' | 'bounce' | 'elastic'