如何使用React Native将多个图片的帧显示为循环动画

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但它们都没有涵盖动画的多个帧以及如何使用简单的代码循环这些帧。我确信我需要做的是v简单，但这些教程已经结束了。

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

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],
    }),
  );
});

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

现在开始循环。（在这里，我用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',
  },
});

希望对你有帮助。