反应原生动画序列拦截更改

Question

是否有办法知道随后何时执行特定动画，以便将状态设置为状态？

我有一个包含图像和视频的元素数组，该数组的每个元素都包含一个持续时间。

我必须在数组中定义的持续时间内重现每个元素。

但是我遇到了问题，因为我当时无法设置要复制的特定项目。

链接：Expo

代码：

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  Dimensions,
  Animated,
  Easing,
  Image,
  StatusBar,
} from 'react-native';
import { Constants, Video } from 'expo';
const { width } = Dimensions.get('window');

const arr = [
  {
    id: 0,
    timer: 14000,
    type: 1,
    url:
      'https://scontent-msp1-1.cdninstagram.com/vp/d513ee0212c97d05e10d70afca94bc0a/5CB445A0/t50.12441-16/56993789_129445468151136_4722826772916052125_n.mp4?efg=eyJ2ZW5jb2RlX3RhZyI6InZ0c192b2RfdXJsZ2VuLjQ4MC5jb250cm9sX3NpZGVjYXIifQ&_nc_ht=scontent-msp1-1.cdninstagram.com&vtsbc=1',
  },
  {
    id: 1,
    timer: 5000,
    type: 0,
    url:
      'https://scontent-msp1-1.cdninstagram.com/vp/2c47a274c12d17fe83e240a00e4906c9/5CB46160/t51.12442-15/e35/56391694_411695079627974_2682719859211289992_n.jpg?_nc_ht=scontent-msp1-1.cdninstagram.com&se=7&ig_cache_key=MjAyMTA4MTY1Mjk4MzE0NDQyMA%3D%3D.2',
  },
  {
    id: 2,
    timer: 5000,
    type: 0,
    url:
      'https://scontent-msp1-1.cdninstagram.com/vp/8b8ddd0281e885a2620aa58905a879f7/5CB50C64/t51.12442-15/e35/55788474_314451852556821_4190846479622237104_n.jpg?_nc_ht=scontent-msp1-1.cdninstagram.com&se=7&ig_cache_key=MjAyMTE0NDQwMjg2NjI3MjMwMg%3D%3D.2',
  },
  {
    id: 3,
    timer: 7000,
    type: 1,
    url:
      'https://scontent-msp1-1.cdninstagram.com/vp/a92ae16e587dea1c6a331134ad46bd54/5CB45FD9/t50.12441-16/57579835_2344121102466466_6101710668128382339_n.mp4?efg=eyJ2ZW5jb2RlX3RhZyI6InZ0c192b2RfdXJsZ2VuLjQ4MC5jb250cm9sX3NpZGVjYXIifQ&_nc_ht=scontent-msp1-1.cdninstagram.com&vtsbc=1',
  },
];

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      id: 0,
    };
    this.animatedValue = [];
    arr.forEach((v, i) => {
      this.animatedValue[i] = new Animated.Value(0);
    });
  }

  componentDidMount() {
    this.animate();
  }

  animate() {
    const animations = arr.map((v, i) => {
      return Animated.timing(this.animatedValue[i], {
        toValue: 1,
        duration: arr[i].timer,
        easing: Easing.linear,
      });
    });
    Animated.sequence(animations).start();
    setInterval(() => {
      this.setState({ id: this.state.id + 1 });
      console.log(':', this.state.id);
    }, arr[this.state.id].timer);
  }

  render() {
    return (
      <View style={styles.container}>
        <StatusBar hidden />
        <View
          style={{
            flexDirection: 'row',
            backgroundColor: '#000000',
            marginLeft: 2,
            marginRight: 2,
          }}>
          {arr.map((prop, key) => {
            const widthAni = this.animatedValue[key].interpolate({
              inputRange: [0, 1],
              outputRange: ['0%', '100%'],
            });
            return (
              <View
                style={{
                  backgroundColor: 'rgba(255,255,255,0.4)',
                  height: 3,
                  width: width / arr.length,
                  borderRadius: 1,
                  marginRight: 2,
                }}>
                <Animated.View
                  style={{
                    backgroundColor: 'rgba(255,255,255,1)',
                    height: 3,
                    width: widthAni,
                    borderRadius: 1,
                  }}
                />
              </View>
            );
          })}
        </View>
        {arr.map((prop, key) => {
          //console.log(this.state.id);
          return (
            <View>
              {arr[this.state.id].type == 0 ? (
                <Image
                  style={{ width: '100%', height: '100%' }}
                  source={{
                    uri: arr[this.state.id].url,
                  }}
                />
              ) : (
                <Video
                  source={{
                    uri: arr[this.state.id].url,
                  }}
                  rate={1.0}
                  volume={1.0}
                  isMuted={false}
                  resizeMode="cover"
                  shouldPlay
                  useNativeControls
                  style={{
                    width: Dimensions.get('window').width,
                    height: Dimensions.get('window').height,
                  }}
                />
              )}
            </View>
          );
        })}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    //justifyContent: 'center',
    //paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
});