当引脚不正确时反应原生摇动引脚视图

如何解决当引脚不正确时反应原生摇动引脚视图

我正在尝试实现一个功能，当用户输入错误的密码时，4 个小圆圈会左右摇晃。

我创建了一个动画组件来测试我的代码并且它可以工作，但现在我的问题是我如何仅在密码不正确时应用它？

目前，当我输入错误的密码时，没有任何反应。我期望的是视图水平移动。

const shake = new Animated.Value(0.5);

const [subtle,setSubtle]=useState(true);
const [auto,setAuto]=useState(false);

const translateXAnim = shake.interpolate({
  inputRange: [0,1],outputRange: [subtle ? -8 : -16,subtle ? 8 : 16],});

const getAnimationStyles = () => ({
  transform: [
    {
      translateX: translateXAnim,},],});

const runAnimation = () => {
  Animated.sequence([
    Animated.timing(shake,{
      delay: 300,tovalue: 1,duration: subtle ? 300 : 200,easing: Easing.out(Easing.sin),useNativeDriver: true,}),Animated.timing(shake,{
      tovalue: 0,duration: subtle ? 200 : 100,{
      tovalue: 1,{
      tovalue: 0.5,]).start(() => {
    if (auto) runAnimation();
  });
};

const stopAnimation = () => {
 shake.stopAnimation();
};

const handleConfirm = async()=>{  
      const result = await authApi();
  
      if(!result.ok) {
      setAuto(true)
      setSubtle(true)
      runAnimation()
      stopAnimation()

      return setLoginFailed(true);
      }
  
      setLoginFailed(false);
      };

return(

<Animated.View style={[getAnimationStyles()]}>

        <View style={styles.circleBlock}> 
         {
           password.map(p=>{
             let style =p != ''?styles.circleFill
               : styles.circle
            
            return <View style={style}></View>
           })
         }
          </View>

          </Animated.View>

解决方法

问题是您没有将 useRef() 用于

const shake = new Animated.Value(0.5);

应该

const shake = useRef(new Animated.Value(0.5)).current;

useRef 返回一个可变的 ref 对象，其 .current 属性是 初始化为传递的参数 (initialValue)。返回的对象 将在组件的整个生命周期内持续存在。

https://reactjs.org/docs/hooks-reference.html#useref

为动画抖动效果制作了具有相同输入和输出范围值的单独博览会小吃。看看吧。

博览会：https://snack.expo.io/@klakshman318/runshakeanimation