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,一经查实,立即删除!

相关文章

layui 实现 城市联动

<div class"layuimini-container"><form id"app-form" class"layui-form layuimini-form"><div class"layui-form-item"><label class"layui-form-label">标题</label><div class"la…

SpringBoot整合SpringSecurity实现密码加密解密、登录认证退出功能

文章目录 SpringBoot整合SpringSecurity实现密码加密解密、登录认证退出功能一、引言二、JWT简介与组成1、JWT简介2、JWT的组成2.1、Header&#xff08;头部&#xff09;2.2、Payload&#xff08;载荷&#xff09;2.3、Signature&#xff08;签名&#xff09; 三、Spring Secur…

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

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

华为 Atlas500 Euler 欧拉系统操作指南

华为 Atlas500 Euler 欧拉系统操作指南 ssh root连接 找到Atlas500的IP地址&#xff0c;如&#xff1a;192.168.1.166 账号/密码&#xff1a;admin/Huawei123 root/密码&#xff1a;Huawei123456 #直接使用root ssh连接 这里受限不让直接用root连接 ssh root192.168.1.116 #…

【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 …

SettlementfactoryController

目录 1、 SettlementfactoryController 1.1、 查询结算明细信息 1.1.1、 //SYS_RecRepairItemDetail修理项目明细表 1.1.2、 //SYS_CollageDetai领料明细表 1.1.3、 //SYS_RecOtherCostDetail其他费用明细表 1.1.4、 //SYS_InsuranceDetail保险理赔明细表 1.1.5、…

ubuntu22.04 docker-compose安装postgresql数据库

在 Ubuntu 22.04 上使用 Docker Compose 来安装和运行 PostgreSQL 数据库的过程如下&#xff1a; 1. 创建 Docker Compose 文件 在项目文件夹中创建一个 docker-compose.yml 文件&#xff0c;以配置 PostgreSQL 数据库的服务。 mkdir postgres_docker cd postgres_docker to…

只允许指定ip远程连接ssh

我们都会使用securtcrt或者xshell等软件进行远程登录&#xff0c;这样虽然会给我们带来很多便捷&#xff0c;但是同样会存在一定的风险。有很多人专门通过重复的扫描试图破解我们的linux服务器&#xff0c;从而获取免费的“肉鸡”。因此我们可以通过设置hosts.allow和hosts.den…

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

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

maybe_unused]]编译属性

C(17)&#xff1a;[[maybe_unused]]编译属性_maybe unused-CSDN博客 避免编译器发出警告。 [[maybe_unused]] int f() //没有被使用的函数 {return 1; }int main() {[[maybe_unused]] int i 0; //没有被使用的变量return 0; }

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

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

css中的样式穿透

1. >>> 操作符 <style scoped> /* 影响子组件的样式 */ .parent >>> .child {color: red; } </style>注意&#xff1a;>>> 操作符在某些预处理器&#xff08;如Sass&#xff09;中可能无法识别&#xff0c;因为它不是标准的CSS语法。 …

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&#…

计算用户订购率梧桐数据库和oracle数据库sql分析

一、背景说明 移动运营商平台提供多种类型的产品权益&#xff0c;用户可以通过订购来使用。平台需要定期统计各个产品的用户订购情况&#xff0c;以便了解各个产品的受欢迎程度。这些统计数据将用于优化产品、提升用户体验和制定市场推广策略。 二、表结构说明 梧桐数据库建…

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、日期时间…

防抖函数--应用场景及示例

防抖函数–应用场景及示例 1.当短时间内出现多次调用同一个东西的时候-可以使用 场景1 接口多次相应401–但是只需要提醒一次 //time 为全局变量 let time;axios.interceptors.response.use(function (response) {if (response.data.code 401) {//当401时清除缓存信息// Mes…

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

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

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

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

AI 大模型重塑软件开发:从代码自动生成到智能测试

引言 随着人工智能技术的飞速发展&#xff0c;特别是大规模预训练模型&#xff08;大模型&#xff09;的出现&#xff0c;AI 正在深刻地改变软件开发的各个环节。从代码自动生成到智能测试&#xff0c;AI 不仅提高了开发效率&#xff0c;减少了错误&#xff0c;还带来了全新的…