背景

最近做一个学校作业，用 React Native 写一个游戏。游戏中涉及一个物体下落的动效，是用 React Native 的 Animated API 实现的。

现在希望在物体落地的时候发出“嗒”的一个音效，没想到还挺麻烦。

首先需要一个库来实现音频的播放。网上搜了一下，大部分人的解决方案都是用 react-native-sound 这个库。我照着试了一下，安装很麻烦不说，即便我只是像下面这样引入这个库：

import Sound from 'react-native-sound';

也会一直报这个错误：

TypeError: null is not an object (evaluating 'RNSound.IsAndroid')
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/@react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError
at node_modules/metro-runtime/src/polyfills/require.js:204:6 in guardedLoadModule
at http://192.168.1.5:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&minify=false:488211:3 in global code

后来突然想到，我这个项目是基于 Expo 的，如果 Expo 提供了音频解决方案就好了。搜了一下还真有！

后来又捣鼓了一阵，终于实现了。

实现

代码

示例代码如下：

import { useRef, useEffect } from 'react';
import { Animated, Dimensions, Easing } from 'react-native';
import { Audio } from 'expo-av'; // 引入该库const WINDOW_WIDTH = Dimensions.get('window').width;
const WINDOW_HEIGHT = Dimensions.get('window').height;
const BOX_SIZE = WINDOW_WIDTH / 5;
const BOX_INIT_X = WINDOW_WIDTH/2 - BOX_SIZE/2;
const BOX_INIT_Y = WINDOW_WIDTH/2;
const BOX_FINAL_Y = WINDOW_HEIGHT - BOX_SIZElet crashSound; // 音效export default function App() {const positionY = useRef(new Animated.Value(BOX_INIT_Y)).current// 加载音效useEffect(async () => {const { sound } = await Audio.Sound.createAsync(require('./crash_sound.m4a'));crashSound = sound;}, [])// 设置动画useEffect(() => {Animated.timing(positionY,{toValue: BOX_FINAL_Y,duration: 1000,useNativeDriver: false,easing: Easing.ease}).start(() => {// 这个是动效的回调函数，会在动效结束之后被调用，然后播放音效// 注意用 replayAsync 而不是 playAsynccrashSound.replayAsync();});}, [])const boxStyle = {position: 'absolute',top: positionY,left: BOX_INIT_X,width: BOX_SIZE,height: BOX_SIZE,backgroundColor: 'red'}return <Animated.View style={boxStyle} />
}

注意，使用 replayAsync 而不是 playAsync，是因为 playAsync 只能播一次，第二次调用就没声音了；而 replayAsync 每次调用都有声音。

效果

示例视频

参考链接

Expo - Playing sounds
React Native 中使用 Animated 实现物体下落动效

React Native Expo 项目中添加动画音效相关推荐

如何在React Native和Firebase中设置Google登录
Google sign-in is a great login feature to offer to your app's users. It makes it easier for them to ...
React Native填坑之旅--动画篇
React Native填坑之旅--Button篇 React Native填坑之旅--动画 React Native填坑之旅--HTTP请求篇动画是提高用户体验不可缺少的一个元素.恰如其分的动画可 ...
VB.NET 在项目中添加App.config的配置
右击项目,选择属性, 在属性中选择Settings选项卡,Scope选择User 这样就会在项目中添加了App.config配置内容: <?xml version="1.0" ...
Entity Framework 的小实例：在项目中添加一个实体类，并做插入操作
Entity Framework 的小实例:在项目中添加一个实体类,并做插入操作 Entity Framework 的小实例:在项目中添加一个实体类,并做插入操作 1>. 创建一个控制台程序 2 ...
关于如何正确地在android项目中添加第三方jar包
在android项目中添加第三方jar包虽然不是一个很复杂的问题,但是确实给很多开发者带来了不小的困扰.我自己就曾经碰到过calss not found exception ...
[react] 有在项目中使用过Antd吗？说说它的好处
[react] 有在项目中使用过Antd吗?说说它的好处 They gave every user a big surprise on Christmas Holiday. 个人简介我是歌谣,欢迎和 ...
给iOS项目中添加图片，并通过UIImageView引用和显示该UIImage图片
[问题] 关于iOS/iPhone中的文件选择对话框,用于用户去选择图片等文件过程中,问题转换为,需要给当前iOS项目中,添加一个图片. 类似于Windows开发中的资源文件,其中图片文件属于资源的 ...
Resx 文件无效。未能加载 .RESX 文件中使用的类型 System.Collections.Generic.List`1请确保已在项目中添加了必需的引用。
在C#程序编写过程中,会遇到:Resx 文件无效.未能加载 .RESX 文件中使用的类型 System.Collections.Generic.List1`请确保已在项目中添加了必需的引用. 主要原因 ...
圣诞节PNG免扣素材|轻松向现有项目中添加节日元素！
制作任何东西,从定制的圣诞卡,图标,可以用于网站设计或包装,甚至图形,照片和插图,PNG免扣格式图片素材,无疑可以帮助你有效的完成项目. 节日的装饰不仅仅包括挂一棵圣诞树和添加金属箔.装饰也可以延伸到 ...

React Native Expo 项目中添加动画音效

目录

背景

实现

代码

效果

参考链接

React Native Expo 项目中添加动画音效相关推荐

最新文章

热门文章