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

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。这将消除震动。