React Native Animated 动画之手势跟踪和插值

demo：

export default class Test extends PureComponent {

  constructor (props) {
    super(props)

    this.state = {
      animatedValue: new Animated.Value(0),
    }
  }
  
  handleScrollViewScroll = (e) => {
    let scrollY = e.nativeEvent.contentOffset.y
    if (scrollY < 100) {
      Animated.event(
        [{ nativeEvent: { contentOffset: { y: this.state.animatedValue } } }],
        { listener: (event) => console.log(event) }, // Optional async listener
      )(e)
    }

  }

  render () {
    const opacity = this.state.animatedValue.interpolate({
      inputRange: [0, 100],
      outputRange: [1, 0],
    })

    const top = this.state.animatedValue.interpolate({
      inputRange: [0, 100],
      outputRange: [100, 0],
    })
    return (
      <Animated.ScrollView
        onScroll={this.handleScrollViewScroll}
        style={{
          backgroundColor: '#ccc',
          flex: 1,
          // marginTop: top,
          position:'relative',
          top: top,
          width: '100%',
        }}
      >
        <Animated.View
          style={{
            marginTop: 10,
            width: 100,
            height: 100,
            opacity: opacity,
            backgroundColor: 'red',
          }}
        />
        <View style={{ width: '100%', height: 300 }} />
        <View style={{ width: '100%', height: 300 }} />
        <View style={{ width: '100%', height: 300 }} />
        <View style={{ width: '100%', height: 300 }} />
        <View style={{ width: '100%', height: 300 }} />
      </Animated.ScrollView>
    )
  }
}

先放着，等会写笔记，手上还有个大活。。