本文共 2701 字，大约阅读时间需要 9 分钟。

# interpolate

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

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

    

   

   2.gif

'use strict';// 图片高度为255class 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设置为透明色高度为拉伸图的高度，其他地方设置为纯色，把拉伸图挡住