reactjs - React Native 可拖动组件 - 允许拖动直到达到某个 x 值，然后动画出来？

问题描述

好的，这就是我在 RN 中尝试做的事情——我希望能够在 x 轴上拖动这些 Card 组件。当卡片在右侧或左侧达到 x 值阈值时，将取消可拖动性，并且卡片会为最左侧或最右侧的静态位置设置动画。

我有“outro”按比例缩小并翻译动画工作：

let animatedValue = new Animated.Value(0);
Animated.timing(animatedValue, {
          toValue: 1,
          duration: 1000,
          easing: Easing.out(Easing.exp)
      }).start()

和风格

transform: [
            {
                translateX: animatedValue.interpolate({
                    inputRange: [0, 1],
                    outputRange: [0, 120]
                })
            },
            {
                translateY: animatedValue.interpolate({
                    inputRange: [0, 1],
                    outputRange: [0, 10]
                })
            },
            {
                scaleX: animatedValue.interpolate({
                    inputRange: [0, 1],
                    outputRange: [1, 0.8]
                })
            },
            {
                scaleY: animatedValue.interpolate({
                    inputRange: [0, 1],
                    outputRange: [1, 0.8]
                })
            }
        ]

以及我计划从https://www.youtube.com/watch?v=_5-6xVmcIUA获取的拖动代码

我只是不知道如何在任一端达到某个 x 值时触发此动画（参考图表），或者这是否是最有效的方法。

我研究了刷卡库和包，但我希望尽可能少地这样做。

当达到某个 x 限制时，如何触发动画/禁止拖动？

标签： reactjsreact-nativeanimation

reactjs - React Native 可拖动组件 - 允许拖动直到达到某个 x 值，然后动画出来？

问题描述

解决方案

推荐阅读