React Native下拉图片放大动画

# interpolate

插值动画，可以实现分段动画，绑定到event上非常流畅

1. 下拉放大，上拉变成导航栏动画

   
   
   2.gif

'use strict';
// 图片高度为255
class Demo extends Component {
  constructor(props) {
    super(props);

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

  _renderHeaderParallaxImage() {
    const {scrollY} = this.state

    let translateY
    if (Platform.OS == 'ios') {
      translateY = scrollY.interpolate({
        inputRange: [255 - 64 + 50, 255 + (64 - 50), 255 + (64 - 50)], 
        outputRange: [255, 255 - 30, 255 - 30],
      })
    } else {
      translateY = scrollY.interpolate({
        inputRange: [255 - 44 + 30 + 20, 255 - 30 + 44 + 20, 255 - 30 + 44 + 20],
        outputRange: [255, 255 - 30, 255 - 30],
      })
    }

    return (
       this.setState({viewRef: findNodeHandle(this.refs.backgroundImage)})} // for android blur
        ref='backgroundImage'
        pointerEvents='none'
        style={[styles.postParallaxImage, {
          height: 255,
          transform: [{
            translateY: scrollY.interpolate({
              inputRange: [-255, 0, 255 - NavHeight, 255],
              outputRange: [255 / 2, 0, -(255 - NavHeight), -(255 - NavHeight)],
            })
          }, {
            scale: scrollY.interpolate({
              inputRange: [-255, 0, 255],
              outputRange: [2, 1, 1], // -255: 2, 0: 1, 255: 1  当scrollY在-255到0时，scale按照2-1的动画运动；当scrollY在0-255时，scale不变。可以输入任意数量对应的值，但必须是递增或者相等
            })
          }]
        }]}
        source={{uri: IMAGE_URL}}
      >
        

        
          '标题'
        

      
    )
  }


  render() {
    return (
      
        
        {/* 图片放在最下层，listiview的marginTop需要留出64的空白用来显示图片变成的nav bar*/}
        {/* 正常的逻辑是把拉伸图放在listView之上，这里为了显示refreshControl，把拉伸图的层次放在listView之下，所以在listView上放了一个高度为导航栏的空白view。 */}
        {this._renderHeaderParallaxImage()}

        {/* 不可以为listView的style加marginTop，在android上如果有refreshControl会在顶部有高度为44的空白 */}
        
        
          }
          renderHeader={}
          style={{backgroundColor: 'transparent'}} // 因为层次原因，防止把header遮住
          renderRow={} // renderRow需要背景色，把title遮住，并且不能设置margin（可以外面套一个大的view，在里面margin）
          // 把Animated.event绑定到onScroll或者手势中
          onScroll={Animated.event([{nativeEvent: {contentOffset: {y: this.state.scrollY}}}])}
          // 或者
          onScroll={(e) => {
            Animated.event([{nativeEvent: {contentOffset: {y: this.state.scrollY}}}])
              .call(this, e)
          }}
        />
      
    );
  }
}

2.下拉放大，上拉视差效果

3.gif

// 如果要视差效果，拉伸图的层次应该在listView之下，让拉伸图不遮挡listView的显示，同时listView的header设置为透明色高度为拉伸图的高度，其他地方设置为纯色，把拉伸图挡住