如何将多张图片的帧循环显示为动画

Question

我有几帧动画。我想循环显示动画。我读过： https://reactnative.dev/docs/animations https://reactnative.dev/docs/animated https://blog.bitsrc.io/making-animations-in-react-native-the-simplified-guide-6580f961f6e8 我尝试过实施： https://medium.com/react-native-training/react-native-animations-using-the-animated-api-ebe8e0669fae 但它们都没有涵盖多个动画帧以及如何使用简单的代码循环播放它们。我确信我需要做的很简单，但这些教程令人难以抗拒。

这是我正在使用的一些代码： 就在渲染之前

Images: [
        { id: 1, src: './assets//frame1.png', title: 'foo', description: 'bar' },
        { id: 2, src: './assets//frame2.png', title: 'foo', description: 'bar' },
        { id: 3, src: './assets//frame3.png', title: 'foo', description: 'bar' },
        { id: 4, src: './assets//frame4.png', title: 'foo', description: 'bar' },
        { id: 5, src: './assets//frame32.png', title: 'foo', description: 'bar' },

      ]

render() {
const items = this.state.Images.map((item, key) =>
    <Image key={item.id}>{item.name}</Image>

...

<View>
  {items}
</View>

这不起作用 - 对象作为反应子项无效......

我如何简单地首先显示该数组的第一个图像，然后让它循环遍历每个图像（创建动画）。

任何人都可以提供一个简单的代码块来演示如何在资产文件夹中循环/循环多个 .png 文件作为屏幕上的动画吗？

T

Answer 1

通过不透明度完成您所需的插值。

• 只需修改数据数组（如图像数组）并在动画视图中显示图像。

迭代图像数组并设置不透明度值。

    const data = ['red', 'green', 'blue', 'violet', 'pink', 'red'];
    this.animations = new Animated.Value(0);
    this.opacity = [];
    data.map((item, index) => {
      this.opacity.push(
        this.animations.interpolate({
          inputRange: [index - 1, index, index + 1],
          outputRange: [0, 1, 0],
        }),
      );
    });

• 现在 this.opacity 数组将包含每个项目相应的不透明度值。

现在开始循环。 （这里我使用 2 秒从一张图像到另一张图像的动画）

    Animated.loop(
      Animated.timing(this.animations, {
        toValue: length - 1,
        duration: 2000 * length,
        easing: Easing.linear,
        useNativeDriver: true,
      }),
    ).start();

为渲染中的每个项目设置不透明度

    const opacity = this.opacity[index];

完整代码（示例）

import React, {Component} from 'react';
import {View, StyleSheet, Animated, Easing} from 'react-native';

const data = ['red', 'green', 'blue', 'violet', 'pink', 'red'];

const length = data.length;

export default class App extends Component {
  constructor() {
    super();
    this.animations = new Animated.Value(0);
    this.opacity = [];
    data.map((item, index) => {
      this.opacity.push(
        this.animations.interpolate({
          inputRange: [index - 1, index, index + 1],
          outputRange: [0, 1, 0],
        }),
      );
    });
  }

  componentDidMount() {
    Animated.loop(
      Animated.timing(this.animations, {
        toValue: length - 1,
        duration: 2000 * length,
        easing: Easing.linear,
        useNativeDriver: true,
      }),
    ).start();
  }

  render() {
    return (
      <View style={styles.container}>
        {data.map((item, index) => {
          const opacity = this.opacity[index];
          return (
            <Animated.View
              style={[styles.item, {backgroundColor: item, opacity}]}
            />
          );
        })}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  item: {
    height: 200,
    width: 200,
    position: 'absolute',
  },
});

希望对你有帮助。