Question

我对React Native中的动画非常陌生，并且我正在尝试创建“地球旋转”。我几乎已经做到了，但是我现在迷路了，不确定自己哪里出了问题。在香草JS中使用CSS，这非常简单，但在React Native中似乎很棘手。

我正在使用react-native-animatable尝试实现这一目标。

我希望地球的图像无限循环，看起来像3D地球。这是我遇到的问题，我无法解决如何在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

反应本地可动画重复图像循环

0 个答案: