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

Question

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

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

GIF

GIF相同但分辨率更高

如您所见，当我滚动到顶部并启用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>

    )
  }
}

Answer 1

如果只想解决“弹跳”问题，则问题是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时为0
• 当scrollY = 50时为0
• 当scrollY = 100时为0
• 当scrollY = 130时为30
• 当scrollY = 270时为170

你明白了。因此，diffClamp只有在scrollY> 100的情况下才会> 0，并且在该阈值之后将1加1。