Browse Source

feat: keep the background img moving

pull/1/head
kdxcxs 4 years ago
parent
commit
df16af519c
  1. 26
      src/ui/YooBackground.js

26
src/ui/YooBackground.js

@ -1,20 +1,34 @@
import React from 'react';
import {View, Image, StyleSheet} from 'react-native';
import React, {useState} from 'react';
import {Image, StyleSheet, Animated} from 'react-native';
export function YooBackground() {
const imgPosition = useState(new Animated.ValueXY())[0];
const styles = StyleSheet.create({
backgroundContainer: {
width: '100%',
height: '100%',
transform: [{translateX: -1500}],
position: 'absolute',
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 (
<View style={styles.backgroundContainer}>
<Animated.View
style={[
styles.backgroundContainer,
{transform: imgPosition.getTranslateTransform()},
]}>
<Image
source={require('../../assets/pawel-czerwinski-aelD0Zrmsy0-unsplash.jpg')}
/>
</View>
</Animated.View>
);
}

Loading…
Cancel
Save