Flutter 微信语音消息播放动画

项目中有即时通讯的模块，里面涉及到播放语音消息。

先上个效果图片吧

主要内容

通过继承CustomPainter来绘制圆弧，通过控制圆弧的半径来动态绘制，形成一个连续的动画效果。

 ///核心的绘制方法，首先需要判断是左边消息还有右边消息///后面就是根据showIndex参数来决定绘制几个弧线了@overridevoid paint(Canvas canvas, Size size) {var radius = size.width / 2;var sweepAngle = math.pi / 2;if (left) {startAngle = math.pi * 7 / 4;center = Offset(0, size.height / 2);} else {center = Offset(size.width, size.height / 2);startAngle = math.pi * 3 / 4;}
//    print("showIndex $showIndex");if (showIndex! >= 3) {canvas.drawArc(Rect.fromCircle(center: center, radius: radius),startAngle, sweepAngle, false, mPaint);}if (showIndex! >= 2) {canvas.drawArc(Rect.fromCircle(center: center, radius: radius * 2 / 3),startAngle, sweepAngle, false, mPaint);}if (showIndex! >= 1) {canvas.drawArc(Rect.fromCircle(center: center, radius: radius / 3),startAngle, sweepAngle, true, mPaint..style = PaintingStyle.fill);///重置属性mPaint.style = PaintingStyle.stroke;}}

外层通过动画来控制绘制流程

  ///动画控制器来定义动画播放时间@overridevoid initState() {showIndex = showAll;_controller = AnimationController(vsync: this, duration: const Duration(milliseconds: 1500));///类似于Android的动画差值器的功能，数值变化1，2，3intTween = IntTween(begin: 1, end: showAll);///关联动画控制器intTween.animate(_controller);_controller.addListener(() {setState(() {});showIndex = intTween.lerp(_controller.value);});super.initState();}

代码比较简单，对于初次使用flutter的小伙伴，如果你刚好需要一个效果，可以节省一些时间。

官方的动画地址：

教程 | 在 Flutter 应用里实现动画效果 - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter

代码地址：传送地址

Flutter 微信语音消息播放动画相关推荐

仿微信语音消息的录制和播放
仿微信语音消息的录制和播放一.简述效果: 实现功能: 长按Button时改变Button显示文字,弹出Dialog(动态更新音量),动态生成录音文件,开始录音: 监听手指动作,规定区域.录音状态下 ...
消息语音播报，微信语音自动播放，有点儿意思，可以看看这个应用
我们谈谈技术,当然,主要也是给自己做的应用打打广告,谢谢大家支持,下载用用,提提意见.先上个二维码,感兴趣的现在就可以去看看: 点击下载方便聊,下方二维码扫描直接下载说说初衷一个月之前,朋友给我说 ...
android放微信@功能,Android仿微信语音消息的录制和播放功能
一.简述效果: 实现功能: 长按Button时改变Button显示文字,弹出Dialog(动态更新音量),动态生成录音文件,开始录音: 监听手指动作,规定区域.录音状态下手指划出规定区域取消录音,删 ...
将微信语音消息转换为 mp3
获取语音文件(.silk) 需要在电脑上实现.首先,查看你的微信 Mac 版本将数据存放在哪个目录下,我的是在这个目录下: /Users/henry/Library/Containers/com.te ...
flutter 微信语音输入
Flutter 高仿微信语音输入上划取消输入,网上的只有微信老版本的实现方式: 这边是最新的实现效果全网首发:先看效果:(只实现了页面事件效果,具体录音后面篇幅再实现) 实现起来有几个麻烦的地方: ...
android 融云 + 科大讯飞实现仿微信语音消息转换为文字（附DEMO源码）
融云SDK 使用很方便,简单配置就可以搭建即时通讯功能,配合科大讯飞的语音识别, 即可实现微信中语音消息转换为文字的功能融云sdk的基本使用就不细说了, 网上很多资料使用融云sdk自带的聊天会话界 ...
Android语音消息播放（MediaPlayer）踩坑
引言最近项目中的IM模块收到反映,语音消息点了之后正在播放却没有声音,有时甚至直接ANR异常,因项目中的IM采用的是网易的云信,所以第一时间请教了云信的技术人员,得到的回复是他们的SDK播放语音是直 ...
python 发送微信语音消息_全网最全的Windows下Anaconda2 / Anaconda3里Python语言实现定时发送微信消息给好友或群里（图文详解）...
不多说,直接上干货! 缘由: (1)最近看到情侣零点送祝福,感觉还是很浪漫的事情,相信有很多人熬夜为了给爱的人送上零点祝福,但是有时等着等着就睡着了或者时间并不是卡的那么准就有点强迫症了,这是也许程序 ...
关于微信、QQ语音消息，语音电话的时候控制应用音频播放以及暂停
最近项目中有这样的需求,要求在用户使用QQ或微信在录制或播放语音消息的时候可以自动暂停后台的音频播放,完毕后可以恢复播放. Android是多任务系统,Audio系统是竞争资源,Android2.2之 ...
语音消息以及未读提醒连续播放
微信引入语音聊天后,使得语音聊天非常火.最近做了一个关于语音聊天demo,现在介绍下整个实现过程:包括录音.保存音频文件至SD卡.发送录音文件.接收新语音消息红点提醒.播放暂停.未读语音消息连续播放. ...

Flutter 微信语音消息播放动画

Flutter 微信语音消息播放动画

主要内容

Flutter 微信语音消息播放动画相关推荐

最新文章

热门文章