2017-01-27 21 views
1

Animated.diffClampを実装する方法のコード例はありますか?反応ネイティブでAnimated.diffClampを使用する方法

Google Playアプリで紹介されているようなヘッダースクロールアニメーションを作成しようとしています。スクロールダウンを開始するときにヘッダーはすでに非表示になっていますが、スクロールを開始するとすぐにヘッダーを再表示したいという問題があります。

class Services extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
    scrollY : new Animated.Value(0), 
    } 
} 

renderScrollViewContent(){ 
    return (
    <View style={styles.scrollViewContent}> 
    </View> 
) 
} 

render() { 
    const headerHeight = this.state.scrollY.interpolate({ 
    inputRange: [0, 60], 
    outputRange: [0, -60], 
    extrapolate: 'clamp' 
    }); 

    return (
    <View style={styles.container}> 
     <ScrollView style={styles.container} 
     scrollEventThrottle={16} 
     onScroll={Animated.event(
      [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}] 
     )} 
     > 
     {this.renderScrollViewContent()} 
     </ScrollView> 
     <Animated.View style={[styles.header, {top: headerHeight}]}> 
     <View style={styles.bar}> 
      <Text style={styles.title}>Title</Text> 
     </View> 
     </Animated.View> 
    </View> 
); 
} 
} 

答えて

3

これをこの使用例に正確に追加しました。ここにドキュメントページがありますhttps://facebook.github.io/react-native/docs/animated.html#diffclamp

また、トランスレートトランスフォームで使用することをお勧めします(パフォーマンスが向上し、ネイティブドライバでも使用できます)。ここにあなたの例では、それを使用してレンダリングします:どのように動作

const headerTranslate = Animated.diffClamp(this.state.scrollY, 0, 60) 
    .interpolate({ 
    inputRange: [0, 1], 
    outputRange: [0, -1], 
    }); 

return (
<View style={styles.container}> 
    <ScrollView style={styles.container} 
    scrollEventThrottle={16} 
    onScroll={Animated.event(
     [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}] 
    )} 
    > 
    {this.renderScrollViewContent()} 
    </ScrollView> 
    <Animated.View style={[styles.header, {transform: [{translateY: headerTranslate}]}]}> 
    <View style={styles.bar}> 
     <Text style={styles.title}>Title</Text> 
    </View> 
    </Animated.View> 
</View> 
); 

は、それが0と60の間にクランプされるように、我々は値のマイナスを作るために補間を使用した後、我々は(我々はそれがアップ翻訳したい、diffClampにスクロール位置を通過しています)。

+1

私は、ネイティブドライバを使用してAnimated.eventでdiffClampを実装しようとしています。 しかし、私はアニメーション化された価値の結果をほとんどコントロールしていないようです。 iOS Facebookアプリと同じヘッダースクロールをしたいのですが、いくつかの問題が発生しています。 ビューの上部にあるとき、またはビューをオーバーロールしているときに、ヘッダーが隠れてしまうのを防ぐことはできません。また、ナビゲーションバーがスライドアニメーションの途中でスクロールを停止した場合は、完全に非表示にする必要があります。私は、イベントから現在のスクロール値を読み取ることができないときに、これらのどれを実装することができないのか分かりません。 – David

+0

これはより複雑ですが、アニメーション値リスナーを使用することは可能です。あなたのスクロールAnimated.Valueを取ってそこにリスナーを追加し、スクロールが止まるときにdiffClampが現在の値を取得し、それに応じてアニメーション化するのと同じロジックを実装することができます。私はそれを実装しましたが、残念ながら私はもうレポを見つけることができません。 –

+0

アドバイスをいただきありがとうございます。リスナーの値がアニメーションの値として使用するのに十分なパフォーマンスを持つとは思えませんでしたが、イベントのアニメーション値と同じように機能するようです。現在、リスナーからの値を必要な計算を実行する関数に渡します。クランプしてから、アニメーションに使用される新しいanimated.valueにsetValueを使用します。それは多かれ少なかれあなたがそれを実装した方法ですか、私はそれを違う方法で行うべきですか? – David

関連する問題