文章目录
- 创建页面布局
- 创建手势控件
- 创建TalkBox
- 创建动画
- 拖拽物动画
- 按钮激活动画
- TalkBox动画
- Layout动画
- 项目地址
.NET MAUI 跨平台框架包含了识别平移手势的功能，在之前的博文
[MAUI 项目实战] 手势控制音乐播放器（二）： 手势交互中利用此功能实现了pan-pit拖拽系统。
简单来说就是拖拽物(pan)体到坑(pit)中，手势容器控件PanContainer描述了pan运动和pit位置的关系，并在手势运动中产生一系列消息事件。
今天使用这个控件，做一个模仿微信“按住-说话”的小功能，最终效果如下：
使用.NET MAU实现跨平台支持，本项目可运行于Android、iOS平台。
新建.NET MAUI项目，命名 MainPage.xaml中创建一个Grid容器，并对Grid容器进行如下布局：
在手机屏幕的底部设置两行两列的布局：
第一行第一列，对应取消发送手势区域，
第一行第二列，对应语音转文字手势区域，
第二行独占两列，对应发送手势区域。
布局如下图所示
创建三个PitGrid控件，并对这三个功能区域的PitGrid控件命名，、，分别对应了取消发送、语音转文字、发送。
为每个PitGrid控件添加内容：
发送区域是一个底部弧形区域，按住说话我们用一个巨大的圆形+Y轴方向的偏移，通过只保留屏幕底部往上的一部分圆形区域来实现底部弧形区域的效果，代码如下：
取消发送和语音转文字区域是一个圆形区域，我们用一个正常大小的圆形来实现。
PitContentLayout区域整体代码如下
效果如下
创建一个手势控件。他包裹的内 按住说话容。是一个带有按住说话的按钮。
此时应该是可以拖动，并且在拖拽开始，进入pit，离开pit，释放时，分别触发Start，In，Out，Over四个状态。
按住说话
但我们希望在拖拽时隐藏这个按钮，这将在创建动画章节将介绍。
创建一个圆角矩形，用来显示正在说话的动画。
效果如下
拖拽物动画
在拖拽时我们希望可以隐藏拖拽物，设置 和属性为0，代码如下：
按钮激活动画
Codebeind代码中，配置Active和DeActive方法，用于激活和取消激活功能区域按钮的样式。
激活时，对应功能区域按钮背景颜色变为白色，字体颜色变为黑色，并且放大到1.2倍。
取消激活时，恢复到原来的样式。
代码如下
在拖拽进入pit的事件中设置激活状态，在拖拽离开pit的事件中设置取消激活状态。
TalkBox动画
创建GetColor方法，使用插值法用于获取渐变过程中获取当前进度的颜色
在进入功能区域时，TalkBox的颜色，偏移量和宽度都会发生变化，创建一个复合动画TalkBoxAnimations，用于触发TalkBox的动画效果。
最终效果如下：
Layout动画
创建一个用于显示功能区域和TalkBox的渐变动画，用于在拖拽开始和结束时，显示和隐藏这两个控件。
