自定義切換滑動 animation React Native，如何讓它流暢？

Question

我需要制作 switch slide animation，我幾乎做到了，右邊的 slide animation 看起來非常好，但是左邊的 slide animation 工作不流暢，有什么辦法可以解決嗎？

這是我的代碼：

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 function，animation 現在看起來更流暢了：

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

Answer 2

我用功能風格自定義代碼

import React, { useRef, useState } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableWithoutFeedback,
  Dimensions,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { t } from 'i18next';
import appStyles from '../../../styles/global';
import COLORS from '../../../styles/colors';
import * as Animatable from 'react-native-animatable';

export const screenWidth = Dimensions.get('window').width;
let componentWidth = screenWidth;

const TransportMethod = props => {
  const [activeIndex, setActiveIndex] = useState(0);
  const updateIndex = () => {
    if (activeIndex === 0) {
      slideRight();
      setActiveIndex(1);
    } else {
      slideLeft();
      setActiveIndex(0);
    }
  };

  const handleViewRef = useRef(null);

  const slideRight = () =>
    handleViewRef.current.animate({
      0: {
        translateX: 0,
      },
      0.5: {
        translateX: 100,
      },
      1: {
        translateX: componentWidth / 2 - 5,
      },
    });

  const slideLeft = () =>
    handleViewRef.current.animate({
      0: {
        translateX: componentWidth / 2 - 5,
      },
      0.5: {
        translateX: componentWidth / 4,
      },
      1: {
        translateX: 0,
      },
    });

  return (
    <TouchableWithoutFeedback onPress={updateIndex}>
      <View
        style={styles.backgroundSwitch}
        onLayout={event => {
          componentWidth = event.nativeEvent.layout.width;
        }}
      >
        <Animatable.View
          duration={500}
          style={styles.buttonSwitch}
          ref={handleViewRef}
        />
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
          }}
        >
          <Text style={[styles.textOption]}>Walk</Text>
          <Text style={[styles.textOption]}>Car</Text>
        </View>
      </View>
    </TouchableWithoutFeedback>
  );
};

const styles = StyleSheet.create({
  backgroundSwitch: {
    backgroundColor: '#F3F7F9',
    height: 50,
    borderRadius: 100,
    justifyContent: 'center',
  },
  textOption: {
    width: '50%',
    textAlign: 'center',
  },
  buttonSwitch: {
    position: 'absolute',
    backgroundColor: 'white',
    height: '80%',
    width: '48%',
    borderRadius: 100,
    left: '2%',
    right: '2%',
  },
});

export default TransportMethod;