Question

我正在尝试构建我的第一个动画，我只是想让一个球体旋转（就像一个头向左或向右转）。

我查看了动画API，但是我收到以下错误：

使用“rotateY”键进行转换必须是字符串或数字：{“rotateY”：0}

就好像我的动画对象无法被react-vr解析。

以下是我的尝试：

import React from 'react';

import {
  Animated,
  AppRegistry,
  asset,
  Pano,
  Sphere,
  View,
} from 'react-vr';

const sphereProps = {
  radius: 0.5,
  widthSegments: 20,
  heightSegments: 12
};

export default class Test extends React.Component {
  constructor() {
    super();

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

  turnLeft = () => {
    Animated.timing(
      this.state.viewPoint,
      {
        toValue: -20,
        duration: 3000
      }
    ).start();
  }

  turnRight = () => {
    Animated.timing(
      this.state.viewPoint,
      {
        toValue: 20,
        duration: 3000
      }
    ).start();
  }

  render() {
    return (
      <Animated.View>
        <Pano source={asset('background.jpg')}/>

        <Sphere
          { ...sphereProps }
          style={{
            color: 'blue',
            transform: [
              { translate: [0, 0, -4] },
              { rotateY: this.state.viewPoint }
            ],
          }}
        />

      </Animated.View>
    );
  }

  componentDidMount() {
    this.turnLeft();
  }
};

AppRegistry.registerComponent('Test', () => Test);

即使我没有调用#turnLeft方法，在呈现组件时也会发生错误。

你知道我们应该如何让这种动画旋转发生吗？

Answer 1

您看到的错误是尝试将动画元素分配给尚未设置动画的元素。您可以为包含它的视图设置动画或为模型创建动画组件。

const AnimatedModel = Animated.createAnimatedComponent(Model);

为球体设置动画（旋转）

1 个答案: