自定义切换幻灯片动画React Native，如何使其流畅？

Question

我需要制作切换幻灯片动画，我几乎做到了，右边的幻灯片动画看起来真的很好，但是左边的幻灯片动画不流畅，有什么想法可以修复它吗？

下面是我的代码：

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

 changeLogin = () => {
        if (!this.state.loginEmail){
            this.slideRight()
        } else {
            this.slideLeft()
        }
        this.setState({ loginEmail: !this.state.loginEmail })
      }

  handleViewRef = ref => this.view = ref;  

    slideRight = () => this.view.animate({ 

      0: {
        translateX: 0,
      },
      0.5: {
        translateX: 100,
      },
      1: {
        translateX: 150,
      },
      2: {
        translateX: 300,
    }  
      })


      slideLeft = () => this.view.animate({ 
        0: {
          translateX: 0,
        },
        0.5: {
          translateX: -0.3,
        },
        1: {
          translateX: -0.5,
        },
        2: {
          translateX: -1,
      }  
        })  


                    <TouchableWithoutFeedback  onPress={this.changeLogin}>
                        <View style={styles.buttonRowTop} >
                        <Animatable.View style={styles.buttonSwitch}
                        ref={this.handleViewRef}
                       >

                        </Animatable.View>
                        <View style={{flexDirection: 'row', justifyContent: 'space-between', width: 260, zIndex: 100, marginLeft: -180, marginTop: 5}}>
                            <Text style={[!loginEmail? styles.textSwitchActiveLeft: styles.textSwitchLeft ]}>Phone</Text> 
                            <Text  style={[loginEmail? styles.textSwitchInactive:styles.textSwitch]}>Email</Text> 
                        </View>
                        </View>
                    </TouchableWithoutFeedback>  

下面是它现在的样子：

​

​

Answer 1

我改变了slideLeft函数，动画现在看起来流畅多了：

 slideLeft = () => this.view.animate({ 
        0: {
          translateX: 100,
        },
        0.5: {
          translateX: -0.3,
        },
        1: {
          translateX: -0.5,
        },
        2: {
          translateX: -1,
        }  
        })