Animate a sphere (rotation)

Question

I am trying to build my first animation, I just want to make a sphere rotate (like a head turning left or right).

I looked at the Animated API but I get the following error:

Transform with key of "rotateY" must be a string or number: {"rotateY":0}

Like if my animated object could not be parsed by react-vr.

Here is what I tried:

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);

The error happens when the component is rendered, even if I don't call the #turnLeft method.

Do you know how we are supposed to make this animated rotation happen?

Answer 1

The error you are seeing is from trying to assign an animated element to an element thats just not yet set up for animation. You can animate the view which contains it or create an animated component for model.

const AnimatedModel = Animated.createAnimatedComponent(Model);