简介
rn-animated-sprite-matrix 是一个 React Native 动画库，它提供了一种灵活的方式来创建并播放帧动画。该库可以用于创建背景动画、角色动画、游戏动画等。
rn-animated-sprite-matrix 基于 Animated 和 react-native-matrix-image 实现。它提供了一组 API 用于创建动画，并支持多帧动画和循环播放。
安装
使用 npm 或 yarn 在项目中安装 rn-animated-sprite-matrix：
npm install rn-animated-sprite-matrix --save
或
yarn add rn-animated-sprite-matrix
使用
基本使用
使用 rn-animated-sprite-matrix 创建一个简单的帧动画非常容易，以下代码演示了如何创建一个由三帧组成的动画：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- ---------------
------ -------------- ---- ----------------------------
----- ------------- - -
--------------------------
--------------------------
--------------------------
--
----- --- - -- -- -
----- ------------- - ---------------- ---------------------------
----- ----------------- - -------------------
------------------------------ -
-------- --
--------- -----
---------------- -----
---
----------
------ -
---------------
----------------------------
-----------------------------------
--------------------
-------------- ---- ------- -----
--
--
--
------ ------- ----在这里，我们首先从 rn-animated-sprite-matrix 导入 AnimatedSprite 组件，这是创建帧动画的关键。
我们还导入了 Animated 和 React，并创建了一个 animatedValue 变量，它将用于驱动动画。使用 Animated 库中的 sequence 和 timing 方法，我们将 animationSequence 定义为一条序列动画，它会在 1000 毫秒内将 animatedValue 变量从 0 变为 1，并无限循环。
最后，在 <AnimatedSprite> 组件中，我们将 spriteFrames 属性设置为我们希望在动画中使用的图片数组，animationFrameIndex 属性设置为 animatedValue，这是驱动动画的值，loopAnimation 属性设置为 true，这是帧动画应该无限循环的标志。
API
rn-animated-sprite-matrix 提供了一些 API 用于自定义动画，以下是使用 AnimatedSprite 组件可用的属性：
spriteFrames
- 类型：Array
- 默认：无
- 描述：该属性是一个数组，其中包含动画的一系列帧图像。每个元素应该是一个图像路径（如 require('./assets/1.png')）。
animationFrameIndex
- 类型：Animated.Value
- 默认：无
- 描述：这个值是驱动动画的值，它应该是 Animated 库中的一个值。在创建动画序列时，您可以使用此值来驱动帧动画。如下所示：
-- -------------------- ---- -------
----- ------------- - ---------------- ---------------------------
----- ----------------- - -------------------
------------------------------ -
-------- --
--------- -----
---------------- -----
---
----------
---------------
----------------------------
-----------------------------------
--------------------
-------------- ---- ------- -----
--loopAnimation
- 类型：Bool
- 默认：false
- 描述：这个值决定了动画是无限播放还是只播放一次。
fps
- 类型：Number
- 默认：30
- 描述：帧动画的帧速率。如果您希望动画在更快或更慢的速度上运行，请使用此属性。
matrixCellWidth
- 类型：Number
- 默认：无
- 描述：如果 spriteFrames 中的图像是大于一格的图片，那么您需要设置此属性来指定每一格的宽度。如果没设置会取第一帧的宽度。
matrixCellHeight
- 类型：Number
- 默认：无
- 描述：如果 spriteFrames 中的图像是大于一格的图片，那么您需要设置此属性来指定每一格的高度。如果没设置会取第一帧的高度。
onStart
- 类型：Function
- 默认：无
- 描述：当帧动画开始播放时调用此回调函数。
onFinish
- 类型：Function
- 默认：无
- 描述：当帧动画完成播放时调用此回调函数。
paused
- 类型：Bool
- 默认：false
- 描述：当 paused 属性被设置为 true 时，帧动画将暂停播放。
小结
rn-animated-sprite-matrix 是一个创建 React Native 帧动画的强大工具，它可以创建无限循环的动画，并提供多种自定义选项。在本文中，我们讨论了如何安装和基础使用 rn-animated-sprite-matrix，以及可用的选项和属性。希望这篇文章能帮助您更好地使用 rn-animated-sprite-matrix 来创建出色的帧动画。如果您有疑问或反馈，请在评论中留言，谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cbe81e8991b448da538