React Native上的動畫圖像序列

Question

我有一個包含一系列圖像的動畫：image01.png，image02.png，image03.png等。如何讓這些動畫在React Native上持續動畫？

Answer 1

你可以與圖書館嘗試：

• https://github.com/madsleejensen/react-native-image-sequence
• https://github.com/remobile/react-native-image-animation

首先是更加更加高效，二是純JavaScript。另一種方式是實現它自己的方式，喜歡這裏：https://github.com/facebook/react-native/issues/9280

它應該看起來像這樣

export default class Animation extends Component { 
    constructor(props) { 
     super(props); 
     this.images = [ 
      require('./img_01.png'), 
      require('./img_02.png'), 
      require('./img_03.png'), 
     ]; 
     this.next = this.next.bind(this); 
     this.state = {index: 0}; 
    } 

    componentDidMount() { 
     this.next(); 
    } 

    next() { 
     setTimeout(() => { 
      this.setState({index: (this.state.index+1)%3}); 
      this.next(); 
     }, 300); 
    } 

    render() { 
     return (
      <Image 
       source={this.images[this.state.index]} 
       style={styles.image} 
      /> 
     ) 
    } 
}