реагировать на нативную анимацию: дрожание экрана при замедлении прокрутки

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 } } }])}
          >

Как вы могли видеть из файла gif, когда я slowly scroll the view экран трясется. Это происходит в android. На ios работает нормально.

Есть идеи, как это исправить?

Любые комментарии или советы были бы очень полезны:)

Answer 1

Ваш inputRange [0,100] и outputRange [100,0] имеют соотношение 1.

Это означает, что для каждого пикселя, который вы перемещаете в ScrollView, ваш HeaderHeight будет уменьшен на единицу, что звучит замечательно, но значение, которое вы получаете из события scrollview, не является целым числом, является двойным, и на основе этих крошечных цифр оно будет пытаться «пропорции» вашего outputRange, и это весьма чувствительно в Android и, следовательно, дрожь.

Увеличьте ваш inputRange до [0, 200], чтобы он имел отношение 2 к выходному диапазону. Это удалит сотрясение.

Answer 2

Сделайте scrollview анимированным.

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

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