バウンスアニメーション

弾むような楽しいアニメーション

バウンスアニメーション

バウンス（Bounce）アニメーションは、要素が弾むような生き生きとした効果を加えます。

使い方

import { transition } from '@ssgoi/react';
import { bounce } from '@ssgoi/react/transitions';

function Component() {
  return (
    <div ref={transition({
      key: 'my-element',
      ...bounce()
    })}>
      Bounce me!
    </div>
  );
}

オプション

interface BounceOptions {
  times?: number;       // バウンス回数（デフォルト：2）
  scale?: number;       // バウンス時のスケール（デフォルト：1.2）
  opacity?: boolean;    // 透明度効果の有無（デフォルト：true）
  spring?: {
    stiffness?: number; // スプリング強度（デフォルト：500）
    damping?: number;   // 減衰係数（デフォルト：15）
  };
}

使用例

// 複数回バウンス
bounce({ times: 3 })

// 大きなバウンス
bounce({ scale: 1.5 })

// バウンスのみ（透明度なし）
bounce({ opacity: false })

// ソフトなバウンス
bounce({ spring: { stiffness: 300, damping: 20 } })