1

我的登录屏幕中有一个动画，它应该在单击登录按钮时向下滑动按钮并同时向上滑动电子邮件和密码输入框，我的持续时间为 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 个改变位置的视图，位置改变得很好，但我不会逐渐滑出，只是立即改变

谢谢

4

0 回答 0