@

.NET MAUI跨平台框架包含了识别平移手势的功能，在之前的博文[MAUI 项目实战] 手势控制音乐播放器（二）： 手势交互中利用此功能实现了pan-pit拖拽系统。

简单来说就是拖拽物(pan)体到坑(pit)中，手势容器控件PanContainer描述了pan运动和pit位置的关系，并在手势运动中产生一系列消息事件。

今天使用这个控件，做一个模仿微信“按住-说话”的小功能，最终效果如下：

使用.NET MAU实现跨平台支持，本项目可运行于Android、iOS平台。

创建页面布局

新建.NET MAUI项目，命名HoldAndSpeak

MainPage.xaml中创建一个PitContentLayoutGrid容器，并对Grid容器进行如下布局：

在手机屏幕的底部设置两行两列的布局：

第一行第一列，对应取消发送手势区域，

第一行第二列，对应语音转文字手势区域，

第二行独占两列，对应发送手势区域。

布局如下图所示

  1. <Grid x:Name="PitContentLayout"
  2.         Opacity="1">
  3.     <Grid.RowDefinitions>
  4.         <RowDefinition Height="1*" />
  5.         <RowDefinition Height="1*" />
  6.     </Grid.RowDefinitions>
  7.     <Grid.ColumnDefinitions>
  8.         <ColumnDefinition Width="1*" />
  9.         <ColumnDefinition Width="1*" />
  10.     </Grid.ColumnDefinitions>
  11. </Grid>

创建三个PitGrid控件，并对这三个功能区域的PitGrid控件命名，CancelPit、TransliterationPit，分别对应了取消发送、语音转文字、发送。

为每个PitGrid控件添加内容：

发送区域是一个底部弧形区域，我们用一个巨大的圆形+Y轴方向的偏移，通过只保留屏幕底部往上的一部分圆形区域来实现底部弧形区域的效果，代码如下：

  1. <BoxView TranslationY="450"
  2.         x:Name="SendBox"
  3.         HeightRequest="1000"
  4.         WidthRequest="1000"
  5.         CornerRadius="500">
  6. </BoxView>

取消发送和语音转文字区域是一个圆形区域，我们用一个正常大小的圆形来实现。

PitContentLayout区域整体代码如下

  1. <Grid x:Name="PitContentLayout"
  2.         Opacity="1">
  3.     <Grid.RowDefinitions>
  4.         <RowDefinition Height="1*" />
  5.         <RowDefinition Height="1*" />
  6.     </Grid.RowDefinitions>
  7.     <Grid.ColumnDefinitions>
  8.         <ColumnDefinition Width="1*" />
  9.         <ColumnDefinition Width="1*" />
  10.     </Grid.ColumnDefinitions>
  11.     <controls1:PitGrid x:Name="CancelPit"
  12.                         TranslationX="-40"
  14.                         PitName="CancelPit">
  16.         <BoxView x:Name="CancelBox"
  17.                     HeightRequest="80"
  18.                     WidthRequest="80"
  19.                     CornerRadius="50"
  20.                     Margin="7.5"
  21.                     Color="{StaticResource PhoneContrastBackgroundBrush}"
  22.                     VerticalOptions="CenterAndExpand"
  23.                     HorizontalOptions="CenterAndExpand"></BoxView>
  24.         <Label   x:Name="CancelLabel"
  25.                     TextColor="{StaticResource PhoneContrastForegroundBrush}"
  26.                     FontFamily="FontAwesome"
  27.                     FontSize="28"
  28.                     Rotation="-10"
  29.                     HorizontalOptions="CenterAndExpand"
  30.                     Margin="0"></Label>
  32.     </controls1:PitGrid>
  33.     <controls1:PitGrid x:Name="TransliterationPit"
  34.                         PitName="TransliterationPit"
  35.                         TranslationX="40"
  36.                         Grid.Column="1">
  38.         <BoxView x:Name="TransliterationBox"
  39.                     HeightRequest="80"
  40.                     WidthRequest="80"
  41.                     CornerRadius="50"
  42.                     Margin="7.5"
  43.                     Color="{StaticResource PhoneContrastBackgroundBrush}"
  44.                     VerticalOptions="CenterAndExpand"
  45.                     HorizontalOptions="CenterAndExpand"></BoxView>
  46.         <Label  x:Name="TransliterationLabel"
  47.                 TextColor="{StaticResource PhoneContrastForegroundBrush}"
  48.                 FontSize="28"
  49.                 Text="文"
  50.                 Rotation="10"
  51.                 HorizontalOptions="CenterAndExpand"
  52.                 Margin="0"></Label>
  54.     </controls1:PitGrid>
  55.     <controls1:PitGrid x:Name="SendPit"
  56.                         PitName="SendPit"
  57.                         Grid.ColumnSpan="2"
  58.                         Grid.Row="1">
  60.         <BoxView TranslationY="450"
  61.                     x:Name="SendBox"
  62.                     HeightRequest="1000"
  63.                     WidthRequest="1000"
  64.                     CornerRadius="500"
  65.                     Margin="7.5"
  66.                     Color="{StaticResource PhoneContrastBackgroundBrush}"
  67.                     VerticalOptions="CenterAndExpand"
  68.                     HorizontalOptions="CenterAndExpand"></BoxView>
  69.         <Label x:Name="SendLabel"
  70.                 TranslationY="30"
  71.                 FontSize="28"
  72.                 Rotation="45"
  73.                 TextColor="{StaticResource PhoneContrastForegroundBrush}"
  74.                 FontFamily="FontAwesome"
  75.                 HorizontalOptions="CenterAndExpand"
  76.                 Margin="0"></Label>
  78.     </controls1:PitGrid>
  80. </Grid>

效果如下

创建手势控件

创建一个手势控件。他包裹的内容。是一个带有按住说话的按钮。

  1. <controls1:PanContainer BackgroundColor="Transparent"
  2.         x:Name="DefaultPanContainer"
  3.         OnTapped="DefaultPanContainer_OnOnTapped"
  4.         AutoAdsorption="False"
  5.         OnfinishedChoise="DefaultPanContainer_OnOnfinishedChoise">
  7.     <Grid PropertyChanged="BindableObject_OnPropertyChanged"
  8.             VerticalOptions="Start"
  9.             HorizontalOptions="Start">
  11.         <BoxView HeightRequest="80"
  12.                     WidthRequest="250"
  13.                     Margin="7.5"
  14.                     Color="{StaticResource PhoneContrastBackgroundBrush}"></BoxView>
  15.         <Label  x:Name="PauseLabel"
  16.                 HorizontalOptions="CenterAndExpand"
  17.                 FontSize="28"
  18.                 TextColor="{StaticResource PhoneForegroundBrush}"
  19.                 Text="按住 说话"
  20.                 Margin="0"></Label>
  22.     </Grid>
  24. </controls1:PanContainer>

此时应该是可以拖动，并且在拖拽开始，进入pit，离开pit，释放时，分别触发Start，In，Out，Over四个状态。

但我们希望在拖拽时隐藏这个按钮，这将在创建动画章节将介绍。

创建TalkBox

创建一个圆角矩形，用来显示正在说话的动画。

  1. <Grid Grid.Row="1"
  2.             Opacity="1"
  3.             x:Name="TalkBoxLayout">
  4.         <BoxView x:Name="TalkBox"
  5.                     HeightRequest="80"
  6.                     WidthRequest="200"
  7.                     CornerRadius="20"
  8.                     Margin="7.5"
  9.                     Color="{StaticResource PhoneAccentBrush}"
  10.                     VerticalOptions="CenterAndExpand"
  11.                     HorizontalOptions="CenterAndExpand"></BoxView>
  13.         <controls:PlayingMotionView   HorizontalOptions="CenterAndExpand"
  14.                                         x:Name="MotionView"
  15.                                         Margin="0"></controls:PlayingMotionView>
  17.     </Grid>
  18. </Grid>

效果如下

创建动画

拖拽物动画

在拖拽时我们希望可以隐藏拖拽物，设置 PanScale和PanScaleAnimationLength属性为0，代码如下：

  1. <controls1:PanContainer BackgroundColor="Transparent"
  2.         x:Name="DefaultPanContainer"
  3.         OnTapped="DefaultPanContainer_OnOnTapped"
  4.         AutoAdsorption="False"
  5.         PanScale="0.0"
  6.         PanScaleAnimationLength="0">

按钮激活动画

Codebeind代码中，配置Active和DeActive方法，用于激活和取消激活功能区域按钮的样式。

激活时，对应功能区域按钮背景颜色变为白色，字体颜色变为黑色，并且放大到1.2倍。

取消激活时，恢复到原来的样式。

代码如下

  3. private void Active(BoxView currentContent, Label text, Color toColor, Color txtToColor, double scaleTo = 1.2)
  4. {
  5.     currentContent.AbortAnimation("ActivateFunctionAnimations");
  6.     var parentAnimation = new Animation();
  8.     var txtFromColor = text.TextColor;
  10.     var animation2 = new Animation(t => text.TextColor = GetColor(t, txtFromColor, txtToColor), 0, 1, Easing.SpringOut);
  12.     var fromColor = currentContent.Color;
  14.     var animation4 = new Animation(t => currentContent.Color = GetColor(t, fromColor, toColor), 0, 1, Easing.SpringOut);
  15.     var animation5 = new Animation(v => currentContent.Scale = v, currentContent.Scale, scaleTo);
  17.     parentAnimation.Add(0, 1, animation2);
  18.     parentAnimation.Add(0, 1, animation4);
  19.     parentAnimation.Add(0, 1, animation5);
  21.     parentAnimation.Commit(this, "ActivateFunctionAnimations", 16, 300);
  22. }
  24. private void DeActive(BoxView currentContent, Label text)
  25. {
  26.     currentContent.AbortAnimation("DeactivateFunctionAnimations");
  27.     var parentAnimation = new Animation();
  29.     var txtFromColor = text.TextColor;
  30.     var txtToColor = (Color)Application.Current.Resources["PhoneContrastForegroundBrush"];
  32.     var animation2 = new Animation(t => text.TextColor = GetColor(t, txtFromColor, txtToColor), 0, 1, Easing.SpringOut);
  34.     var fromColor = currentContent.Color;
  35.     var toColor = (Color)Application.Current.Resources["PhoneContrastBackgroundBrush"];
  37.     var animation4 = new Animation(t => currentContent.Color = GetColor(t, fromColor, toColor), 0, 1, Easing.SpringOut);
  38.     var animation5 = new Animation(v => currentContent.Scale = v, currentContent.Scale, 1.0);
  40.     parentAnimation.Add(0, 1, animation2);
  41.     parentAnimation.Add(0, 1, animation4);
  42.     parentAnimation.Add(0, 1, animation5);
  44.     parentAnimation.Commit(this, "DeactivateFunctionAnimations", 16, 300);
  45. }

在拖拽进入pit的事件中设置激活状态，在拖拽离开pit的事件中设置取消激活状态。


  2. case PanType.Out:
  3.     switch (args.CurrentPit?.PitName)
  4.     {
  5.         case "CancelPit":
  6.             DeActive(this.CancelBox, this.CancelLabel);
  7.             break;
  9.         case "SendPit":
  10.             DeActive(this.SendBox, this.SendLabel);
  11.             break;
  13.         case "TransliterationPit":
  14.             DeActive(this.TransliterationBox, this.TransliterationLabel);
  15.             break;
  17.         default:
  18.             break;
  19.     }
  20.     break;
  21. case PanType.In:
  22.     var parentAnimation = new Animation();
  24.     Color toColor = default;
  25.     double translationX = default;
  26.     double width = default;
  27.     switch (args.CurrentPit?.PitName)
  28.     {
  29.         case "CancelPit":
  30.             Active(this.CancelBox, this.CancelLabel, Colors.White, Colors.Black);
  32.             this.TalkBox.AbortAnimation("TalkBoxAnimations");
  34.             break;
  36.         case "SendPit":
  37.             Active(this.SendBox, this.SendLabel, Colors.Gray, Colors.Black, 1.0);
  38.             break;
  40.         case "TransliterationPit":
  41.             Active(this.TransliterationBox, this.TransliterationLabel, Colors.White, Colors.Black);
  42.             break;
  44.         default:
  45.             break;
  46.     }

TalkBox动画

创建GetColor方法，使用插值法用于获取渐变过程中获取当前进度的颜色

  1.     private Color GetColor(double t, Color fromColor, Color toColor)
  2.     {
  3.         return Color.FromRgba(fromColor.Red + t * (toColor.Red - fromColor.Red),
  4.                            fromColor.Green + t * (toColor.Green - fromColor.Green),
  5.                            fromColor.Blue + t * (toColor.Blue - fromColor.Blue),
  6.                            fromColor.Alpha + t * (toColor.Alpha - fromColor.Alpha));
  7.     }

在进入功能区域时，TalkBox的颜色，偏移量和宽度都会发生变化，创建一个复合动画TalkBoxAnimations，用于触发TalkBox的动画效果。

  1. this.TalkBox.AbortAnimation("TalkBoxAnimations");
  3. var fromColor = this.TalkBox.Color;
  5. var animation2 = new Animation(t => this.TalkBox.Color = GetColor(t, fromColor, toColor), 0, 1, Easing.SpringOut);
  6. var animation4 = new Animation(v => this.TalkBoxLayout.TranslationX = v, this.TalkBoxLayout.TranslationX, translationX);
  7. var animation5 = new Animation(v => this.TalkBox.WidthRequest = v, this.TalkBox.Width, width);
  9. parentAnimation.Add(0, 1, animation2);
  10. parentAnimation.Add(0, 1, animation4);
  11. parentAnimation.Add(0, 1, animation5);
  13. parentAnimation.Commit(this, "TalkBoxAnimations", 16, 300);

最终效果如下：

Layout动画

创建一个用于显示功能区域和TalkBox的渐变动画，用于在拖拽开始和结束时，显示和隐藏这两个控件。

  1. private void ShowLayout(double opacity = 1)
  2. {
  3.     this.PitContentLayout.FadeTo(opacity);
  4.     this.TalkBoxLayout.FadeTo(opacity);
  5. }
  1. case PanType.Over:
  2.     ShowLayout(0);
  3.     break;
  4. case PanType.Start:
  5.     ShowLayout();
  6.     break;

项目地址

Github:maui-samples

[MAUI]模仿微信“按住-说话”的交互实现的更多相关文章

  1. 一个模仿微信群聊的H5页面

    开始 上半年小米Max发布的时候,做了一个在朋友圈传播的模仿微信的群聊界面H5页面:一群公司的大咖在群里聊小米Max,用户可以向大咖们提问,以此了解产品. 页面的主体是群聊对话,同时在对话中包含了很多 ...

  2. 自定义控件(模仿微信ToggleButton控件)

    弄过android开发的都知道,系统有一个默认的ToggleButton,但很多人都觉得他很难看,当然也包括我.如果你感觉他不难看,那你就继续使用系统的吧,这篇文章对你来说是多余的了. 今天来写一个模 ...

  3. （转）ZXing生成二维码和带logo的二维码，模仿微信生成二维码效果

    场景:移动支付需要对二维码的生成与部署有所了解,掌握目前主流的二维码生成技术. 1 ZXing 生成二维码 首先说下,QRCode是日本人开发的,ZXing是google开发,barcode4j也是老 ...

  4. Android Studio精彩案例(三)《模仿微信ViewPage+Fragment实现方式二》

    转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 写在前面的话:此专栏是博主在工作之余所写,每一篇文章尽可能写的思路清晰一些,属于博主的"精华"部分,不同于以往专栏 ...

  5. .Net Webapi SignalR与微信小程序的交互

    .Net Webapi SignalR与微信小程序的交互 一.SignalR与Webapi 1.SignalR的安装: Signalr与跨域仅需要安装两个开源库 Microsoft.Owin.Cors ...

  6. 微信网页悬浮窗交互效果的web实现

    一.微信的悬浮窗交互效果 微信更新后,发现多了个悬浮窗功能.公众号阅读,网页浏览回退后默认会出现.再点击,可以回到刚才阅读的地方.于是,再也不会遇到回复老婆的信息,再切换回来重新找刚才阅读东西的麻烦了 ...

  7. css模仿微信弹出菜单

      css模仿微信弹出菜单 效果图: html: <div class="action-sheet-backdrop"> <div class="act ...

  8. js模仿微信语音播放的小功能

    自己写的一个模仿微信语音播放的小功能,实现的主要功能是:点击播放,点击暂停,播放切换,,,  代码如下: <!DOCTYPE html> <html lang="en&qu ...

  9. Android 模仿微信启动动画（转）

    本文内容 环境 项目结构 演示微信启动动画 本文演示微信启动动画.请点击此处下载,自行调试. 顺便抱怨一下,实践性(与研究性质的相对)技术博的“七宗罪”: 第一宗罪,错字连篇,逻辑不清: 第二宗罪,文 ...

  10. wing带你玩转自定义view系列（3）模仿微信下拉眼睛

    发现了爱神的自定义view系列,我只想说一个字:凸(艹皿艹 ) !!相见恨晚啊,早看到就不会走这么多弯路了 另外相比之下我这完全是小儿科..所以不说了,这篇是本系列完结篇....我要从零开始跟随爱哥脚 ...

随机推荐

  1. C++ vector的emplace_back函数

    C++ STL的vector相信大家一定都知道,它是一个一般用来当做可变长度列表的类.在C++11之前,一般给vector插入新元素用得都是push_back函数,比如下面这样: std::vecto ...

  2. 三种遍历的方法（map和forEach的区别）

    一. for循环 arr[index]可以改变原数组 二. forEach方法 forEach方法的返回值是一个undefined: 2. 在循环体内改变item的值不会影响原数组,而是只在循环体内生 ...

  3. python基础学习——数据容器

    1.数据容器相当于C的数组 有list,tuple(元组),str,set(集合),dict五种数据容器 2.list(列表) 列表中可存在不同的数据类型,可嵌套 #反向索引 name_list = ...

  4. VMware安装Rocky Linux8服务器系统并执行优化，包括修改安装镜像源、ssh免密等等

    1. https://blog.csdn.net/DCTANT/article/details/125430461?utm_medium=distribute.pc_relevant.none-tas ...

  5. Log4j日志框架使用

    Log4j是Apache下的一款开源的日志框架,能够满足我们在项目中对于日志记录的需求.一般来讲,在项目中,我们会结合slf4j和log4j一起使用.Log4j提供了简单的API调用,强大的日志格式定 ...

  6. Shiro权限管理框架-@RequiresPermissions 注解 使用问题记录

    背景: 需要在springboot项目里面用到shiro的权限管理,Shiro访问控制流程:先shiro认证(登录时调用) 然后 shiro授权,但是项目里面登录的功能用的公司统一的系统,所以需要&q ...

  7. .NET中委托性能的演变

    .NET中的委托 .NET中的委托是一项重要功能,可以实现间接方法调用和函数式编程. 自.NET Framework 1.0起,委托在.NET中就支持多播(multicast)功能.通过多播,我们可以 ...

  8. SpringCloud微服务实战——搭建企业级开发框架（五十一）：微服务安全加固—自定义Gateway拦截器实现防止SQL注入/XSS攻击

      SQL注入是常见的系统安全问题之一,用户通过特定方式向系统发送SQL脚本,可直接自定义操作系统数据库,如果系统没有对SQL注入进行拦截,那么用户甚至可以直接对数据库进行增删改查等操作.   XSS ...

  9. 499div2-E Border :裴蜀定理

    这个定理就像类似学扩展欧几里得判断是否有解的条件,当时是ax+by = c:仅当c = k*gcd(a,b)时有解,其实也就是只要是公约数的倍数就行. 而裴蜀定理是多个未知量x1*a1+x2*a2+. ...

  10. 【读书笔记】Nice Families Of GF

    目录 Nice Families Of GF rational rational algebraic D-finite总览 下定义 逻辑关系 例子 更多的例子和判别法 运算是否有性质? 运算是否有性质 ...