我的React Native动画持续时间不起作用

Question

我的登录屏幕上有一个动画，当单击登录按钮时，该按钮应向下滑动按钮，并同时向上滑动电子邮件和密码输入框，我的持续时间为2000毫秒，但位置发生了变化瞬间而不是平稳地滑动。

动画位于功能组件中，因此在单击以反转动画之前停止动画的还原，因此我使用useState（）来保持位置。（以前在我使用useState（）之前，当我更改了输入框中的文字，动画将重置为原始位置）

这里是动画

  const [Buttons, setButtons] = useState(200);
  const [Input, setInput] = useState(800);
  const AnimatedButtons = new Animated.ValueXY({ x: 0, y: Buttons })
  const AnimatedInputs = new Animated.ValueXY({ x: 0, y: Input })

  const StartAnmation = () => {
  setButtons(800);
  Animated.timing(
  AnimatedButtons, {
  toValue: { x: AnimatedButtons.x, y: AnimatedButtons.y },
  duration: 2000,
  useNativeDriver: true,
}).start()

setInput(-100);
Animated.timing(AnimatedInputs, {
  toValue: { x: AnimatedInputs.x, y: AnimatedButtons.y },
  duration: 2000,
  useNativeDriver: true,
}).start()
}

 const ReverseAnimation = () => {
 setButtons(200)
 Animated.timing(
  AnimatedButtons, {
  toValue: { x: AnimatedButtons.x, y: AnimatedButtons.y },
  duration: 2000,
  useNativeDriver: true,
}).start()

setInput(800)
Animated.timing(AnimatedInputs, {
  toValue: { x: AnimatedInputs.x, y: AnimatedInputs.y },
  duration: 2000,
  useNativeDriver: true,
}).start()
}

我有2个按钮onPress（）来调用动画，并有2个视图可以改变位置，位置可以改变，但是我不会逐渐滑出，只是立即改变

谢谢

Answer 1

将您的代码与以下代码进行比较。

注意：如果不需要反转动画，则可以删除该侦听器。

import React from 'react';
import {
  View, StyleSheet, Animated, Button,
} from 'react-native';

export default function App() {
  const slide = new Animated.Value(0);
  let animationValue;
  slide.addListener(({ value }) => { animationValue = value; });
  const moveUp = slide.interpolate({ inputRange: [0, 1], outputRange: [0, -100] });
  const moveDown = slide.interpolate({ inputRange: [0, 1], outputRange: [0, 100] });

  const animate = () => {
    Animated.timing(slide,
      {
        toValue: animationValue > 0.5 ? 0 : 1,
        duration: 1000,
        useNativeDriver: true,
      }).start();
  };

  return (
    <View style={styles.container}>
      <Animated.View style={{ ...styles.input, transform: [{ translateY: moveUp }] }} />
      <Animated.View style={{ ...styles.button, transform: [{ translateY: moveDown }] }}>
        <Button title="Signin " onPress={animate} />
      </Animated.View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 50,
  },
  input: {
    height: 200,
    width: '100%',
    backgroundColor: 'grey',
  },
  button: {
    height: 200,
    marginTop: 20,
    width: '100%',
    backgroundColor: '#00000066',
    alignItems: 'center',
    justifyContent: 'center',
  },
});