React Native将序列PNG图像显示为动画

Question

我有这张图片，其中包含动画的所有帧 https://raw.githubusercontent.com/codeshifu/react-thanos/master/lib/assets/thanos_snap.png

有什么方法可以在React Native中显示此图像吗？我一直在搜索，但是所有其他问题都与如何按顺序对图像列表进行动画处理有关，但就我而言，它只是一张图像。

Answer 1

看起来帧都在一个图像文件中，因此您可能只想渲染一次图像文件，然后在隐藏任何溢出的视图内转换图像。

// Imagine 32 frames of 100x100 image. 
<View style={{ width: 100, height: 100, overflow: "hidden" }}>
    <Image style={{ width: 3200, height: 100, transform: [ { translateX: 0 } ] }} />
</View>

React Native Transfrom docs

您可以将translateX设置为100 * i以显示索引为i的帧。

Answer 2

在这篇文章中，我基于@AJcodez的出色回答，提供了有关如何实现期望结果的更多信息。

这是必需的步骤：

1. 计算每个帧的大小。在我的情况下，图像为3840x80，共有48帧，因此每帧为80x80。

2. 初始化一个状态来保存当前帧索引。

3. 将translateX的值设置为-80 * currentFrameIndex（因为我们会将其从左向右转换）。

4. 每隔X毫秒触发setInterval来更新currentFrameIndex，一旦帧索引达到48，我们便会清除间隔并将索引设置回0。

这是结果：

您可以查看代码here。