From df16af519cc38a291d74adee070a3d54e1460668 Mon Sep 17 00:00:00 2001
From: kdxcxs <cx@kdxcxs.com>
Date: Wed, 2 Dec 2020 15:24:20 +0800
Subject: [PATCH] feat: keep the background img moving

---
 src/ui/YooBackground.js | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/ui/YooBackground.js b/src/ui/YooBackground.js
index 9257aea..c729e1f 100644
--- a/src/ui/YooBackground.js
+++ b/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>
   );
 }