ios - React Native-iOS中的Bounce效果与动画diffclamp混淆

编辑:我讨厌谷歌搜索答案，并且发现一些十年前从未解决过的问题，所以我为那些可能想知道的人回答自己的问题。就我而言，我只是禁用了滚动 View 的bounces属性。由于FlatList扩展了React的ScrollView，因此在我创建的动画FlatList组件中将bounces设置为false可以阻止它弹起并解决了我的问题。祝你今天过得愉快。

希望您过得愉快。我试图动态设置标题的动画，但是由于某种原因，每当我滚动到滚动 View 的开始或结尾之外时，反弹效果就会与Animation混淆。(如下图gif所示)

GIF

Same GIF but higher resolution

如您所见，当我滚动到顶部并启用bounce动画时，页眉认为我正在向下滚动，因为bounce将列表中的第一个元素返回顶部。我该如何解决？我在网络上的某个地方看到，向动画值添加插值器会有所帮助，尽管我不太了解。
下面是我的代码。谢谢你

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList)

const tempArray = [
  ...(an array of my data)
]

export default class TempScreen extends React.Component {
  static navigationOptions = {
    header: null
  }

  constructor(props) {
    super(props)
    this.state = {
      animatedHeaderValue: new Animated.Value(0),
    }
  }

  render() {
    const animatedHeaderHeight = Animated.diffClamp(this.state.animatedHeaderValue, 0, 60)
      .interpolate({
        inputRange: [0, 70],
        outputRange: [70, 0],
      })
    return ( <
      View >
      <
      Animated.View style = {
        {
          backgroundColor: 'white',
          borderBottomColor: '#DEDEDE',
          borderBottomWidth: 1,
          padding: 15,
          width: Dimensions.get('window').width,
          height: animatedHeaderHeight,
        }
      } >
      <
      /Animated.View> <
      AnimatedFlatList scrollEventThrottle = {
        16
      }
      onScroll = {
        Animated.event(
          [{
            nativeEvent: {
              contentOffset: {
                y: this.state.animatedHeaderValue
              }
            }
          }]
        )
      }
      data = {
        tempArray
      }
      renderItem = {
        ({
          item
        }) =>
        <
        View style = {
          {
            flex: 1
          }
        } >
        <
        Text style = {
          {
            fontWeight: 'bold',
            fontSize: 30
          }
        } > {
          item.name
        } < /Text> <
        Text > {
          item.year
        } < /Text> <
        /View>
      }
      />

      <
      /View>

    )
  }
}

最佳答案

如果只想解决“弹跳”问题，则问题是iOS赋予diffClamp负的scrollY值。您需要对它们进行过滤，并确保scrollY保持> = 0，以避免diffClamp受过度滚动影响。

const clampedScrollY = scrollY.interpolate({
  inputRange: [0, 1],
  outputRange: [0, 1],
  extrapolateLeft: 'clamp',
});

另一个不错的技巧是使用“悬崖”技术，以使标题仅在最小scrollY位置之后消失。

这是我的应用程序中的代码:

const minScroll = 100;

const clampedScrollY = scrollY.interpolate({
  inputRange: [minScroll, minScroll + 1],
  outputRange: [0, 1],
  extrapolateLeft: 'clamp',
});

const minusScrollY = Animated.multiply(clampedScrollY, -1);

const translateY = Animated.diffClamp(
  minusScrollY,
  -AnimatedHeaderHeight,
  0,
);

const opacity = translateY.interpolate({
  inputRange: [-AnimatedHeaderHeight, 0],
  outputRange: [0.4, 1],
  extrapolate: 'clamp',
});

clampedScrollY将是:

当scrollY = 0时

当scrollY = 50

时为0

当scrollY = 100

时为0

30，当scrollY = 130

时
当scrollY = 270 时为

170

你明白了。因此，如果scrollY> 100，则diffClamp仅> 0，并且在该阈值之后以1递增1。