Анимация последовательности в реакции нативного - PullRequest
Новая
       23

Анимация последовательности в реакции нативного

0 голосов
/ 12 апреля 2019

Я пытаюсь использовать 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> 

}

Первое изображение скользит, но остальные два не скользят, вместо этого они просто появляются.

Я хотел бы добиться так: enter image description here

Пожалуйста, помогите!Если у вас есть другой подход, также, пожалуйста, поделитесьЗаранее спасибо

...