React Native Animatable Повторяющаяся петля изображения - PullRequest
Новая
       16

React Native Animatable Повторяющаяся петля изображения

0 голосов
/ 23 апреля 2020

Я очень новичок в анимации в React Native и пытаюсь создать вращение Земли. Я почти сделал это, но теперь я потерян и не уверен, где я ошибся. Это довольно просто использовать CSS в ванили JS, но в React Native это кажется хитрым.

Я использую реагировать-нативно-анимируемо , чтобы попытаться достичь этого.

Я бы хотел, чтобы изображение Земли бесконечно l oop выглядело как трехмерный шар. Вот где у меня проблемы, я не могу понять, как повторить изображение на оси X. Я приложил ссылку ниже к изображению текущего вывода кода и моего кода ниже.

Если бы кто-нибудь мог направить меня в правильном направлении, это было бы очень ценно. 

import React, {Component} from 'react';
import {StyleSheet, View, Image, ImageBackground} from 'react-native';
import * as Animatable from 'react-native-animatable';
export default class Planet extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.planet}>
          <View style={styles.imageContainer}>
            <Animatable.Image
              animation={{
                from: {translateX: 0},
                to: {translateX: 360},
              }}
              duration={20000}
              easing="linear"
              iterationCount="infinite"
              direction="normal"
              useNativeDriver
              style={{
                width: 800,
                height: 300,
                position: 'absolute',
                width: '100%',
              }}
              source={{
                uri:
                  'https://ak7.picdn.net/shutterstock/videos/14702407/thumb/1.jpg',
              }}
            />
            <Animatable.Image
              animation={{
                from: {translateX: 0},
                to: {translateX: -360},
              }}
              duration={10000}
              easing="linear"
              iterationCount="infinite"
              direction="normal"
              useNativeDriver
              style={{
                width: 300,
                height: 300,
                position: 'absolute',
                opacity: 0.5,
                transform: [{rotate: '20deg'}],
              }}
              source={{uri: 'http://artem.anmedio.ru/dev/planet/clouds.png'}}
            />
          </View>
        </View>
      </View>
    );
  }
}

const styles = {
  container: {
    height: '100%',
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'black',
  },
  planet: {
    width: 300,
    height: 300,
    borderRadius: 150,
    borderWidth: 1,
    borderColor: 'black',
    shadowColor: 'white',
    shadowRadius: 8.0,
    shadowOpacity: 1,
    elevation: 30,
    shadowOffset: {
      width: 0,
      height: 0,
    },
  },
  imageContainer: {
    overflow: 'hidden',
    width: 300,
    height: 300,
    borderRadius: 150,
  },
  background: {
    flex: 1,
    resizeMode: 'cover',
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
  },
};

https://drive.google.com/file/d/1b6dgPh-aX0KcBSjbmtZApsxXgE1yZeVd/view?usp=sharing

...