为球体设置动画（旋转）答案

【问题标题】：Animate a sphere (rotation)为球体设置动画（旋转）
【发布时间】：2017-10-30 10:51:47
【问题描述】：

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

我查看了动画 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方法，渲染组件时也会发生错误。

你知道我们应该如何实现这种动画旋转吗？

【问题讨论】：

标签： react-360

【解决方案1】：

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

const AnimatedModel = Animated.createAnimatedComponent(Model);

【讨论】：