反应本地动画：滚动变慢时屏幕抖动

Question

我正在使用Animated.View更改标题高度。

它在ios中运行良好，但在android中，当我缓慢滚动时，整个视图都在晃动。

1）首先，我设置状态

 this.state = {
      scrollY:new Animated.Value(0)
   }

2）在render()内部，渲染要设置动画的视图的高度。

const HeaderHeight = this.state.scrollY.interpolate({
      inputRange: [0, 100],
      outputRange: [100, 0],
      extrapolate: 'clamp'
    })

3）我将标题设置为：

  <Animated.View style={{width:'100%', height:HeaderHeight, backgroundColor:'transparent', justifyContent:'flex-end'}}>
 ...
  </Animated.View>

4）在滚动视图中：

<ScrollView
          scrollEventThrottle={16}
          onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }])}
          >

当我slowly scroll the view时，您会从gif文件中看到屏幕在晃动。这是在android中发生的。在ios上可以正常工作。

有什么解决方法吗？

任何评论或建议都会很有帮助：）

Answer 1

您的inputRange [0,100]和outputRange [100,0]的比率为1。

这意味着对于在ScrollView中移动的每个像素，HeaderHeight都会减小1，这听起来不错，但您从scrollview事件中获得的值不是整数，而是双精度值，并且基于这些微小的数字会尝试“长宽比”您的outputRange，这在Android中非常敏感，因此很摇晃。

将inputRange增大为[0，200]，因此与outputRange相关的比率为2。这将消除抖动。

Answer 2

这可能有点棘手，但尽量避免将 translate prop 设置为 FlatList 的样式，否则包装 Flatlist 的组件，跳转将消失。要在第一项之前添加空白空间，您可以设置 contentContainer={{paddingTop:}}。就我而言，希望这对某人有所帮助。

Answer 3

使您的scrollview生动起来。

<Animated.ScrollView 
            style={{flex: 1}}
            onScroll={Animated.event([
              { nativeEvent: { contentOffset: { y: this.scrollY } } }
            ])}
          >

...
...
</Animated.ScrollView>