# interpolate

插值動畫，可以實現(xiàn)分段動畫，綁定到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 (
      <Animated.Image
        onLoad={() => 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不變?？梢暂斎肴我鈹?shù)量對應的值，但必須是遞增或者相等
            })
          }]
        }]}
        source={{uri: IMAGE_URL}}
      >
        <Animated.View style={{
          top: 0,
          width: util.size.width,
          height: 255,
          position: 'absolute',
          backgroundColor: '#00000050'
          opacity: scrollY.interpolate({
            inputRange: [-255, 0, 255 - NavHeight, 255],
            outputRange: [0, 0, 1, 1]
          })
        }}/>

        <Animated.Text style={{
          color: 'white',
          backgroundColor: 'transparent',
          fontSize: 18,
          textAlign: 'center',
          transform: [{translateY: translateY}]
        }}>
          '標題'
        </Animated.Text>

      </Animated.Image>
    )
  }


  render() {
    return (
      <View>
        <StatusBar barStyle='light-content'/>
        {/* 圖片放在最下層，listiview的marginTop需要留出64的空白用來顯示圖片變成的nav bar*/}
        {/* 正常的邏輯是把拉伸圖放在listView之上，這里為了顯示refreshControl，把拉伸圖的層次放在listView之下，所以在listView上放了一個高度為導航欄的空白view。 */}
        {this._renderHeaderParallaxImage()}

        {/* 不可以為listView的style加marginTop，在android上如果有refreshControl會在頂部有高度為44的空白 */}
        <View style={{height: NavHeight}}/>
        <ListView
          scrollEventThrottle={16} // 設(shè)置為16足夠，不需要設(shè)置到1
          showsVerticalScrollIndicator={false}
          refreshControl={
            <RefreshControl
              tintColor='white'
              progressViewOffset={44}
              refreshing={boardArticleReducer.isRefreshing}
              onRefresh={this._onRefresh.bind(this)}
            />
          }
          renderHeader={<View style={{height: 255 - NavHeight}}/>}
          style={{backgroundColor: 'transparent'}} // 因為層次原因，防止把header遮住
          renderRow={<View style={{backgroundColor: 'white'}}/>} // renderRow需要背景色，把title遮住，并且不能設(shè)置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)
          }}
        />
      </View>
    );
  }
}

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

3.gif

// 如果要視差效果，拉伸圖的層次應該在listView之下，讓拉伸圖不遮擋listView的顯示，同時listView的header設(shè)置為透明色高度為拉伸圖的高度，其他地方設(shè)置為純色，把拉伸圖擋住
<Animated.Image
  style={{
    height: 300,
    transform: [{
      translateY: scrollY.interpolate({
        inputRange: [-300, 0, 300],
        outputRange: [300 / 2, 0, -300 / 3],
      })
    }, {
      scale: scrollY.interpolate({
        inputRange: [-300, 0, 300],
        outputRange: [2, 1, 1],
      })
    }]
  }}
/>