kdxcxs
4 years ago
1 changed files with 20 additions and 6 deletions
@ -1,20 +1,34 @@ |
|||||
import React from 'react'; |
import React, {useState} from 'react'; |
||||
import {View, Image, StyleSheet} from 'react-native'; |
import {Image, StyleSheet, Animated} from 'react-native'; |
||||
|
|
||||
export function YooBackground() { |
export function YooBackground() { |
||||
|
const imgPosition = useState(new Animated.ValueXY())[0]; |
||||
const styles = StyleSheet.create({ |
const styles = StyleSheet.create({ |
||||
backgroundContainer: { |
backgroundContainer: { |
||||
width: '100%', |
transform: [{translateX: -1500}], |
||||
height: '100%', |
|
||||
position: 'absolute', |
position: 'absolute', |
||||
zIndex: -1, |
zIndex: -1, |
||||
}, |
}, |
||||
}); |
}); |
||||
|
setInterval(() => { |
||||
|
Animated.timing(imgPosition, { |
||||
|
toValue: { |
||||
|
x: -Math.floor(Math.random() * 5000), |
||||
|
y: -Math.floor(Math.random() * 3000), |
||||
|
}, |
||||
|
duration: 10000, |
||||
|
useNativeDriver: true, |
||||
|
}).start(); |
||||
|
}, 10000); |
||||
return ( |
return ( |
||||
<View style={styles.backgroundContainer}> |
<Animated.View |
||||
|
style={[ |
||||
|
styles.backgroundContainer, |
||||
|
{transform: imgPosition.getTranslateTransform()}, |
||||
|
]}> |
||||
<Image |
<Image |
||||
source={require('../../assets/pawel-czerwinski-aelD0Zrmsy0-unsplash.jpg')} |
source={require('../../assets/pawel-czerwinski-aelD0Zrmsy0-unsplash.jpg')} |
||||
/> |
/> |
||||
</View> |
</Animated.View> |
||||
); |
); |
||||
} |
} |
||||
|
Loading…
Reference in new issue