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

简介: 本文介绍了如何在 Flutter 中实现一个带有动画效果的长按录音按钮。通过使用 `GestureDetector` 监听长按手势,结合 `AnimatedContainer` 和 `AnimationController` 实现按钮的动画效果,以及 `flutter_sound` 插件完成录音功能。文章详细讲解了功能需求、实现思路和代码实现,帮助读者逐步掌握这一实用功能的开发方法。

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

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

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

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

yaml

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

  1. 编写UI和动画逻辑
    import 'package:flutter/material.dart';
    import 'package:flutter_sound/flutter_sound.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget 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 with TickerProviderStateMixin {
FlutterSoundRecorder _recorder; // 录音器
bool _isRecording = false; // 是否正在录音
double _progress = 0.0; // 录音进度
AnimationController _animationController; // 动画控制器
Animation _scaleAnimation; // 缩放动画
Animation _colorAnimation; // 颜色变化动画

@override
void 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();
}
}
}

@override
void dispose() {
_recorder.closeAudioSession();
_animationController.dispose();
super.dispose();
}

@override
Widget 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,
),
),
),
);
},
),
),
),
);
}
}

  1. 代码详细解释
  2. UI 和手势操作
    我们使用了 GestureDetector 来监听用户的长按手势:

onLongPress:当用户长按按钮时,调用 _startRecording 函数开始录音。
onLongPressEnd:当长按结束时,调用 _stopRecording 停止录音。
通过 AnimatedBuilder 来监听动画状态变化,更新 UI。

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

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

  1. 动画效果
    我们通过 AnimationController 和 Tween 来控制动画:

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

                        版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

原文链接:https://blog.csdn.net/lbcyllqj/article/details/143580089

目录
相关文章
|
1天前
「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果
本篇将带你实现一个带有闪烁动画的按钮交互效果。通过动态改变按钮颜色,用户可以在视觉上感受到按钮的闪烁效果,提升界面互动体验。
37 18
「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果
|
1月前
|
存储 调度 数据安全/隐私保护
鸿蒙Flutter实战:13-鸿蒙应用打包上架流程
鸿蒙应用打包上架流程包括创建应用、打包签名和上传应用。首先,在AppGallery Connect中创建项目、APP ID和元服务。接着,使用Deveco进行手动签名,生成.p12和.csr文件,并在AppGallery Connect中上传CSR文件获取证书。最后,配置签名并打包生成.app文件,上传至应用市场。常见问题包括检查签名配置文件是否正确。参考资料:[应用/服务签名](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-signing-V5)。
59 3
鸿蒙Flutter实战:13-鸿蒙应用打包上架流程
|
1月前
|
开发工具 芯片 开发者
鸿蒙Flutter实战:12-使用模拟器开发调试
本文介绍了如何在 M 系列芯片的 Mac 电脑上使用模拟器进行鸿蒙 Flutter 开发和调试。主要内容包括:创建 Flutter 项目、签名、创建模拟器、运行 Flutter 项目以及常见问题的解决方法。适用于希望在鸿蒙系统上开发 Flutter 应用的开发者。
46 2
鸿蒙Flutter实战:12-使用模拟器开发调试
|
1月前
|
存储 Dart
Flutter&鸿蒙next 实现一个计算器应用
本文介绍了如何使用 Flutter 创建一个简单的计算器应用,包括基本的加减乘除运算。文章详细讲解了界面布局、计算逻辑和状态管理的实现步骤,通过具体的代码示例展示了如何构建计算器界面、处理用户输入和显示计算结果。
80 0
|
16天前
|
JavaScript 安全 前端开发
【HarmonyOS开发】ArkTS基础语法及使用(鸿蒙开发基础教程)
【HarmonyOS开发】ArkTS基础语法及使用(鸿蒙开发基础教程)
250 4
|
16天前
|
存储 数据安全/隐私保护
鸿蒙开发:自定义一个动态输入框
在鸿蒙开发中,如何实现这一效果呢,最重要的解决两个问题,第一个问题是,如何在上一个输入框输入完之后,焦点切换至下一个输入框中,第二个问题是,如何禁止已经输入的输入框的焦点,两个问题解决完之后,其他的就很是简单了。
43 13
鸿蒙开发:自定义一个动态输入框
|
19天前
|
小程序 测试技术 API
鸿蒙原生开发手记:03-元服务开发全流程(开发元服务,只需要看这一篇文章)
本文详细介绍元服务的开发及上架全流程,涵盖元服务的特点、创建项目、服务卡片、签名打包、开发测试及上架审核等环节,帮助开发者轻松掌握从零开始开发并发布元服务的全过程。元服务以其轻量、免安装、易于使用等特点,成为未来服务提供的重要形式。
51 13
鸿蒙原生开发手记:03-元服务开发全流程(开发元服务,只需要看这一篇文章)
|
24天前
|
Android开发
鸿蒙开发:自定义一个简单的标题栏
本身就是一个很简单的标题栏组件,没有什么过多的技术含量,有一点需要注意,当使用沉浸式的时候,注意标题栏的位置,需要避让状态栏。
鸿蒙开发:自定义一个简单的标题栏
|
24天前
|
API
鸿蒙开发:切换至基于rcp的网络请求
本文的内容主要是把之前基于http封装的库,修改为当前的Remote Communication Kit(远场通信服务),无非就是通信的方式变了,其他都大差不差。
鸿蒙开发:切换至基于rcp的网络请求
|
21天前
|
传感器 数据处理 数据库
鸿蒙开发Hvigor插件动态生成代码
【11月更文挑战第13天】Hvigor 是鸿蒙开发中的构建系统插件,主要负责项目的构建、打包及依赖管理,并能根据预定义规则动态生成代码,如数据库访问、网络请求等,提高开发效率和代码一致性。适用于大型项目初始化和组件化开发。