syncfusion-maui-effects-view

.NET MAUI Effects View (SfEffectsView)

リップル、ハイライト、選択、拡大縮小、回転アニメーションなど、タッチ操作に応じた最新の視覚効果を提供するコンテナーコントロールです。任意の MAUI ビューをラップして、洗練されたタッチフィードバックを追加し、ユーザーエクスペリエンスを向上させます。

このスキルを使用するタイミング

次の操作が必要な場合は、必ずこのスキルを使用してください。

• ボタン、カード、リスト項目にリップル効果を追加する
• タッチ／押下時のハイライトオーバーレイを実装する
• 視覚的なフィードバックを伴う選択インジケーターを作成する
• 操作時の拡大縮小アニメーション（ズームイン／アウト）を追加する
• インタラクティブな要素に回転効果を実装する
• 任意の MAUI ビュー（Image、Label、Grid など）にタッチフィードバックを提供する
• 視覚的なフィードバックを伴うタッチイベント（タップ、長押し、タッチ開始／終了）を処理する
• 既存の UI 要素をインタラクティブな効果でラップする
• カスタムビューにボタンのような動作を追加する
• Material Design スタイルのリップル効果で UX を向上させる

コンポーネントの概要

SfEffectsView は、タッチ操作に応じて視覚効果を描画するラッパーコントロールです。

主な機能：

• 5 種類の効果： リップル、ハイライト、選択、拡大縮小、回転
• 3 種類のタッチ操作： TouchDown、TouchUp、LongPress
• カスタマイズ可能： アニメーションの時間、色、拡大縮小率、回転角度
• 組み合わせ可能： 複数の効果を同時に適用
• イベント駆動： AnimationCompleted、SelectionChanged、タッチイベント
• MVVM のサポート： LongPressed、TouchDown、TouchUp のコマンドバインディング
• プログラムによる制御： コードから効果を適用する ApplyEffects() メソッドと Reset() メソッド

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• NuGet パッケージのインストール（Syncfusion.Maui.Core）
• MauiProgram.cs でのハンドラー登録
• XAML および C# での基本的な SfEffectsView の実装
• SfEffectsView へのコンテンツの追加（ビューのラップ）
• 最初のリップル効果の例

タッチ操作と効果の種類

📄 参照： references/interaction-and-effects.md

• タッチ操作の種類（TouchDownEffects、TouchUpEffects、LongPressEffects）
• リップル効果：広がる円のアニメーション
• ハイライト効果：単色のオーバーレイ
• 選択効果：選択状態の維持
• 拡大縮小効果：ズームイン／アウトのアニメーション
• 回転効果：操作に応じたビューの回転
• 複数の効果の組み合わせ
• 効果のライフサイクルと動作

カスタマイズとスタイル設定

📄 参照： references/customization.md

• RippleAnimationDuration：リップルのタイミングをカスタマイズ
• ScaleAnimationDuration：拡大縮小の速度を制御
• RotationAnimationDuration：回転のタイミングを調整
• InitialRippleFactor：リップルの開始サイズを設定
• ScaleFactor：ズームレベルを制御（0.0-1.0+）
• HighlightBackground：ハイライトの色を変更
• RippleBackground：リップルの色をカスタマイズ
• SelectionBackground：選択色を設定
• Angle：回転角度（0-360）

機能と構成

📄 参照： references/features.md

• FadeOutRipple：拡大しながらリップルをフェードアウト
• IsSelected：プログラムによる選択状態の設定
• ShouldIgnoreTouches：直接操作を無効化
• AutoResetEffects：タッチ終了時に効果を自動削除（Android/UWP）
• プラットフォーム固有の動作

イベントとハンドラー

📄 参照： references/events.md

• AnimationCompleted：効果の終了時に発生
• SelectionChanged：選択状態の変更時に発生
• LongPressed：長押しジェスチャー時に発生
• TouchDown：タッチ開始時に発生
• TouchUp：タッチ終了時に発生
• イベントのタイミングとライフサイクル

コマンドとメソッド

📄 参照： references/commands-and-methods.md

• MVVM コマンドのサポート：LongPressedCommand、TouchDownCommand、TouchUpCommand
• データ受け渡し用のコマンドパラメーター
• ApplyEffects メソッド：プログラムによる効果の適用
• Reset メソッド：適用済みの効果を削除
• リップルアニメーションの繰り返し
• リップルの開始位置とカスタムポイント

ユースケースとパターン

📄 参照: references/use-cases-and-patterns.md

• カスタムビューでのボタンのようなインタラクション
• 波紋フィードバックを伴うリスト項目の選択
• ダッシュボードでのカード操作
• 長押しアクションとコンテキストメニュー
• タッチエフェクト付きの画像ギャラリー
• エフェクトを組み合わせた豊かなインタラクション
• アクセシビリティに関する考慮事項
• パフォーマンス最適化のヒント