反应原生动画：滚动减慢时屏幕抖动

我在用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 } } }])}
          >

正如你可以从 gif 文件中看到的，当我slowly scroll the view屏幕在晃动。这发生在安卓中。在ios上运行得很好。

知道如何解决这个问题吗？

任何评论或建议都会非常有帮助:)

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

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

将 inputRange 增加到 [0, 200]，使其与 outputRange 的比率为 2。这将消除震动。