0

我正在尝试利用react-native-animatable来制作一系列动画图像。这是我的代码：

import * as Animatable from 'react-native-animatable';   

constructor(props) {
    super(props);
    this.images = [
            require('../../assets/img/04_rec_img/b1.png'),
            require('../../assets/img/04_rec_img/b2.png'),
            require('../../assets/img/04_rec_img/b3.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();
    }, 1000);

}

render(){
       <View style={{backgroundColor:'rgba(142, 142, 147, 0.24)', 
        width:67,height: 67, borderRadius: 67/2, justifyContent:'center', alignItems:'center',
         }}>
              <Animatable.Image duration={500} ease="ease-out" animation="slideInRight" source={this.images[this.state.index]}
               style={{width:36, height:36}} /> 

        </View> 

}

第一个图像滑动，但其余两个没有滑入，它们只是出现。

我想实现这样的： 在此处输入图像描述

请帮忙！！如果您有任何其他方法，也请分享。提前致谢

4

0 回答 0