[MAUI]模仿微信“按住-說話”的互動實現

林曉lx發表於2023-04-15

.NET MAUI 跨平臺框架包含了識別平移手勢的功能，在之前的博文[MAUI 專案實戰] 手勢控制音樂播放器（二）：手勢互動中利用此功能實現了pan-pit拖拽系統。

簡單來說就是拖拽物(pan)體到坑(pit)中，手勢容器控制元件PanContainer描述了pan運動和pit位置的關係，並在手勢運動中產生一系列訊息事件。

今天使用這個控制元件，做一個模仿微信“按住-說話”的小功能，最終效果如下：

在這裡插入圖片描述

使用.NET MAU實現跨平臺支援，本專案可執行於Android、iOS平臺。

建立頁面佈局

新建.NET MAUI專案，命名HoldAndSpeak
MainPage.xaml中建立一個PitContentLayoutGrid容器，並對Grid容器進行如下佈局：

在手機螢幕的底部設定兩行兩列的佈局：

第一行第一列，對應取消傳送手勢區域，
第一行第二列，對應語音轉文字手勢區域，
第二行獨佔兩列，對應傳送手勢區域。

佈局如下圖所示

<Grid x:Name="PitContentLayout"
        Opacity="1">
    <Grid.RowDefinitions>
        <RowDefinition Height="1*" />
        <RowDefinition Height="1*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>
</Grid>

建立三個PitGrid控制元件，並對這三個功能區域的PitGrid控制元件命名，CancelPit、TransliterationPit，分別對應了取消傳送、語音轉文字、傳送。

為每個PitGrid控制元件新增內容：

傳送區域是一個底部弧形區域，我們用一個巨大的圓形+Y軸方向的偏移，透過只保留螢幕底部往上的一部分圓形區域來實現底部弧形區域的效果，程式碼如下：

<BoxView TranslationY="450"
        x:Name="SendBox"
        HeightRequest="1000"
        WidthRequest="1000"
        CornerRadius="500">
</BoxView>

取消傳送和語音轉文字區域是一個圓形區域，我們用一個正常大小的圓形來實現。

PitContentLayout區域整體程式碼如下

<Grid x:Name="PitContentLayout"
        Opacity="1">
    <Grid.RowDefinitions>
        <RowDefinition Height="1*" />
        <RowDefinition Height="1*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>
    <controls1:PitGrid x:Name="CancelPit"
                        TranslationX="-40"
                        
                        PitName="CancelPit">

        <BoxView x:Name="CancelBox"
                    HeightRequest="80"
                    WidthRequest="80"
                    CornerRadius="50"
                    Margin="7.5"
                    Color="{StaticResource PhoneContrastBackgroundBrush}"
                    VerticalOptions="CenterAndExpand"
                    HorizontalOptions="CenterAndExpand"></BoxView>
        <Label   x:Name="CancelLabel"
                    TextColor="{StaticResource PhoneContrastForegroundBrush}"
                    FontFamily="FontAwesome"
                    FontSize="28"
                    Rotation="-10"
                    HorizontalOptions="CenterAndExpand"
                    Margin="0"></Label>


    </controls1:PitGrid>
    <controls1:PitGrid x:Name="TransliterationPit"
                        PitName="TransliterationPit"
                        TranslationX="40"
                        Grid.Column="1">

        <BoxView x:Name="TransliterationBox"
                    HeightRequest="80"
                    WidthRequest="80"
                    CornerRadius="50"
                    Margin="7.5"
                    Color="{StaticResource PhoneContrastBackgroundBrush}"
                    VerticalOptions="CenterAndExpand"
                    HorizontalOptions="CenterAndExpand"></BoxView>
        <Label  x:Name="TransliterationLabel"
                TextColor="{StaticResource PhoneContrastForegroundBrush}"
                FontSize="28"
                Text="文"
                Rotation="10"
                HorizontalOptions="CenterAndExpand"
                Margin="0"></Label>


    </controls1:PitGrid>
    <controls1:PitGrid x:Name="SendPit"
                        PitName="SendPit"
                        Grid.ColumnSpan="2"
                        Grid.Row="1">

        <BoxView TranslationY="450"
                    x:Name="SendBox"
                    HeightRequest="1000"
                    WidthRequest="1000"
                    CornerRadius="500"
                    Margin="7.5"
                    Color="{StaticResource PhoneContrastBackgroundBrush}"
                    VerticalOptions="CenterAndExpand"
                    HorizontalOptions="CenterAndExpand"></BoxView>
        <Label x:Name="SendLabel"
                TranslationY="30"
                FontSize="28"
                Rotation="45"
                TextColor="{StaticResource PhoneContrastForegroundBrush}"
                FontFamily="FontAwesome"
                HorizontalOptions="CenterAndExpand"
                Margin="0"></Label>


    </controls1:PitGrid>

</Grid>

效果如下

在這裡插入圖片描述

建立手勢控制元件

建立一個手勢控制元件。他包裹的內容。是一個帶有按住說話的按鈕。

在這裡插入圖片描述

<controls1:PanContainer BackgroundColor="Transparent"
        x:Name="DefaultPanContainer"
        OnTapped="DefaultPanContainer_OnOnTapped"
        AutoAdsorption="False"
        OnfinishedChoise="DefaultPanContainer_OnOnfinishedChoise">

    <Grid PropertyChanged="BindableObject_OnPropertyChanged"
            VerticalOptions="Start"
            HorizontalOptions="Start">

        <BoxView HeightRequest="80"
                    WidthRequest="250"
                    Margin="7.5"
                    Color="{StaticResource PhoneContrastBackgroundBrush}"></BoxView>
        <Label  x:Name="PauseLabel"
                HorizontalOptions="CenterAndExpand"
                FontSize="28"
                TextColor="{StaticResource PhoneForegroundBrush}"
                Text="按住 說話"
                Margin="0"></Label>

    </Grid>


</controls1:PanContainer>

此時應該是可以拖動，並且在拖拽開始，進入pit，離開pit，釋放時，分別觸發Start，In，Out，Over四個狀態。

在這裡插入圖片描述

但我們希望在拖拽時隱藏這個按鈕，這將在建立動畫章節將介紹。

建立TalkBox

建立一個圓角矩形，用來顯示正在說話的動畫。

<Grid Grid.Row="1"
            Opacity="1"
            x:Name="TalkBoxLayout">
        <BoxView x:Name="TalkBox"
                    HeightRequest="80"
                    WidthRequest="200"
                    CornerRadius="20"
                    Margin="7.5"
                    Color="{StaticResource PhoneAccentBrush}"
                    VerticalOptions="CenterAndExpand"
                    HorizontalOptions="CenterAndExpand"></BoxView>

        <controls:PlayingMotionView   HorizontalOptions="CenterAndExpand"
                                        x:Name="MotionView"
                                        Margin="0"></controls:PlayingMotionView>

    </Grid>
</Grid>

效果如下

在這裡插入圖片描述

建立動畫

拖拽物動畫

在拖拽時我們希望可以隱藏拖拽物，設定 PanScale和PanScaleAnimationLength屬性為0，程式碼如下：

<controls1:PanContainer BackgroundColor="Transparent"
        x:Name="DefaultPanContainer"
        OnTapped="DefaultPanContainer_OnOnTapped"
        AutoAdsorption="False"
        PanScale="0.0"
        PanScaleAnimationLength="0">

按鈕啟用動畫

Codebeind程式碼中，配置Active和DeActive方法，用於啟用和取消啟用功能區域按鈕的樣式。

啟用時，對應功能區域按鈕背景顏色變為白色，字型顏色變為黑色，並且放大到1.2倍。
取消啟用時，恢復到原來的樣式。

在這裡插入圖片描述

程式碼如下



private void Active(BoxView currentContent, Label text, Color toColor, Color txtToColor, double scaleTo = 1.2)
{
    currentContent.AbortAnimation("ActivateFunctionAnimations");
    var parentAnimation = new Animation();


    var txtFromColor = text.TextColor;

    var animation2 = new Animation(t => text.TextColor = GetColor(t, txtFromColor, txtToColor), 0, 1, Easing.SpringOut);



    var fromColor = currentContent.Color;

    var animation4 = new Animation(t => currentContent.Color = GetColor(t, fromColor, toColor), 0, 1, Easing.SpringOut);
    var animation5 = new Animation(v => currentContent.Scale = v, currentContent.Scale, scaleTo);


    parentAnimation.Add(0, 1, animation2);
    parentAnimation.Add(0, 1, animation4);
    parentAnimation.Add(0, 1, animation5);

    parentAnimation.Commit(this, "ActivateFunctionAnimations", 16, 300);
}



private void DeActive(BoxView currentContent, Label text)
{
    currentContent.AbortAnimation("DeactivateFunctionAnimations");
    var parentAnimation = new Animation();


    var txtFromColor = text.TextColor;
    var txtToColor = (Color)Application.Current.Resources["PhoneContrastForegroundBrush"];

    var animation2 = new Animation(t => text.TextColor = GetColor(t, txtFromColor, txtToColor), 0, 1, Easing.SpringOut);



    var fromColor = currentContent.Color;
    var toColor = (Color)Application.Current.Resources["PhoneContrastBackgroundBrush"];

    var animation4 = new Animation(t => currentContent.Color = GetColor(t, fromColor, toColor), 0, 1, Easing.SpringOut);
    var animation5 = new Animation(v => currentContent.Scale = v, currentContent.Scale, 1.0);


    parentAnimation.Add(0, 1, animation2);
    parentAnimation.Add(0, 1, animation4);
    parentAnimation.Add(0, 1, animation5);

    parentAnimation.Commit(this, "DeactivateFunctionAnimations", 16, 300);
}

在拖拽進入pit的事件中設定啟用狀態，在拖拽離開pit的事件中設定取消啟用狀態。


case PanType.Out:
    switch (args.CurrentPit?.PitName)
    {
        case "CancelPit":
            DeActive(this.CancelBox, this.CancelLabel);
            break;

        case "SendPit":
            DeActive(this.SendBox, this.SendLabel);
            break;

        case "TransliterationPit":
            DeActive(this.TransliterationBox, this.TransliterationLabel);
            break;

        default:
            break;
    }
    break;
case PanType.In:
    var parentAnimation = new Animation();

    Color toColor = default;
    double translationX = default;
    double width = default;
    switch (args.CurrentPit?.PitName)
    {
        case "CancelPit":
            Active(this.CancelBox, this.CancelLabel, Colors.White, Colors.Black);

            this.TalkBox.AbortAnimation("TalkBoxAnimations");

            break;

        case "SendPit":
            Active(this.SendBox, this.SendLabel, Colors.Gray, Colors.Black, 1.0);
            break;

        case "TransliterationPit":
            Active(this.TransliterationBox, this.TransliterationLabel, Colors.White, Colors.Black);
            break;

        default:
            break;
    }

在這裡插入圖片描述

TalkBox動畫

建立GetColor方法，使用插值法用於獲取漸變過程中獲取當前進度的顏色

    private Color GetColor(double t, Color fromColor, Color toColor)
    {
        return Color.FromRgba(fromColor.Red + t * (toColor.Red - fromColor.Red),
                           fromColor.Green + t * (toColor.Green - fromColor.Green),
                           fromColor.Blue + t * (toColor.Blue - fromColor.Blue),
                           fromColor.Alpha + t * (toColor.Alpha - fromColor.Alpha));
    }

在這裡插入圖片描述

在進入功能區域時，TalkBox的顏色，偏移量和寬度都會發生變化，建立一個複合動畫TalkBoxAnimations，用於觸發TalkBox的動畫效果。

this.TalkBox.AbortAnimation("TalkBoxAnimations");

var fromColor = this.TalkBox.Color;

var animation2 = new Animation(t => this.TalkBox.Color = GetColor(t, fromColor, toColor), 0, 1, Easing.SpringOut);
var animation4 = new Animation(v => this.TalkBoxLayout.TranslationX = v, this.TalkBoxLayout.TranslationX, translationX);
var animation5 = new Animation(v => this.TalkBox.WidthRequest = v, this.TalkBox.Width, width);


parentAnimation.Add(0, 1, animation2);
parentAnimation.Add(0, 1, animation4);
parentAnimation.Add(0, 1, animation5);

parentAnimation.Commit(this, "TalkBoxAnimations", 16, 300);

最終效果如下：

Layout動畫

建立一個用於顯示功能區域和TalkBox的漸變動畫，用於在拖拽開始和結束時，顯示和隱藏這兩個控制元件。

private void ShowLayout(double opacity = 1)
{
    this.PitContentLayout.FadeTo(opacity);
    this.TalkBoxLayout.FadeTo(opacity);
}

case PanType.Over:
    ShowLayout(0);
    break;
case PanType.Start:
    ShowLayout();
    break;

專案地址

Github:maui-samples

[MAUI]模仿iOS多工切換卡片滑動的互動實現
2023-05-02
UIiOS
[MAUI]模仿網易雲音樂黑膠唱片的互動實現
2023-04-25
UI
Android 模仿微信啟動動畫
2014-07-15
Android動畫
說說android端實現Airplay多屏互動（二）
2014-02-13
AndroidAI
[MAUI]實現動態拖拽排序網格
2023-09-18
UI排序
[MAUI]模仿嗶哩嗶哩的一鍵三連
2024-03-25
UI
canvas實現的按住滑鼠拖動能夠繪製文字效果
2017-02-10
Canvas
Vue +WebSocket + WaveSurferJS 實現H5聊天對話互動
2020-10-22
VueWebJSH5
行動電話的實現
2009-07-06
互動投影的幾種實現方式
2022-09-30
Maui Blazor 使用攝像頭實現
2023-01-12
UIBlazor
微信開發實戰（3）—開發者公眾號的互動原理
2016-11-30
Servlet實現、與html的簡單互動
2020-10-08
ServletHTML
企業微信JS-SDK實現會話聊天功能
2020-12-23
JS會話
互動滑軌屏的幾種實現形式
2022-12-29
WebSocket實現多屏互動的分析及方案
2016-01-20
Web
canvas 按住滑鼠拖動繪製文字
2017-02-10
Canvas
模仿微信適配 iPad 的佈局方式
2019-05-10
iPad
CSS 實現搜尋相關互動
2021-11-03
CSS
RecyclerView 之使用 ItemTouchHelper 實現互動動畫
2017-05-05
View動畫
Rust使用Sauron實現Web介面互動
2024-03-25
RustWeb
對話腦屋科技王強：《互動派對》的核心是互動，遊戲直播的機會在互動屬性的延展
2021-11-08
遊戲
深入解讀.NET MAUI音樂播放器專案（三）：介面互動
2023-02-27
UI播放器
細說JDK動態代理的實現原理
2018-11-19
JDK
[MAUI程式設計]介面多型與實現
2023-05-14
UI程式設計多型
如何在微信小程式中實現音視訊通話
2023-04-09
微信小程式
利用es6實現互動的水波特效
2018-12-08
特效
微信小程式API互動的自定義封裝
2021-01-17
微信小程式API封裝
如何在Unity中實現水體互動？
2020-03-23
Unity
Flask 運用Xterm實現互動終端
2023-11-28
Flask
AngularJS中Directive間互動實現合成
2015-12-28
AngularJS
說說Android動態換膚實現原理吧
2020-11-17
Android
大屏報表元件間的聯動互動效果實現方法
2019-11-21
元件
TensorFlow學習之會話Sesstion()和互動會話InterativeSesstion()
2020-04-06
會話
投影互動牆的三大實現形態介紹
2022-12-16
互動塗鴉兒童遊戲主要的實現形式介紹
2021-12-06
遊戲
Vue 3現實生活中的過渡和微互動
2023-04-05
Vue
科技互動沙盤實現傳統與科技的碰撞
2023-03-03

[MAUI]模仿微信“按住-說話”的互動實現

建立頁面佈局

建立手勢控制元件

建立TalkBox

建立動畫

拖拽物動畫

按鈕啟用動畫

TalkBox動畫

Layout動畫

專案地址

相關文章