[MAUI]模仿网易云音乐黑胶唱片的交互实现

news2024/11/24 7:31:21

用过网易云音乐App的同学应该都比较熟悉它播放界面。

这是一个良好的交互设计，留声机的界面隐喻准确地向人们传达产品概念和使用方法：当手指左右滑动时，便模拟了更换唱盘从而导向切换歌曲的交互功能。

今天在 .NET MAUI 中我们来实现这个交互效果，先来看看效果：

在这里插入图片描述

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

创建页面布局

项目模拟了网易云音乐的播放主界面，可播放本地音乐文件。使用MatoMusic.Core作为播放内核，此项目对其将不再赘述。请阅读此博文[MAUI 项目实战] 音乐播放器（二）：播放内核

新建.NET MAUI项目，命名CloudMusicGroove,项目引用MatoMusic.Core。

将界面图片资源文件拷贝到项目\Resources\Images中，这些界面图片资源可通过解包官方apk的方式轻松获取。

在这里插入图片描述

将他们包含在MauiImage资源清单中。

<MauiImage Include="Resources\Images\*" />

创建页面的静态布局，布局如下图所示

在这里插入图片描述

其中唱盘元素是一个300 × 300的圆形，专辑封面为200 × 200的圆形，图片的圆形区域是通过裁剪实现的，代码如下：

<Grid 
        VerticalOptions="Start"
        HorizontalOptions="Start">
    <Image Source="ic_disc.png"
            WidthRequest="300"
            HeightRequest="300" />

    <Image HeightRequest="200"
            WidthRequest="200"
            x:Name="AlbumArtImage"
            Margin="0"
            Source="{Binding  CurrentMusic.AlbumArt}"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand"
            Aspect="AspectFill">

        <Image.Clip>
            <RoundRectangleGeometry  CornerRadius="125"
                                        Rect="0,0,200,200" />
        </Image.Clip>
    </Image>

</Grid>

设置留声机唱针元素，代码如下：

<Image WidthRequest="100"
    HeightRequest="167"
    HorizontalOptions="Center"
    VerticalOptions="Start"
    Margin="70,-50,0,0"
    Source="ic_needle.png"
    x:Name="AlbumNeedle" />

创建PitContentLayout区域，这个区域是一个3 × 2的网格布局，用来放置三个功能区域

在PitContentLayout中创建三个PitGrid控件，并对这三个功能区域的PitGrid控件命名，LeftPit、MiddlePit，RightPit，代码如下：

<Grid  x:Name="PitContentLayout"
        Opacity="1"
        BindingContext="{Binding CurrentMusicRelatedViewModel}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"></ColumnDefinition>
        <ColumnDefinition Width="2*"></ColumnDefinition>
        <ColumnDefinition Width="1*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <controls1:PitGrid x:Name="LeftPit"
                        Background="pink"
                        PitName="LeftPit">
    </controls1:PitGrid>
    <controls1:PitGrid Grid.Column="1"
                        x:Name="MiddlePit"
                        Background="azure"
                        
                        PitName="MiddlePit">
    </controls1:PitGrid>
    <controls1:PitGrid Grid.Column="2"
                        x:Name="RightPit"
                        Background="lightyellow"
                        PitName="RightPit">

    </controls1:PitGrid>


</Grid>

在这里插入图片描述

创建手势控件

手势控件，或称为手势容器控件，它来对拖拽物进行包装，以赋予拖拽物响应平移手势的能力。

创建一个容器控件HorizontalPanContainer，控件包含的PanGestureRecognizer提供了当手指在屏幕移动这一过程的描述

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiSample.Controls.HorizontalPanContainer">
    <ContentView.GestureRecognizers>
        <PanGestureRecognizer PanUpdated="PanGestureRecognizer_OnPanUpdated"></PanGestureRecognizer>
        <TapGestureRecognizer Tapped="TapGestureRecognizer_OnTapped"></TapGestureRecognizer>

    </ContentView.GestureRecognizers>
</ContentView>

创建一个手势控件。他将留声机唱盘区域包裹起来。这样当手指在唱盘区域滑动时，就可以触发平移手势事件。

<controls:HorizontalPanContainer Background="Transparent"
        x:Name="DefaultPanContainer"
        OnTapped="DefaultPanContainer_OnOnTapped"
        OnfinishedChoise="DefaultPanContainer_OnOnfinishedChoise">
    <controls:HorizontalPanContainer.Content>
        <Grid PropertyChanged="BindableObject_OnPropertyChanged"
                VerticalOptions="Start"
                HorizontalOptions="Start">
            <Image Source="ic_disc.png"
                    WidthRequest="300"
                    HeightRequest="300" />

            <Image HeightRequest="200"
                    WidthRequest="200"
                    x:Name="AlbumArtImage"
                    Margin="0"
                    Source="{Binding  CurrentMusic.AlbumArt}"
                    VerticalOptions="CenterAndExpand"
                    HorizontalOptions="CenterAndExpand"
                    Aspect="AspectFill">

                <Image.Clip>
                    <RoundRectangleGeometry  CornerRadius="125"
                                                Rect="0,0,200,200" />
                </Image.Clip>
            </Image>

        </Grid>

    </controls:HorizontalPanContainer.Content>
</controls:HorizontalPanContainer>

在这里插入图片描述

创建影子控件

影子控件用于滑动唱盘时，显示上一曲、下一曲的专辑封面。

在左右滑动的全程中，唱盘的中心点与相邻唱盘的中心点距离，应为屏幕宽度。如下图所示

在这里插入图片描述

唱盘与唱盘的距离应是

创建影子控件，这个控件将随拖拽物的移动而跟随移动，当然我们只需要保持X方向的移动即可。

在NowPlayingPage中的HorizontalPanContainer相邻容器视图中创建影子控件，代码如下：

<Grid TranslationX="{Binding Source={x:Reference  DefaultPanContainer} ,Path=Content.TranslationX}">
    <Image Source="ic_disc.png"
            WidthRequest="300"
            HeightRequest="300" />

    <Image HeightRequest="200"
            WidthRequest="200"
            Margin="0"
            Source="{Binding  PreviewMusic.AlbumArt}"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand"
            Aspect="AspectFill">

        <Image.Clip>
            <RoundRectangleGeometry  CornerRadius="125"
                                        Rect="0,0,200,200" />
        </Image.Clip>
    </Image>

</Grid>

我们将这个影子控件的TranslationX属性将绑定到拖拽物的TranslationX属性上，初步效果如下

在这里插入图片描述

拖拽区域需要两个影子控件，分别显示上一曲和下一曲的专辑封面。

我们需要将影子控件的偏移量与屏幕宽度作匹配，我们用转换器来实现这个功能。

创建CalcValueConverter.cs文件，代码如下：

public class CalcValueConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var d = (double)value;
        double compensation;
        if (double.Parse((string)parameter)>=0)
        {
            compensation=((App.Current as App).PanContainerWidth+300)/2;
        }
        else
        {
            compensation=-1.5*(App.Current as App).PanContainerWidth+300/2;
        }
        return d+compensation;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }

}

将CalcValueConverter添加至资源字典中，

<converter:CalcValueConverter x:Key="CalcValueConverter"></converter:CalcValueConverter>

对影子控件的属性绑定设置转换器，并设置转换器参数，代码如下：

左影子控件（上一曲专辑唱盘）

TranslationX="{Binding Source={x:Reference  DefaultPanContainer} ,Path=Content.TranslationX,Converter={StaticResource CalcValueConverter},ConverterParameter=-1}"

右影子控件（下一曲专辑唱盘）

TranslationX="{Binding Source={x:Reference  DefaultPanContainer} ,Path=Content.TranslationX,Converter={StaticResource CalcValueConverter},ConverterParameter=-1}"

在这里插入图片描述

唱盘拨动交互

当然我们仅希望拖拽物仅在水平方向上响应手势

在HorizontalPanContainer中，注册PanGestureRecognizer的响应事件PanGestureRecognizer_OnPanUpdated，在GestureStatus.Running添加代码如下：

private async void PanGestureRecognizer_OnPanUpdated(object sender, PanUpdatedEventArgs e)
{
    var isInPit = false;
    switch (e.StatusType)
    {
        case GestureStatus.Running:
            var translationX = PositionX + e.TotalX;
            var translationY = PositionY;

        ...
    }
}

结合上一小节写的三个PitGrid，此时拖拽唱盘，并且在拖拽开始，进入pit，离开pit，释放时，分别触发Start，In，Out，Over四个状态事件。

响应状态事件的有效区域如下

在这里插入图片描述

创建检测唱盘中心点是否在有效区域的方法，

当平移方向为向右时，唱盘中心点的X坐标应大于右pit区域的起始X坐标；
当平移方向为向左时，唱盘中心点的X坐标应小于左pit区域的结束X坐标。

在GestureStatus.Running添加代码如下：


foreach (var item in PitLayout)
{
    var pitRegion = new Region(item.X, item.X + item.Width, item.Y, item.Y + item.Height, item.PitName);
    var isXin = (e.TotalX>0 && translationX >= pitRegion.StartX - Content.Width / 2 && pitRegion.StartX>this.Width/2)||
        (e.TotalX<0 && translationX <= pitRegion.EndX - Content.Width / 2&&pitRegion.EndX<this.Width/2);
    if (isXin)
    {
        isInPit = true;      
    }
    ...
}

在不同的pit中，处理对应的状态事件。

若在手指离开时，唱盘的中心点还在MiddlePit区域范围内，则将唱盘回弹移动到MiddlePit中心点。

若在LeftPit或RightPit区域，则将唱盘移动到LeftPit或RightPit区域中心点。

在这里插入图片描述

此时已经实现了拖拽唱盘的基本功能，但是在释放唱盘时，影子唱盘并没有如预期那样移动到MiddlePit的中心点。

在这里插入图片描述

当命中LeftPit或RightPit区域时，我们希望影子控件移动到MiddlePit中心点。当影子控件移动到位时，替换掉当前的唱盘，成为新的拖拽物。由此可以无限的拨动唱盘实现连续切歌的效果。

当手指释放，唱盘准备向左或右移动时，迅速将影子控件的位置替换成当前唱盘的位置。用当前唱盘的“瞬移”，看起来像唱盘被影子唱盘替换掉了，但是在屏幕中心活动的拖拽物，一直是真正的那个控件。

在GestureStatus.Completed添加代码如下：

case GestureStatus.Completed:
    double destinationX;
    var view = this.CurrentView;

    if (isInPitPre)
    {
        var pitRegion = new Region(view.X, view.X + view.Width, view.Y, view.Y + view.Height, view.PitName);

        var prefix = pitRegion.StartX>this.Width/2 ? 1 : -1;
        destinationX=PositionX+prefix*(App.Current as App).PanContainerWidth;
    }
    else
    {
        destinationX=PositionX;

    }

这样看起来像可以无限地拨动唱盘了

在这里插入图片描述

唱盘和唱针动画

唱盘转动，音乐随之播放，通过将专辑封面图片以20秒每圈的速度旋转来实现唱盘旋转的效果。

在NowPlayingPage中创建一个Animation对象，用于控制唱盘旋转。

private Animation rotateAnimation;

编写启动旋转动画方法StartAlbumArtRotation以及停止动画方法StopAlbumArtRotation，代码如下：

private void StartAlbumArtRotation()
{
    this.AlbumArtImage.AbortAnimation("AlbumArtImageAnimation");
    rotateAnimation = new Animation(v => this.AlbumArtImage.Rotation = v, this.AlbumArtImage.Rotation, this.AlbumArtImage.Rotation+ 360);
    rotateAnimation.Commit(this, "AlbumArtImageAnimation", 16, 20*1000, repeat: () => true);
}

private void StopAlbumArtRotation()
{
    this.AlbumArtImage.CancelAnimations();
    if (this.rotateAnimation!=null)
    {
        this.rotateAnimation.Dispose();
    }

}

效果如下：

在这里插入图片描述

注意，当音乐暂停后，停止旋转动画，当音乐恢复播放时，转盘应从之前停止的角度开始启动旋转动画。

在拨动唱盘或切歌时，唱针将从唱盘上移开，通过旋转唱针图片30度来实现唱针移开的效果。

在这里插入图片描述

首先设置锚点，AnchorX=0.18，AnchorY=0.059，如下：

<Image WidthRequest="100"
    HeightRequest="167"
    HorizontalOptions="Center"
    VerticalOptions="Start"
    Margin="70,-50,0,0"
    Source="ic_needle.png"
    x:Name="AlbumNeedle"
    AnchorX="0.18"
    AnchorY="0.059" />

在音乐播放时
当手指开始滑动时，唱针从唱盘上移开，唱盘停止旋转；
当手指离开时，唱针回到唱盘上，唱盘继续旋转。

private async void PanActionHandler(object recipient, HorizontalPanActionArgs args)
{
    switch (args.PanType)
    {
        case HorizontalPanType.Over:

            if (MusicRelatedViewModel.IsPlaying)
            {
                await this.AlbumNeedle.RotateTo(0, 300);
                this.StartAlbumArtRotation();
            }


            break;
        case HorizontalPanType.Start:

            if (MusicRelatedViewModel.IsPlaying)
            {
                await this.AlbumNeedle.RotateTo(-30, 300);
                this.StopAlbumArtRotation();
            }
            break;
        ...
    }
}

效果如下：

在这里插入图片描述

当暂停、恢复时，唱针的位置也应该随之改变。

private async void MusicRelatedViewModel_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
    if (e.PropertyName==nameof(MusicRelatedViewModel.IsPlaying))
    {
        if (MusicRelatedViewModel.IsPlaying)
        {
            await this.AlbumNeedle.RotateTo(0, 300);
            this.StartAlbumArtRotation();
        }
        else
        {
            await this.AlbumNeedle.RotateTo(-30, 300);
            this.StopAlbumArtRotation();

        }

    }
}

效果如下：

在这里插入图片描述

 最终效果如下：

在这里插入图片描述

项目地址

Github:maui-samples

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/902510.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

地球IT

地球IT

地球是我们生活的家园&#xff0c;也是人类发展的基地。地球不仅仅是一个行星&#xff0c;更是一个复杂而有机的生态系统。 地球直径约为12,742公里&#xff0c;被称为“蓝色星球”&#xff0c;因为它的表面约70%被水覆盖。海洋是地球上最大的生态系统之一&#xff0c;它们扮演…
阅读更多...
商城-学习整理-高级-商城业务-异步线程池（十三）

商城-学习整理-高级-商城业务-异步线程池（十三）

目录 一、线程1、初始化线程的 4 种方式2、线程池的七大参数3、线程池的运行流程&#xff1a;4、例子5、常见的 4 种线程池6、开发中为什么使用线程池 二、CompletableFuture 异步编排0、业务场景&#xff1a;1、创建异步对象2、计算完成时回调方法3、handle 方法4、线程串行化…
阅读更多...
springboot 项目日志配置文件详解

springboot 项目日志配置文件详解

spring boot 项目指定 日志配置文件 在Spring Boot项目中&#xff0c;可以通过在application.properties或application.yml文件中指定日志配置文件来配置日志。 1. 使用application.properties文件&#xff1a; 在application.properties中&#xff0c;您可以使用以下属性来…
阅读更多...
系统卡死问题分析

系统卡死问题分析

CPU模式 CPU Frequency Scaling (CPUFREQ) Introduction CPU频率调节设备驱动程序的功能。该驱动程序允许在运行过程中更改CPU的时钟频率。一旦CPU频率被更改，必要的电源供应电压也会根据设备树脚本（DTS）中定义的电压值进行变化。通过降低时钟速度，这种方法可以减少功耗…
阅读更多...
C语言刷题训练DAY.9

C语言刷题训练DAY.9

1.线段图案 解题思路&#xff1a; 这里非常简单&#xff0c;我们只需要用一个循环控制打印即可。 解题代码&#xff1a; #include<stdio.h> int main() {int n 0;while ((scanf("%d", &n)) ! EOF){int i 0;for (i 0; i < n; i){printf("*&…
阅读更多...
js闭包用法以及和bind的结合使用

js闭包用法以及和bind的结合使用

bind用法 let info { name: "xuhaitao", age: 36 }function haitao() {console.log(this);}let fun haitao.bind(info)fun();haitao(); 控制台打印: 闭包用法: function xiaoMing() {let v 1;function jia() {v;console.log(v);}function getV() {console.log(…
阅读更多...
【C语言】每日一题（单词倒排）

【C语言】每日一题（单词倒排）

单词倒排&#xff0c;链接奉上。 方法 做题前的预备知识双指针逆序整个逆序单词 做题前的预备知识 在做题时遇到有关判断字母与数字时&#xff0c;因为总会写成str>0&&str<9之类的形式&#xff0c;比较繁琐&#xff0c;而C语言为了解决这个问题&#xff0c;有了…
阅读更多...
线段树详解——影子宽度

线段树详解——影子宽度

OK&#xff0c;今天来讲一讲线段树~~ 线段树是什么线段树的实现线段树的时间复杂度线段树的应用线段树的节点结构其他操作和优化例题——影子宽度输入输出格式输入格式输出格式 输入输出样例输入样例输出样例 例题讲解 线段树是什么 线段树&#xff08; S e g m e n t Segmen…
阅读更多...
【设计原则】图解何为依赖倒置

【设计原则】图解何为依赖倒置

依赖倒置原则&#xff08;Dependence Inversion Principle&#xff0c;DIP&#xff09;是指设计代码结构时&#xff0c;高层模块不应该依赖低层模块&#xff0c;二者都应该依赖其抽象。 要理解何为倒置&#xff0c;那就先得明确什么是“正向”&#xff0c;可以看到下图代码是自…
阅读更多...
Element Plus ＜el-table＞ 组件之展开行Table在项目中使用

Element Plus ＜el-table＞ 组件之展开行Table在项目中使用

目录 官方样式&#xff1a; 展开前&#xff1a; 展开&#xff1a; 原始代码&#xff1a; 代码详解&#xff1a; 项目使用场景&#xff1a; 完成效果&#xff1a; 具体实现范本&#xff1a; 1.调整数据结构 2. 修改标签和数据绑定 3. JavaScript 部分导入和创建对象 …
阅读更多...
浅谈日常使用的 Docker 底层原理-三大底座

浅谈日常使用的 Docker 底层原理-三大底座

适合的读者&#xff0c;对Docker有过简单了解的朋友&#xff0c;想要进一步了解Docker容器的朋友。 前言 回想我这两年&#xff0c;一直都是在使用 Docker&#xff0c;看过的视频、拜读过的博客&#xff0c;大都是在介绍 Docker 的由来、使用、优点和发展趋势&#xff0c;但对…
阅读更多...
路由跳转--编程式导航

路由跳转--编程式导航

简介 除了使用 创建 a 标签来定义导航链接&#xff0c;我们还可以通过编程式导航实现导航。所谓编程式导航指的是不通过router-link跳转&#xff0c;而是借助 router 的实例&#xff0c;通过代码的方式跳转。 示例&#xff1a; App.vue <template><div id"ap…
阅读更多...
正演的数值模拟（零基础，学习中）

正演的数值模拟（零基础，学习中）

摘要: 本贴从零开始学习正演的数值模拟方法. 1. 偏微分基础 引例: 物体从一维坐标的原点开始移动, 在 t t t 时刻, 它在坐标轴的位置由函数 s ( t ) s(t) s(t) 确定, 则速度为位置变化量与时间的比值: v ( t ) d s ( t ) d t lim ⁡ Δ t → 0 s ( t Δ t ) − s ( t )…
阅读更多...
HDFS存储魔法解析：在二次元世界中跃动的数据冒险

HDFS存储魔法解析：在二次元世界中跃动的数据冒险

文章目录 版权声明零 引缘起一 存储原理二 fsck命令2.1 副本块数量的配置2.1.1 全局设置方式2.1.2 临时设置方式 2.2 检查文件的副本数2.3 block大小和复制策略配置 三 NameNode元数据3.1 edits文件3.2 fsimage文件3.3 NameNode元数据管理维护3.4 元数据合并控制参数3.5 Checkp…
阅读更多...
热门歌曲的伴奏--源代码

热门歌曲的伴奏--源代码

目录 使用方法 《起风了》歌词伴奏 《起风了》歌词 《生日歌》歌词伴奏 《生日歌》歌词 《童话》歌词伴奏 《童话》歌词 《光阴的故事》歌词伴奏 《光阴的故事》歌词 ​《千本樱》歌词伴奏 《千本樱》中文歌词 《平凡之路》歌词伴奏 《平凡之路》歌词 《孤勇者》…
阅读更多...
Linux-在Ubuntu搭建ftp服务器

Linux-在Ubuntu搭建ftp服务器

By: Ailson Jack Date: 2023.08.20 个人博客&#xff1a;http://www.only2fire.com/ 本文在我博客的地址是&#xff1a;http://www.only2fire.com/archives/151.html&#xff0c;排版更好&#xff0c;便于学习&#xff0c;也可以去我博客逛逛&#xff0c;兴许有你想要的内容呢。…
阅读更多...
EndNote（一）【界面+功能介绍】

EndNote（一）【界面+功能介绍】

EndNote界面&#xff1a; 顶上小图标的介绍&#xff1a; ①&#xff1a;同步 ②&#xff1a;分享 ③&#xff1a;检索全文 对于第三个&#xff08;检索全文的功能&#xff09;&#xff1a; &#xff08;不做任何操作的情况下的界面&#xff0c;检索全文的按钮是灰的&…
阅读更多...
详解：Mybatis参数获取和动态SQL以及分页功能

详解：Mybatis参数获取和动态SQL以及分页功能

详解&#xff1a;Mybatis参数获取和动态SQL以及分页功能 前置准备项目结构在pom文件导入依赖创建properties配置文件创建Mapper接口创建Mapper映射文件SqlSession对象创建对应的表在数据库中实体类 SQL语句中的参数获取单个参数两个参数比较参数找不到的情况单个参数&#xff0…
阅读更多...
C语言小练习（一）

C语言小练习（一）

&#x1f31e; “人生是用来体验的&#xff0c;不是用来绎示完美的&#xff0c;接受迟钝和平庸&#xff0c;允许出错&#xff0c;允许自己偶尔断电&#xff0c;带着遗憾&#xff0c;拼命绽放&#xff0c;这是与自己达成和解的唯一办法。放下焦虑&#xff0c;和不完美的自己和解…
阅读更多...
自动方向识别式 TXB型电平转换芯片

自动方向识别式 TXB型电平转换芯片

大家好，这里是大话硬件。 在上一篇文章分析了LSF型的电平转换芯片，LSF型电平转换芯片最常见是应用在I2C总线上。I2C为OD型总线，LSF使用时增加电阻。 对于不是OD型总线的电平转换，比如UART，SPI，普通GPIO口信号，这些信号在进行双向电平转换使用什么样的芯片呢？ 从上面…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023