react仿京東客戶端首頁導航條動畫效果

之前使用好多客戶端都做了這樣的效果,就是可以隨着滑動的距離調節導航條的透明度和顏色。所以說,這個效果學會之後,不管是京東還是qq的個人資料頁,都不在話下。
實現原理:既然是隨着滑動的距離來調節導航條的透明度和顏色,那麼ScrollView就是少不了的了。然後,還需要的一個回調函數,用來監聽它的滑動事件,這個時候我們就可以獲得ScrollVie的座標變化。最後,只需要將我們拿到的y軸的座標變化值與導航條的屬性綁定起來即可。

閒話不多說,直接上代碼……
代碼實現:

<ScrollView style={{flex: 1}} ref='scroll' 
        onScroll={this._onScroll.bind(this) }
        scrollEventThrottle={16}>
        ...
        ...
        ...
</ScrollView>

當ScrollView滑動的時候,onScroll方法會不停的回調,所以我們要在onScroll方法中將y軸的變化值與導航欄的屬性值進行綁定。

_onScroll(e) {
        Animated.event(
            [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
            {
                listener: () => {
                    // let y = e.nativeEvent.contentOffset.y;
                }
            }
        )(e);
    }

注:this.state.scrollY要在構造函數中進行初始化,this.state = {scrollY: new Animated.Value(0)}。
最後就是用這個this.state.scrollY的值來動態的改變導航欄的效果。

<Animated.View
    style={{position: 'absolute',top: 0,left: 0,right: 0,height: 64,
    backgroundColor: '#fafafa',
    opacity: this.state.scrollY.interpolate({
        inputRange: [0, 100, 100 + 0.5],
        outputRange: [0, 0.9, 0.9]
        }),
    }}>
</Animated.View>

注:用的是帶動畫的View(Animated.View),將y軸的變化綁定到opacity屬性上,隨着滑動,改變導航欄的透明度,滑動100的時候,導航欄效果不變。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章