mcpField
S
syncfusion-maui-toolkit-effects-view

syncfusion-maui-toolkit-effects-view

github.com/syncfusion设计与 UI3946 次安装7 周前更新
代码仓库

关于 syncfusion-maui-toolkit-effects-view

这是面向 .NET MAUI 开发的 SfEffectsView 使用指南，介绍如何为视图添加触摸反馈。它涵盖多种可组合动画，以及事件、MVVM 命令和代码控制方式。

主要功能

  1. 01五种触摸视觉效果
  2. 02支持三类触摸交互
  3. 03可组合效果并自定义动画
  4. 04提供事件与 MVVM 命令
  5. 05支持代码触发和重置效果

适用场景

  1. 01为按钮和卡片添加涟漪反馈
  2. 02为自定义视图实现长按操作
  3. 03为列表项添加选择反馈

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/syncfusion/maui-toolkit-ui-components-skills --skill syncfusion-maui-toolkit-effects-view

安装后在 Claude Code 中输入/syncfusion-maui-toolkit-effects-view确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
commands-and-methods.md
customization.md
events.md
features.md
getting-started.md
interaction-and-effects.md
use-cases-and-patterns.md

详细介绍

.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.Toolkit）
  • 在 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

  • 自定义视图的按钮式交互
  • 带涟漪反馈的列表项选择
  • 仪表板中的卡片交互
  • 长按操作和上下文菜单
  • 带触摸效果的图片库
  • 组合多种效果，实现丰富的交互
  • 无障碍设计注意事项
  • 性能优化技巧

评论

支持 Markdown