Flutter鸿蒙next 实现长按录音按钮及动画特效

在 Flutter 中实现长按录音按钮并且添加动画特效,是一个有趣且实用的功能。本文将通过实现一个具有动画效果的长按录音按钮,带领你一步步了解如何使用 Flutter 完成这个任务,并解释每一部分的实现。

一、功能需求

我们需要一个按钮,当用户长按时,开始录音并且显示相应的录音进度。长按结束时,停止录音并显示录音的结果。同时,在长按时,按钮应该具备一个动画效果,展示录音进度或指示正在录音。

二、实现思路

  1. 按钮UI设计:使用 GestureDetector 监听长按手势,设置不同的状态(长按开始、录音中、录音结束)。
  2. 动画效果:使用 AnimatedContainer 或 AnimationController 配合 Tween 实现按钮的尺寸变化、颜色变化等动画效果,提升用户体验。
  3. 录音功能:利用 Flutter 的录音插件 flutter_sound 来实现录音功能。

三、代码实现

1. 添加依赖

pubspec.yaml 文件中添加所需的依赖:

yamldependencies: flutter: sdk: flutter flutter_sound: ^9.1.9 # 音频录制插件

2. 编写UI和动画逻辑

import 'package:flutter/material.dart';
import 'package:flutter_sound/flutter_sound.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: '长按录音按钮',theme: ThemeData(primarySwatch: Colors.blue),home: RecordingButton(),);}
}class RecordingButton extends StatefulWidget {@override_RecordingButtonState createState() => _RecordingButtonState();
}class _RecordingButtonState extends State<RecordingButton> with TickerProviderStateMixin {FlutterSoundRecorder _recorder;  // 录音器bool _isRecording = false;  // 是否正在录音double _progress = 0.0;  // 录音进度AnimationController _animationController;  // 动画控制器Animation<double> _scaleAnimation;  // 缩放动画Animation<Color?> _colorAnimation;  // 颜色变化动画@overridevoid initState() {super.initState();_recorder = FlutterSoundRecorder();_initRecorder();_initAnimations();}// 初始化录音器void _initRecorder() async {await _recorder.openAudioSession();}// 初始化动画控制器void _initAnimations() {_animationController = AnimationController(vsync: this,duration: Duration(milliseconds: 200),);_scaleAnimation = Tween<double>(begin: 1.0, end: 1.2).animate(CurvedAnimation(parent: _animationController, curve: Curves.easeInOut),);_colorAnimation = ColorTween(begin: Colors.blue, end: Colors.red).animate(CurvedAnimation(parent: _animationController, curve: Curves.easeInOut),);}// 开始录音void _startRecording() async {await _recorder.startRecorder(toFile: 'audio.aac');setState(() {_isRecording = true;});_animationController.forward();_recordingProgress();}// 停止录音void _stopRecording() async {await _recorder.stopRecorder();setState(() {_isRecording = false;_progress = 0.0;});_animationController.reverse();}// 录音进度void _recordingProgress() async {while (_isRecording) {await Future.delayed(Duration(milliseconds: 100));final progress = await _recorder.getRecordingDuration();setState(() {_progress = progress.inSeconds.toDouble();});if (_progress >= 10) { // 假设录音最大为10秒_stopRecording();}}}@overridevoid dispose() {_recorder.closeAudioSession();_animationController.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('长按录音按钮')),body: Center(child: GestureDetector(onLongPress: _startRecording,onLongPressEnd: (_) => _stopRecording(),child: AnimatedBuilder(animation: _animationController,builder: (context, child) {return Container(width: 150,height: 150,decoration: BoxDecoration(color: _colorAnimation.value,shape: BoxShape.circle,),child: Center(child: ScaleTransition(scale: _scaleAnimation,child: Icon(_isRecording ? Icons.stop : Icons.mic,color: Colors.white,size: 80,),),),);},),),),);}
}

3. 代码详细解释

1. UI 和手势操作

我们使用了 GestureDetector 来监听用户的长按手势:

  • onLongPress:当用户长按按钮时,调用 _startRecording 函数开始录音。
  • onLongPressEnd:当长按结束时,调用 _stopRecording 停止录音。

通过 AnimatedBuilder 来监听动画状态变化,更新 UI。

2. 录音功能

我们使用 flutter_sound 插件来处理录音功能:

  • _recorder.startRecorder(toFile: 'audio.aac'):开始录音并保存为 audio.aac 文件。
  • _recorder.stopRecorder():停止录音。
  • _recorder.getRecordingDuration():获取录音进度,通过 inSeconds 获取已录制的时间。
3. 动画效果

我们通过 AnimationControllerTween 来控制动画:

  • _scaleAnimation:通过 ScaleTransition 实现按钮的缩放

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

重建大师7.0 | 全新倾斜高斯泼溅OPGS技术,实景三维大规模城市三维场景的更逼真化表达

在刚刚结束的“AI智算、国产信创”2024秋季新品发布会上&#xff0c;大势智慧隆重发布了重建大师7.0、重建农场信创版、低空三维AI智算平台等覆盖实景三维数据生产体系全流程、推进实景三维国产化建设与低空应用的全新系列产品。 今天&#xff0c;重点为大家介绍一下重建大师7.…

【MySQL 保姆级教学】深层理解索引及特性(重点)--下(12)

索引&#xff08;重点&#xff09; 1. 索引的作用2. 索引操作2.1 主键索引2.1.1 主键索引的特点2.1.2 创建主键索引 2.2 唯一键索引2.2.1 唯一键索引的特点2.2.2 唯一索引的创建 2.3 普通索引2.3.1 普通索引的特点2.3.2 普通索引的创建 2.4 全文索引2.4.1 全文索引的作用2.4.2 …

力扣: 144 二叉树 -- 先序遍历

二叉树 – 先序遍历 描述&#xff1a; 给你二叉树的根节点 root &#xff0c;返回它节点值的 前序 遍历。 示例&#xff1a; 先序遍历&#xff1a;根左右 何解&#xff1f; 1、递归 : 无需多言一看就懂 2、遍历法 中序查找时&#xff0c;最先出入的节点是左子树中的最左侧二叉…

【K8S系列】K8S 集群 CPU 爆满导致 Pod Pending 状态的分析与解决方案

在 Kubernetes 集群中&#xff0c;CPU 突然爆满可能导致 Pod 状态变为 Pending&#xff0c;影响应用的可用性。本文将深入分析其原因&#xff0c;并附上相关命令及其执行结果&#xff0c;帮助你更好地理解和解决此问题。 1. 问题描述 在 Kubernetes 集群中&#xff0c;当 CPU …

Linux awk命令详解-参数-选项-内置变量-内置函数-脚本(多图、多示例)

文章目录 awk基础结构说明与示例参数与内置变量常用参数内置变量其他参数内置变量 简单示例理解option简单参数NR与FNR-v ARGC ARGV参数 执行脚本if elsefor循环关联数组指定匹配pattern 使用正则指定分隔符理解pattern正则与逻辑算术 printfif else for whileBEGIN ENDnext(跳…

【Android】组件化开发入门

文章目录 引入组件是什么?为什么使用组件化开发?什么是模块化&#xff0c;组件化&#xff0c;插件化&#xff1f;常见实现 组件分层创建module 组件单独调试配置组件工程类型配置组件ApplicationId和AndroidManifest文件 引入 组件是什么? 组件&#xff08;Component&#…

MySQL数据库基础(一) MySQL安装及数据类型

目录 一、MySQL数据裤简介 二、MySQL数据的安装 2.1、MySQL安装 2.2、修改MySQL密码登录策略 三、数据库基础管理 3.1、连接方式及数据储存流程 3.2、库管理命令 3.3、表管理命令 3.4、记录管理命令 四、MySQL数据类型 4.1、常见信息种类 4.2、字符型 4.3、数值型 4.4、日期时间…

云原生+AI核心技术&最佳实践

以下内容是我在陕西理工大学2023级人工智能专业和网络专业的演讲内容&#xff0c;分享给大家。 各位老师、同学们&#xff0c;大家好啊&#xff01;能在这里跟大家一起聊聊咱们计算机专业那些事儿&#xff0c;我真的觉得超级兴奋&#xff01; 首先&#xff0c;自我介绍一下&am…

Qt QCustomplot 在采集信号领域的应用

文章目录 一、常用的几种开源库:1、QCustomPlot:2、QChart:3、Qwt:QCustomplot 在采集信号领域的应用1、应用实例时域分析频谱分析2.数据筛选和处理其他参考自然界中的物理过程、传感器和传感器网络、电路和电子设备、通信系统等都是模拟信号的来源。通过可视化模拟信号,可以…

C++11的简介

杀马特主页&#xff1a;羑悻的小杀马特.-CSDN博客 ------ ->欢迎阅读 欢迎阅读 欢迎阅读 欢迎阅读 <------- 目录 一列表初始化的变化&#xff1a; 二左右值即各自引用的概念&#xff1a; 2.1左右…

大模型的常用指令格式 --> ShareGPT 和 Alpaca (以 llama-factory 里的设置为例)

ShareGPT 格式 提出背景&#xff1a;ShareGPT 格式起初来自于用户在社交平台上分享与聊天模型的对话记录&#xff0c;这些记录涵盖了丰富的多轮对话内容。研究者们意识到&#xff0c;这类真实的对话数据可以帮助模型更好地学习多轮对话的上下文保持、回应生成等能力。因此&…

5G时代已来:我们该如何迎接超高速网络?

内容概要 随着5G技术的普及&#xff0c;我们的生活似乎变得更加“科幻”了。想象一下&#xff0c;未来的智能家居将不仅仅是能够听你说“开灯”&#xff1b;它们可能会主动询问你今天心情如何&#xff0c;甚至会推荐你一杯“维他命C芒果榨汁”&#xff0c;帮助你抵御夏天的炎热…

Unity SRP学习笔记(二)

Unity SRP学习笔记&#xff08;二&#xff09; 主要参考&#xff1a; https://catlikecoding.com/unity/tutorials/custom-srp/ https://docs.unity.cn/cn/2022.3/ScriptReference/index.html 中文教程部分参考&#xff08;可选&#xff09;&#xff1a; https://tuncle.blog/c…

【JavaEE初阶 — 多线程】Thread类的方法&线程生命周期

目录 1. start() (1) start() 的性质 (2) start() 和 Thread类 的关系 2. 终止一个线程 (1)通过共享的标记结束线程 1. 通过共享的标记结束线程 2. 关于 lamda 表达式的“变量捕获” (2) 调用interrupt()方法 1. isInterrupted() 2. currentThread() …

粤荣学校与亲邻家政达成合作,创造双向人才输送机制

原标题&#xff1a;超过大学生月薪&#xff01;粤荣学校与亲邻家政达成合作&#xff0c;创造双向人才输送机制&#xff0c;解决中年人就业难题&#xff01; 广州市白云区粤荣职业培训学校余智强校长与广州亲邻家政服务有限公司朱利生经理于2024年11月8日下午共同签署了一份重要…

【MacOS实操】如何基于SSH连接远程linux服务器

MacOS上远程连接linux服务器&#xff0c;可以使用ssh命令pem秘钥文件连接。 一、准备pem秘钥文件 如果已经有pem文件&#xff0c;则跳过这一步。如果手上有ppk文件&#xff0c;那么需要先转换为pem文件。 macOS 的默认 SSH 客户端不支持 PPK 格式&#xff0c;你需要将 PPK 文…

parseInt 是一个内置的 JavaScript 函数,用于将字符串转换为整数。

parseInt(options.checkNumber, 10) 中的 10 表示将字符串转换为十进制整数。 解释 parseInt 函数&#xff1a; parseInt 是一个内置的 JavaScript 函数&#xff0c;用于将字符串转换为整数。它有两个参数&#xff1a; 第一个参数是要转换的字符串。第二个参数是转换时使用的基…

鸿蒙ArkTS中的布局容器组件(Scroll、List、Tabs)

1、Scroll组件 Scroll组件是一个可滚动的容器组件&#xff0c;用于在子组件的布局尺寸超过父组件尺寸时提供滚动功能。它允许在其内部容纳超过自身显示区域的内容&#xff0c;并通过滚动机制来查看全部内容。这对于显示大量信息&#xff08;如长列表、长篇文本或大型图像等&…

ElasticSearch备考 -- Manage the index lifecycle (ILM)

一、题目 在集群中&#xff0c;数据首先分布在data_hot节点&#xff0c;rollover 设置max_age:3d, max_docs:5,max_size:50gb, 优先级为100。 max_age:15s, forcemarge 段合并&#xff0c;数据迁移到data_warm节点&#xff0c; 副本数为0&#xff0c;优先级为50 max_age:30s, 数…

信息安全工程师(81)网络安全测评质量管理与标准

一、网络安全测评质量管理 遵循标准和流程 网络安全测评应严格遵循国家相关标准和流程&#xff0c;确保测评工作的规范性和一致性。这些标准和流程通常包括测评方法、测评步骤、测评指标等&#xff0c;为测评工作提供明确的指导和依据。 选择合格的测评团队 测评团队应具备相关…