I have 3 View in a ScrollView and How Can I Fade Right or Left each View on Scroll Down ?
<ScrollView > <View> <Text>Fade Right View 1</Text> </View> <View> <Text>Fade Right View 2</Text> </View> <View> <Text>Fade Right View 3</Text> </View> </ScrollView > Something like this: Element Fade In on Scroll (https://codepen.io/annalarson/pen/GesqK)
2 Answers
Answers 1
I have created a small example for you, but of course you need to fine tune it to be fully functional for your purposes.
Demo
Explanation
My example consists of two components. A Fade component and the actual ScrollView. The Fade Component handles the animation. The fade in animation is triggered by scrolling through the ScrollView (see handleScroll function).
Fade Component
class Fade extends Component { constructor(props) { super(props); this.state = { visible: props.visible, visibility: new Animated.Value(props.visible ? 1 : 0), }; }; componentWillReceiveProps(nextProps) { if (nextProps.visible) { this.setState({ visible: true }); } Animated.timing(this.state.visibility, { toValue: nextProps.visible ? 1 : 0, duration: 500, }).start(() => { this.setState({ visible: nextProps.visible }); }); } render() { const { style} = this.props; const containerStyle = { opacity: this.state.visibility.interpolate({ inputRange: [0, 1], outputRange: [0, 1], }), // interpolate opacity transform: [ { translateX: this.state.visibility.interpolate({ inputRange: [0, 1], outputRange: [-20, 0], }), // interpolate translateX to create a fade in left/right }, ], }; const combinedStyle = [containerStyle, style]; return ( <Animated.View style={this.state.visible ? combinedStyle : containerStyle} /> ); } } ScrollView Snippet
handleScroll(e) { if (e.nativeEvent.contentOffset.y > 50) { // you need to fine tune this value this.setState({ visible: true }); } } <ScrollView onScroll={(e) => this.handleScroll(e) } scrollEventThrottle={8}> <View style={{ backgroundColor: 'yellow', height: 200, marginTop: 10 }}/> <View style={{ backgroundColor: 'yellow', height: 200, marginTop: 10 }}/> <View style={{ backgroundColor: 'yellow', height: 200, marginTop: 10 }}/> <Fade style={{ backgroundColor: 'red', height: 200, marginTop: 10 }} visible={this.state.visible} /> </ScrollView> I hope my example gives you an idea how you can achieve your intended behavior.
Answers 2
You can use onScroll like this :
<ScrollView onScroll={this.handleScroll} /> After that :
handleScroll = (event: Object) => { console.log(event.nativeEvent); // You see {layoutMeasurement, contentOffset, contentSize} in nativeEvent } With contentOffset, layoutMeasurement and contentSize you can rewrite Element Fade In on Scroll in React Native!
0 comments:
Post a Comment