当滚动ScrollView时，如何实现高度动画

Question

我正在尝试通过更改视图的高度来动画化视图，当用户滚动特定的滚动视图时。在IOS上看起来很好，虽然有一些抖动，但在Android上闪烁非常明显。这是我的代码。

滚动视图的滚动

 onScroll={(e) => {         
     this.state.profileTabAnimatedValue.setValue(e.nativeEvent.contentOffset.y);
 }}

高度插值对象

const headerHeight = this.state.profileTabAnimatedValue.interpolate({
      inputRange: [0,1],
      outputRange: [1,100]
});

我将会把headerHeight应用到一个视图上，以调整它的高度。

- Nevin

Answer 1

尝试使用动画事件方法：

onScroll={Animated.event(
  [{nativeEvent: {contentOffset: {y: this.state.profileTabAnimatedValue}}}]
)}

另外，如果你不想出现一些奇怪的行为，比如负高度之类的，请在你的插值中添加这个：

const headerHeight = this.state.profileTabAnimatedValue.interpolate({
      inputRange: [0,1],
      outputRange: [1,100]
      extrapolate: 'clamp'
});

最后一件事是您可以在scrollEventThrottle上玩耍，以控制ScrollView的事件触发频率，请参考this。

- Asaf David