マスクアニメーション

クリッピングマスクを使用したスタイリッシュな表示・非表示エフェクト

マスクアニメーション

マスク（Mask）アニメーションは、クリッピングマスクを使用して、要素が円形、楕円形、または正方形の形状で表示または非表示になるスタイリッシュなエフェクトを作成します。Material Designのリップルエフェクトに似たエレガントなトランジションを提供します。

使用方法

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

function Component() {
  return (
    <div ref={transition({
      key: 'my-element',
      ...mask()
    })}>
      マスクエフェクト！
    </div>
  );
}

オプション

interface MaskOptions {
  shape?: 'circle' | 'ellipse' | 'square';  // マスクの形状（デフォルト：'circle'）
  origin?: 'center' | 'top' | 'bottom' | 'left' | 'right' | 
           'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';  // 開始位置（デフォルト：'center'）
  scale?: number;     // マスクサイズの倍率（デフォルト：1.5）
  fade?: boolean;     // フェード効果を同時に適用（デフォルト：false）
  spring?: {
    stiffness?: number;  // スプリングの剛性（デフォルト：300）
    damping?: number;    // 減衰係数（デフォルト：30）
  };
}

使用例

// 中央から始まる円形マスク
mask()

// 左上から始まる円形マスク
mask({ origin: 'top-left' })

// 楕円形マスク
mask({ shape: 'ellipse' })

// 正方形マスク
mask({ shape: 'square', origin: 'center' })

// フェード効果付き
mask({ fade: true })

// より大きな範囲のマスク
mask({ scale: 2 })

// スムーズなアニメーション
mask({ spring: { stiffness: 100, damping: 20 } })

活用例

カードのリップルエフェクト

// クリック位置から始まるリップルエフェクト
mask({ 
  origin: 'top-left',  // クリック位置に基づいて動的に設定
  scale: 2,
  spring: { stiffness: 400, damping: 35 }
})

モーダルオープンエフェクト

// ボタン位置から展開するモーダル
mask({
  origin: 'bottom-right',  // ボタンの位置
  scale: 3,
  fade: true
})

ギャラリー画像のトランジション

// 画像中央から展開
mask({
  shape: 'circle',
  origin: 'center',
  scale: 1.5,
  spring: { stiffness: 200, damping: 25 }
})