动画在 ReactVR 中不起作用

Question

似乎我在某处缺少一件事，因为我在控制台中没有看到任何错误，但动画似乎没有运行，或者我的场景太重以至于动画在实际加载模型之前运行......我的代码中缺少什么？

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

Answer 1

尝试按轴单独设置翻译，而不是这样：

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

试试这个

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

这应该可以为您解决问题。对于像上面这样的数组中引用的所有动画属性，我都遇到了这个问题。