[MAUI 项目实战] 手势控制音乐播放器(三): 动画

这篇具有很好参考价值的文章主要介绍了[MAUI 项目实战] 手势控制音乐播放器(三): 动画。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

@

目录
  • 吸附动画
    • 确定位置
    • 平移动画
  • 回弹动画
    • 使用自定义缓动函数
    • 多重动画
  • 点击动画
  • 项目地址

上一章节我们创建了手势容器控件PanContainer,它对拖拽物进行包装并响应了平移手势和点击手势。

拖拽物现在虽然可以响应手势操作,但视觉效果较生硬,一个优秀的设计要求UI界面交互流畅,页面元素显得灵动,则少不了动画(Animation)。

本章节我们对拖拽物加入过渡动画

吸附动画

还记的上一章节所描述的拖拽物(pan)和坑(pit)吗?“”吸附“”这是一个非常拟物的过程,当拖拽物品接近坑区域的边缘时,物体就会由于重力或是引力作用会滑落,吸附在坑里。

接下来对势容器控件PanContainer添加这一效果,打开PanContainer.xaml.cs,创建一个bool类型的可绑定对象AutoAdsorption,用于控制是否开启吸附动画。

添加如下代码:


public static readonly BindableProperty AutoAdsorptionProperty =
BindableProperty.Create("AutoAdsorption", typeof(bool), typeof(PanContainer), default(bool));

public bool AutoAdsorption
{
    get { return (bool)GetValue(AutoAdsorptionProperty); }
    set
    {
        SetValue(AutoAdsorptionProperty, value);
        OnPropertyChanged();

    }
}

确定位置

吸附动画触发时,首先要确定拖拽物的中心点是否在坑区域内,如果在,则拖拽物的中心点移动到坑区域的中心点,否则拖拽物的中心点移动到手指的位置。

在平移手势的PanUpdated响应事件处理方法中,添加如下代码:

private async void PanGestureRecognizer_OnPanUpdated(object sender, PanUpdatedEventArgs e)
{
    var isInPit = false;
    var isAdsorbInPit = false;

...

    //GestureStatus.Running中
    if (isYin && isXin)
    {
        isInPit = true;
        if (AutoAdsorption)
        {
            isAdsorbInPit = true;
            translationX = (pitRegion.EndX + pitRegion.StartX - Content.Width) / 2;
            translationY = (pitRegion.EndY + pitRegion.StartY - Content.Height) / 2;
        }

...

isAdsorbInPit是是否执行吸附动画的标志位。

平移动画

在触发吸附动画后,我们需要对拖拽物进行平移动画,使其移动到坑区域的中心点。

使用的用TranslateTo方法执行的,该方法会在200ms内逐渐更改拖拽物的TranslationX和 TranslationY属性

if (AutoAdsorption)
{
    if (isAdsorbInPit)
    {
        if (!IsRuningTranslateToTask)
        {
            IsRuningTranslateToTask = true;
            await Content.TranslateTo(translationX, translationY, 200, Easing.CubicOut).ContinueWith(c => IsRuningTranslateToTask = false); ;
        }

        isAdsorbInPit = false;
    }
    else
    {
        Content.TranslationX = translationX;
        Content.TranslationY = translationY;
    }
}
else
{
    Content.TranslationX = translationX;
    Content.TranslationY = translationY;
}

执行效果如下:

[MAUI 项目实战] 手势控制音乐播放器(三): 动画

IsRuningTranslateToTask是是否正在执行吸附动画的标志位。若正在执行,则不再执行新的吸附动画。

回弹动画

当手指释放拖拽物时,我们需要对拖拽物进行回弹动画,使其回到原来的位置。

同样的,我们通过动画改变TranslationX和 TranslationY属性,但是为了有一个回弹的效果,要用到缓动函数Easing类。

Easing 类,使用该类可以指定一个传输函数,用于控制动画在运行时如何加快或减慢速度。

MAUI中提供了以下几种缓动函数:

缓动函数 描述
BounceIn 在开始时弹跳动画
BounceOut 在结尾处弹跳动画
CubicIn 缓慢加速动画
CubicInOut 在开头加速动画,并在结束时减速动画
CubicOut 会快速减速动画
Linear 使用恒定的速度,是默认值
SinIn 可平滑地加速动画
SinInOut 在开头平滑地加速动画,并在动画结束时平滑减速
SinOut 平滑地减速动画
SpringIn 会导致动画快速加速到末尾
SpringOut 会导致动画快速减速到末尾

它们的函数曲线如下:

[MAUI 项目实战] 手势控制音乐播放器(三): 动画

使用自定义缓动函数

我们需要一个拉扯回弹的效果,可以通过自定义缓动函数实现。

我用python拟合了一个适合拖拽物回弹的曲线。模拟一种弹性拉扯的效果。

[MAUI 项目实战] 手势控制音乐播放器(三): 动画

写入代码后测试一下效果:

var mySpringOut =(double x) => (x - 1) * (x - 1) * ((5f + 1) * (x - 1) + 5) + 1;
await Content.TranslateTo(PositionX, PositionY, 200, mySpringOut);

[MAUI 项目实战] 手势控制音乐播放器(三): 动画

多重动画

在回弹的同时,大小要恢复到原来的大小,我们可以通过动画改变Scale属性来实现。

改变大小和改变位置的动画是同时进行的,我们通过创建Animation对象,添加子动画来实现。详情请参考Animation子动画。

 Content.AbortAnimation("ReshapeAnimations");
var parentAnimation = new Animation();
var mySpringOut =(double x) => (x - 1) * (x - 1) * ((5f + 1) * (x - 1) + 5) + 1;

var scaleUpAnimation1 = new Animation(v => Content.TranslationX = v, Content.TranslationX, PositionX, mySpringOut);
var scaleUpAnimation2 = new Animation(v => Content.TranslationY = v, Content.TranslationY, PositionY, mySpringOut);
var scaleUpAnimation5 = new Animation(v => Content.Scale = v, Content.Scale, 1.0);

parentAnimation.Add(0, 1, scaleUpAnimation1);
parentAnimation.Add(0, 1, scaleUpAnimation2);
parentAnimation.Add(0, 1, scaleUpAnimation5);

parentAnimation.Commit(this, "RestoreAnimation", 16, (uint)PanScaleAnimationLength);

在开始拖拽的时候,也加上缩小的动画,这样拖拽的时候,拖拽物会缩小,释放的时候会恢复原来的大小。

Content.AbortAnimation("ReshapeAnimations");
var scaleAnimation = new Animation();
var scaleUpAnimation0 = new Animation(v => Content.Scale = v, Content.Scale, PanScale);
scaleAnimation.Add(0, 1, scaleUpAnimation0);

scaleAnimation.Commit(this, "ReshapeAnimations", 16, (uint)PanScaleAnimationLength);

注意,放大和缩小是两个成对的动画,他们共同持有一个handler即ReshapeAnimations,不能同时进行,所以在开始一个动画前,要先调用Content.AbortAnimation("ReshapeAnimations")以终止之前的动画。

最终运行效果:

[MAUI 项目实战] 手势控制音乐播放器(三): 动画

点击动画

点击时为了模拟水波纹效果,可以使用多重动画来实现。

在点击时,我们分三次连续的缩小,放大再缩小,这样就会有一个水波纹的效果。

在点击手势的OnTapped响应事件处理方法中,添加如下代码:

private void TapGestureRecognizer_OnTapped(object sender, EventArgs e)
{
    var scaleAnimation = new Animation();
    var scaleUpAnimation0 = new Animation(v => Content.Scale = v, 1.0, 0.9);
    var scaleUpAnimation1 = new Animation(v => Content.Scale = v, 0.9, 1.1);
    var scaleUpAnimation2 = new Animation(v => Content.Scale = v, 1.1, 1.0);
    scaleAnimation.Add(0, 0.3, scaleUpAnimation0);
    scaleAnimation.Add(0.3, 0.6, scaleUpAnimation1);
    scaleAnimation.Add(0.6, 1, scaleUpAnimation2);

    scaleAnimation.Commit(this, "ReshapeAnimations", 16, 400);

    this.OnTapped?.Invoke(this, EventArgs.Empty);
}

最终运行效果:

[MAUI 项目实战] 手势控制音乐播放器(三): 动画

下一章将结合手势容器实现一个圆形进度条。

项目地址

Github:maui-samples文章来源地址https://www.toymoban.com/news/detail-405550.html

到了这里,关于[MAUI 项目实战] 手势控制音乐播放器(三): 动画的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 《微信小程序》音乐播放器项目

    需求:在装有node.js的机器上使用微信开发者工具开发一个音乐播放项目 写这个项目的时候电脑前后蓝屏了5次,制作不易,希望大佬们给个双击,顺子在这感谢啦! 展示: pages–index–index.js 01.png 02.png 02stop.png 03.png 04.png 05.png 06.png banner.jpg banner2.jpg banner3.jpg cover.jpg cover1.png

    2024年02月11日
    浏览(51)
  • 项目7-音乐播放器6+评论区

    前端小白:怎么为你的网页增加评论功能?(一)_为网页添加评论区怎么弄-CSDN博客 参考的上述文章的前端代码 我们从上述前端图片知道,我们数据库需要准备的字段: id,commentuserName,coomentmusicId,comment,time 路径:\\\"/comment/upload\\\" 1.MAPPER 2.SERVICE 3.Controller MAPPER SERVICE CONTROLLER 成功

    2024年04月23日
    浏览(69)
  • 项目7-音乐播放器2(上传音乐+查询音乐+拦截器)

    之后就不用对用户是否登录进行判断了 生效 请求: { post, /music/upload {singer,MultipartFile file}, } 响应: { \\\"status\\\": 0, \\\"message\\\": \\\"上传成功!\\\", \\\"data\\\": true } Java如何判断一个文件是否为真实的MP3文件_判断一个文件是否是mp3 文件-CSDN博客 流程:前端进行相关的文件操作-再将上传的文

    2024年04月17日
    浏览(48)
  • 小项目开发——Android 音乐播放器

    ◼ 音乐播放器 . ◼ 要求 : Activity 编程、 ListView 编程、 SeekBar 编程、 ExoPlayer 编程( 播放 、 暂停 、 停止 、 上一首 、 下一首 ),音乐文件放在 assets/music 目录下,界面自拟. ◼ 期望最终效果: ◼ 分别对应 activity_music_list.xml 、 activity_my_music_player.xml 的视图. ◼ 点击列表任

    2024年01月21日
    浏览(45)
  • 完整实例项目:使用python自制音乐播放器~

    今天使用python的pygame等模块制作了一个简单的音乐播放器,实现了很多好玩的功能,在这里和大家一起分享!这是笔者的第二篇博客,也是正式的完成一个小项目,希望获得大家的支持~ 暂停、继续播放、调整声音大小、上一曲下一曲调整、无限制追加音乐(但需要下载音乐

    2024年02月11日
    浏览(42)
  • 微信小程序仿网易音乐播放器项目

    主页样式 播放页样式 搜索页样式 排行榜页样式 小控件样式 网易云音乐API接口 后端接口,使用node写的,使用了网易云音乐API: 封装的api文件 主页面功能点 banner,滑动菜单栏采用微信的API( swiper 与 scroll-view )进行开发 滑动到底部重新获取后续的歌曲,使用onReachBottom周期

    2024年02月06日
    浏览(42)
  • 基于STM32制作的音乐播放器,用PWM控制蜂鸣器

    目录 效果展示  前言         一、设计背景         1.1、知识储备          二、系统设计方案         2.1、实现功能          2.2、硬件部分         2.3、软件部分          三、软件设计          3.1、设计流程图          3.2、音乐频率的设置          3.3、编

    2024年02月03日
    浏览(76)
  • 开源小项目 - 基于无源蜂鸣器实现的音乐播放器

    目录 一、音乐简谱相关知识 1、音符 2、音调 3、识读简谱 1. 找到简谱中C调的音符对应的蜂鸣器频率(确定音调对应的频率) 2. 确定蜂鸣器演奏一拍所需的时间(即确定一个音调对应的节拍数) 3.创建结构体确定一个音符所需的两个属性(音调频率、节拍数) 4.将《两只老虎

    2024年03月10日
    浏览(53)
  • 【无标题】单片机小项目———音乐播放器(keil+protues)

    刚学完单片机的朋友可以看一看。 主要功能: 1.播放音乐 2.切歌 3.显示歌曲数 仿真:  代码: #includeREG52.H //#define sound_amount 5  sbit play_up=P1^0;        sbit play_down=P1^1;    sbit pause=P1^2;        sbit speaker=P3^1;      unsigned char timer0h,timer0l,time,n; unsigned char music_num;    unsigned int

    2024年02月11日
    浏览(50)
  • 微信小程序做一个圆形图片旋转可以控制开始和结束-音乐播放器的图片旋转功能

    1.在 WXML 文件中添加一个 标签,并设置图片的 src 和样式,并为其绑定一个 animation 用来控制旋转动画。 2.在 WXSS 文件中添加样式,将图片设置为圆形并居中显示。 3.在 JS 文件中定义旋转动画对象和控制方法。 4.在 WXML 文件中添加按钮来触发开始和结束旋转动画。 在以上步骤

    2024年02月16日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包