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>
);
}
}
私は、ネイティブドライバを使用してAnimated.eventでdiffClampを実装しようとしています。 しかし、私はアニメーション化された価値の結果をほとんどコントロールしていないようです。 iOS Facebookアプリと同じヘッダースクロールをしたいのですが、いくつかの問題が発生しています。 ビューの上部にあるとき、またはビューをオーバーロールしているときに、ヘッダーが隠れてしまうのを防ぐことはできません。また、ナビゲーションバーがスライドアニメーションの途中でスクロールを停止した場合は、完全に非表示にする必要があります。私は、イベントから現在のスクロール値を読み取ることができないときに、これらのどれを実装することができないのか分かりません。 – David
これはより複雑ですが、アニメーション値リスナーを使用することは可能です。あなたのスクロールAnimated.Valueを取ってそこにリスナーを追加し、スクロールが止まるときにdiffClampが現在の値を取得し、それに応じてアニメーション化するのと同じロジックを実装することができます。私はそれを実装しましたが、残念ながら私はもうレポを見つけることができません。 –
アドバイスをいただきありがとうございます。リスナーの値がアニメーションの値として使用するのに十分なパフォーマンスを持つとは思えませんでしたが、イベントのアニメーション値と同じように機能するようです。現在、リスナーからの値を必要な計算を実行する関数に渡します。クランプしてから、アニメーションに使用される新しいanimated.valueにsetValueを使用します。それは多かれ少なかれあなたがそれを実装した方法ですか、私はそれを違う方法で行うべきですか? – David