Использовать эффект обратной анимации не показывается - PullRequest
Новая
       62

Использовать эффект обратной анимации не показывается

0 голосов
/ 29 апреля 2020

Проблема:

В настоящее время я борюсь с useEffect Hook вместе с Animated.timing. Каким-то образом обратная анимация не отображается. Тумблер просто возвращается назад (см. Рисунок ниже). Смущает, что обратный вызов анимации успешно вызван.

Разыскиваемое поведение: Ползунок должен плавно анимировать взад-вперед при смене активной опоры.

Animation

Код

Слайдер : 

const Slider = ({sliderWidth, circleHeight, active, onToggle}) => {
    const transformX = new Animated.Value(0);

    React.useEffect(() => {
      console.log('only run when active changed', transformX);
      const value = active ? sliderWidth-circleHeight: 0;
      console.log('value', value);
        Animated.timing(transformX, {
          toValue: value,
          duration: 500,
          useNativeDriver: true
        }).start(() => console.log('animation done'));
    }, [active, transformX, sliderWidth, circleHeight]);

    return (
      <View style={{position: 'absolute',width: sliderWidth+10, backgroundColor: 'white', borderBottomLeftRadius: 8, borderBottomRightRadius: 8, flexDirection: 'column', alignItems: 'center'}}>
        <View style={{width: sliderWidth, borderRadius: sliderWidth/2, borderWidth: 1, height: circleHeight,justifyContent: 'center', alignItems: 'center', marginTop: 8, marginBottom: 8, backgroundColor: 'white'}}>
          <Text style={{fontSize: 11}}> {active ?  "Pickup" : "Delivery"} </Text>
          <TouchableOpacity onPress={onToggle} style={{position: 'absolute', left:0,  transform: [{translateX: transformX}]}}>
          <View style={{height: circleHeight-2, width: circleHeight-2, borderRadius: circleHeight/2-1, backgroundColor: 'orange' }} />
          </TouchableOpacity>
        </View>
      </View>
    );
};

Приложение: 

export default function App() {
  const sliderWidth = WIDTH/3;
  const circleHeight = 30;
  const [active, setActive] = React.useState(0);
  return (
    <View style={styles.container}>
      <Slider sliderWidth={sliderWidth} circleHeight={circleHeight} onToggle={() => setActive(!active)} active={active}/>
    </View>
  );
}

Закуска

https://snack.expo.io/@tim1717 / useeffect-animation

1 Ответ

1 голос
/ 29 апреля 2020

Это действительно просто, вместо этого вы должны использовать transformX в качестве состояния. Честно говоря, я не знаю, что вызывает проблему, но это проблема там. 

const Slider = ({sliderWidth, circleHeight, active, onToggle}) => {
  const [transformX] = React.useState(new Animated.Value(0));
...
...