Question

我正在尝试在React-Native中创建一个动画“视差”图像。我有一个静态背景图像和两个单独的图像作为叠加。目标是创建类似于此网站http://www.digitalhands.net/或https://www.galaxia.co/上的图片的内容。我从哪里开始呢？最初，我很高兴它从左到右依次移动等等。之后我想制作它以便使用陀螺仪获取x和y值来动画图像。

Answer 1

视差效应包括以不同速度和相同方向移动的图像，使得物体“越近”，移动得越快，这就产生了三维的幻觉。

要在react-native中实现此效果，您可以使用Animated库将一个图像的位置插入另一个图像的位置的一小部分。

为了举例，我们假设你想要垂直方向的视差效果，并且所有的图像都垂直定位。

首先，您需要组件状态中的动画值：

this.state = {
    ...
    imagePos: new Animated.Value(0)
}

然后，对于每个Image样式，您可以在其y轴上添加变换：

<Animated.Image src={...} style={[firstImageStyle, {
        transform: [{translateY: this.state.imagePos.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 100]
        })}]
    }]}

<Animated.Image src={...} style={[secondImageStyle, {
        transform: [{translateY: this.state.imagePos.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 50]
        })}]
    }]}

请注意，使用Animated.Image代替Image可以使图片具有动画效果。

当imagePos的值介于0和1之间时，这将导致第一个图像在0-100 dp之间水平移动，第二个图像在0-50 dp之间移动。

要更改动画值的值，您可以使用Animated库中的任何函数（计时，弹簧，衰减等），也可以将其附加到某个原生事件。

动画库文档有更多细节。

至于陀螺仪的使用，我没有详细介绍，但您可以使用react-native-sensors或react-native-motion-manager来获取所需的值，并将它们附加到动画中。

Answer 2

通过使用像https://github.com/react-native-sensors/react-native-sensors这样的软件包，我设法获取手机位置的x，y，z值并使用它为图像设置动画。

  constructor() {
    super();
    this.state = {
      x: 0,
      y: 0,
      z: 0,
    };
  }

  componentWillMount() {
    // Normal RxJS functions
    accelerationObservable
        .subscribe(({x, y, z}) => this.setState({
          x: x,
          y: y,
          z: z,
        }));
  }

  render() { return (
      <Image style={{left: this.state.x + this.state.y, top: this.state.z}}
                   source={require('image.png')}/>
    )
  }

在React Native中创建一个视差图像

2 个答案: