Animation not working in ReactVR

Question

It seems I'm missing one thing somewhere as I'm not seeing any errors in the console but the animation doesn't seem to be running or my scene is too heavy that the animation runs before the model is actually loaded...anything I'm missing in my code?

import React from 'react';
import { asset, View, StyleSheet, Model, Animated } from 'react-vr';

const AnimatedModel = Animated.createAnimatedComponent(Model);

export default class Loral extends React.Component {
   constructor(props) {
     super(props);
    this.state = {
      satelliteTransX: new Animated.Value(3),
      satelliteRotY: -45,
    };
  }

  componentDidMount() {
     this.state.satelliteTransX.setValue(3);
     Animated.timing(
       this.state.satelliteTransX,
      {
        toValue: 10,
        duration: 1000,
        delay: 1000
      }
     ).start();
   }

   render() {
     return (
       <View>
         <AnimatedModel 
           source={{
             obj: asset('/Loral-1300Com-obj/Loral-1300Com-main.obj'),
             mtl: asset('/Loral-1300Com-obj/Loral-1300Com-main.mtl')
           }}
           style={{
                 transform: [
                {translate: [this.state.satelliteTransX, 0, -10]},
                { scale: 0.01 },
                { rotateX: 30},
                { rotateY: this.state.satelliteRotY }
             ]
           }} 
         />
      </View>
     );
  }
};

cidicles · Accepted Answer · 2017-11-17T22:56:41.487

1

Try setting your translate individually by axis so instead of this:

 style={{
    transform: [
       {translate: [this.state.satelliteTransX, 0, -10]},
       { scale: 0.01 },
       { rotateX: 30},
       { rotateY: this.state.satelliteRotY }
    ]
 }}

try this

 style={{
    transform: [
       {translateX: this.state.satelliteTransX},
       {translateY: 0},
       {translateZ: -10},
       { scale: 0.01 },
       { rotateX: 30},
       { rotateY: this.state.satelliteRotY }
    ]
 }}

That should do the trick for you. I have experienced this issue for all animated properties referenced in an array like you have above.

edited Nov 17 '17 at 22:56

answered Nov 17 '17 at 20:14

cidicles

351
2
8

Not sure I’m following your recommedation here. My translate X axis is already separate and the value I’m trying to animate. Can you show me in my code what you are recommending? – Emmanuel Henri Nov 17 '17 at 22:50
Sorry about that - was a little unclear. Updated my answer. – cidicles Nov 17 '17 at 22:57

Animation not working in ReactVR

1 Answers1