动画在本机反应中无法正常工作答案

【问题标题】：Animation does not work properly in react native动画在本机反应中无法正常工作
【发布时间】：2021-01-13 03:36:56
【问题描述】：

我尝试通过观看教程制作轮播，但我无法让它用于事件驱动的动画。而不是动画它只是将位置更新到新位置。

如果我只使用一种类型的动画进行过渡，则不会发生这种情况，只提到一个值来变换旋转而不是传递表达式。

const cards = ["tomato", "teal", "pink"]
const alpha = Math.PI/6

const Trans = () => {
const value = React.useRef(new Animated.Value(0)).current
const [toggled, setToggled] = React.useState(false)

const animationFn = () => {
    Animated.spring(value, {
        toValue: 1,
        friction: 10,
        useNativeDriver: true
    }).start()
    setToggled(toggled => !toggled)
}

const rotateOpen = (rotate) => {
    return value.interpolate({       
        inputRange: [0, 1],
        outputRange: ['0rad', `${rotate}rad`]
    })
}

const rotateClose = (rotate, maxValues) => {
    return value.interpolate({       
        inputRange: [0, 1],
        outputRange: [`${maxValues}rad`, `${rotate}rad`]
    })
}

return(
    <>
    {cards.map((card, index) => {
        const rotate = toggled ? (index - 1) * alpha : 0
        const maxValues = (index-1) * alpha
        return (
            <Animated.View key={card} style={{transform: [
                {translateY: -50},
                {translateX: -100},                 
                {rotate: !toggled ? rotateOpen(rotate) : rotateClose(rotate, maxValues) },                        
                {translateX: 100},                  
            ], borderRadius: 15, position: 'absolute', backgroundColor: card, height: 100, width: 200}} />
        )
    })}

  
    <View style={{paddingTop: 100}}>
        <TouchableOpacity onPress={() => { animationFn() }}>
        <Text style={{fontSize: 30}}>  Animate </Text>
        </TouchableOpacity>
    </View>
    </>
)
}

【问题讨论】：

显示您希望动画的样子...
您能否将计算出的 rotate: 值输出到您的 consol.log 以查看其真实值是什么 - 例如，如果 index==0 会发生什么？您可以在变量 currot = !toggled 中设置值？ rotateOpen(rotate) : rotateClose(rotate, maxValues) 然后在 rotate: currot 中使用该变量来看看会发生什么。您在控制台上看到任何错误吗？
值是正确的，只是动画没有发生，只是更新到最终状态

标签： react-native react-native-reanimated

【解决方案1】：

您的插值不应在打开和关闭函数之间发生变化。动画库知道，当你从 0 到 1 时，你正在将块“旋转”出来，然后当你从 1 回到 0 时，你正在反向应用相同的插值

所以这段代码对我来说似乎可以正常工作：

const Trans = () => {
  const value = React.useRef(new Animated.Value(0)).current;
  const [toggled, setToggled] = React.useState(false);

  useEffect(() => {
    Animated.spring(value, {
      toValue: toggled ? 0 : 1,
      friction: 10,
      useNativeDriver: false,
    }).start();
  }, [toggled, value]);

  return (
    <>
      {cards.map((card, index) => {
        const rotate = (index - 1) * alpha;

        return (
          <Animated.View
            key={card}
            style={{
              transform: [
                { translateY: -50 },
                { translateX: -100 },
                {
                  rotate: value.interpolate({
                    inputRange: [0, 1],
                    outputRange: ['0rad', `${rotate}rad`],
                  }),
                },
                { translateX: 100 },
              ],
              borderRadius: 15,
              position: 'absolute',
              backgroundColor: card,
              height: 100,
              width: 200,
            }}
          />
        );
      })}

      <View style={{ paddingTop: 100 }}>
        <TouchableOpacity
          onPress={() => {
            setToggled(!toggled);
          }}>
          <Text style={{ fontSize: 30 }}> Animate </Text>
        </TouchableOpacity>
      </View>
    </>
  );
};

【讨论】：